Silverlight 4.0 : Drop It, then move it everywhere you want
Setelah mencoba fitur Drop pada Silverlight 4.0 di sini, maka lucu rasanya kalau cuma ngedrop gambar tapi didiamkan begitu saja tanpa diapa-apain. Pada posting kali ini akan dicoba memberikan kemampuan agar gambar yang di-drop dapat digerakan sesuai keinginan user.
Berikut ini adalah kode terakhir pada posting yang membahas fitur Drop.
1: private void DropArea_Drop(object sender, DragEventArgs e)
2: {
3: if (e.Data != null)
4: {
5: FileInfo[] files = e.Data.GetData(DataFormats.FileDrop) as FileInfo[];
6:
7: foreach (FileInfo fi in files)
8: {
9: DropArea.Children.Clear();
10:
11: using (Stream stream = fi.OpenRead())
12: {
13: try
14: {
15: BitmapImage bi = null;
16:
17: bi = new BitmapImage();
18: bi.SetSource(stream);
19:
20: double cx = (double)bi.PixelWidth;
21: double cy = (double)bi.PixelHeight;
22:
23: // resize ukuran gambar yang ditampilkan
24: if (cx >= cy)
25: {
26: cy *= 390.0 / cx;
27: cx = 390.0;
28: }
29: else
30: {
31: cx *= 390.0 / cy;
32: cy = 390.0;
33: }
34:
35: Image image = new Image();
36: image.Source = bi;
37:
38: WriteableBitmap wb1 = new WriteableBitmap((int)cx, (int)cy);
39: ScaleTransform transform = new ScaleTransform();
40: transform.ScaleX = cx / bi.PixelWidth;
41: transform.ScaleY = cy / bi.PixelHeight;
42: wb1.Render(image, transform);
43: wb1.Invalidate();
44:
45: Image gambar = new Image();
46: gambar.Source = wb1;
47:
48: label1.Content = fi.Name;
49: DropArea.Children.Add(gambar);
50: }
51: catch (Exception)
52: {
53: }
54: }
55: }
56: }
57: }
Pada baris ke-49 dapat dilihat objek gambar yang “ditambahkan ke dalam” objek“ DropArea. Objek gambar adalah file gambar yang kita drop pada aplikasi Silverlight ini. Agar objek itu dapat kita gerakan ke area yang diinginkan maka objek tersebut mesti ditambahkan kemampuan, sebagai berikut :
- Event handler ketika mouse diklik pada objek gambar.
- Event handler ketika mouse digerakkan saat tombol kiri mouse masih ditekan.
- Event handler ketika tombol kiri mouse dilepas.
Dengan ketiga kemampuan tersebut maka kita dapat memilih objek yang akan digerakkan dengan cara mengkliknya, menahan dan menggerakkan objek tersebut ke lokasi yang diinginkan. Ketika objek telah mencapat lokasi yang diinginkan maka ketika tombol mouse diangkat, objek akan menetap pada lokasi tersebut.
Untuk mendaftarkan ketiga kemampuan tersebut dapat digunakan baris berikut ini :
gambar.MouseLeftButtonDown += new MouseButtonEventHandler(OnButtonDown);
gambar.MouseMove += new MouseEventHandler(OnMouseMove);
gambar.MouseLeftButtonUp += new MouseButtonEventHandler(OnButtonUp);
Dari contoh di atas dapat dilihat objek gambar sudah mempunyai ketiga kemampuan yang telah disebutkan di atas, dimana masing-masing kemampuan tersebut akan memanggil method OnButtonDown, OnMouseMove dan OnButtonUp.
{OnButtonDown}
Method ini akan dipanggil ketika objek gambar diklik. Yang dilakukan adalah mengambil nilai x,y dari objek tersebut. Kemudian memberikan status bahwa objek dapat digerakkan.
private void OnButtonDown(object sender, MouseButtonEventArgs e)
{
_lastx = e.GetPosition(null).X;
_lasty = e.GetPosition(null).Y;
((FrameworkElement)sender).CaptureMouse();
_dragging = true;
}
{OnMouseMove}
Method ini akan membuat objek gambar dapat digerakkan selama tombol kiri mouse ditekan.
private void OnMouseMove(object sender, MouseEventArgs e)
{
if (_dragging)
{
double x = e.GetPosition(null).X;
double y = e.GetPosition(null).Y;
double dx = x - _lastx;
double dy = y - _lasty;
_lastx = x;
_lasty = y;
((FrameworkElement)sender).SetValue(Canvas.LeftProperty, (double)((FrameworkElement)sender).GetValue(Canvas.LeftProperty) + dx);
((FrameworkElement)sender).SetValue(Canvas.TopProperty, (double)((FrameworkElement)sender).GetValue(Canvas.TopProperty) + dy);
}
}
{OnButtonUp}
Sedangkan Method ini akan dipanggil ketika tombol kiri mouse di lepas.
private void OnButtonUp(object sender, MouseButtonEventArgs e)
{
((FrameworkElement)sender).ReleaseMouseCapture();
_dragging = false;
}
Dan gambar yang di-drop akhirnya bisa digerakkan ke lokasi yang diinginkan.
Source contoh ini dapat diunduh pada link di bawah ini.