Daddy, Mommy want to rotate, resize & move image on your Silverlight Application easily
Daddy, mommy says; if you won’t attack, all the things in the house will be broken.
Itu kata sang anak kepada Om Ip Man selagi masih berjaya di dunia persilatan. Sekarang, Om Ip Man sudah pindah profesi menjadi tukang bikin aplikasi Silverlight dengan bersenjatakan Expression Studio 4 dan Visual Studio 2010. Sekarang perkataan sang anak berbeda, yaitu :
Daddy, Mommy want to rotate resize & move image on your Silverlight Application easily.
Hm….”easily”, dengan mudah? Dengan memanfaatkan “Adorner” maka hal itu jadi lebih mudah. “Adoner” adalah sedikit kode yang terdiri atas file XAML dan class yang sangat membantu untuk membuat gambar mudah dirotasi, diubah ukurannya dan di-drag dimanapun lokasi yang diinginkan (selama masih dalam halaman Silverlight).
“Adorner” dapat ditemukan di sini. Di dalam ini ada file-file penting yang dapat kita gunakan ulang, yaitu :
- Adorner.xaml & Adorner.xaml.cs, file ini akan memberikan ‘kelakuan-kelakuan’ (rotate, resize dan move) di atas kepada elemen yang diinginkan.
- IAdornedObject.cs.
Kita cukup menambahkan file-file tersebut pada project yang sedang dikerjakan.
Selanjutkan akan ditambahkan elemen canvas dan satu elemen image didalam canvas pada file MainPage.xaml, seperti yang dapat dilihat pada baris 10 sampai 12.
1: <UserControl x:Class="RotateMoveResize.MainPage"
2: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4: xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5: xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6: mc:Ignorable="d"
7: d:DesignHeight="600" d:DesignWidth="800">
8:
9: <Grid x:Name="LayoutRoot" Background="#FFCE0000">
10: <Canvas Height="576" HorizontalAlignment="Left" Margin="12,12,0,0" Name="Canvas_ImageArea" VerticalAlignment="Top" Width="776">
11: <Image Name="image1" Source="images/01.jpg" Stretch="UniformToFill" Width="247" Height="364" MouseLeftButtonDown="Image_MouseLeftButtonDown" Canvas.Left="323" Canvas.Top="31" />
12: </Canvas>
13: </Grid>
14: </UserControl>
Selanjutnya tinggal menambahkan baris-baris seperti pada baris 4, baris 10, baris 16-20 dan baris 23-30.
1: using System.Windows.Controls;
2: using System.Windows.Input;
3:
4: using TileMaster;
5:
6: namespace RotateMoveResize
7: {
8: public partial class MainPage : UserControl
9: {
10: Adorner _adorner = new Adorner();
11:
12: public MainPage()
13: {
14: InitializeComponent();
15:
16: _adorner.Width = 0;
17: _adorner.Height = 0;
18: AdornedObject item = new AdornedObject(image1);
19: image1.Tag = item;
20: Canvas_ImageArea.Children.Add(_adorner);
21: }
22:
23: private void Image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
24: {
25: Image img = (Image)sender;
26: Canvas_ImageArea.Children.Remove(img);
27: Canvas_ImageArea.Children.Insert(Canvas_ImageArea.Children.Count - 1, img);
28: _adorner.SetAdornedObject((IAdornedObject)img.Tag);
29: _adorner.StartMoveDrag();
30: }
31: }
32: }
Baris 4, adalah mendaftarkan namespace dari file Adorner.xaml.cs & IAdornedObject.cs.
Baris 10, instansiasi objek dari class Adorner.
Baris 16-20, mendaftarkan elemen image sebagai bagian dari objek Adorner sehingga akan mempunyai ‘kelakuan-kelakuan’ seperti di atas.
Sedang method Image_MouseLeftButtonDown untuk menangkap event ketika gambar diklik, sehingga gambar ‘aktif’ dan siap di-drag, di-rotate dan di-resize.
Hasilnya, dapat dilihat gambar berikut ini. Pada gambar dibawah ini dapat dilihat ketika cursor mouse berada di sisi gambar, dapat dilihat icon yang menandakan gambar dapat di-resize.
Sedangkan pada gambar dibawah ini dapat dilihat icon untuk melakukan rotasi ketika cursor mouse berada pada ujung dari gambar. Dan dengan melakukan klik dan memutar arah cursor akan membuat gambar tersebut berotasi.
Pertanyaan : apakah cuma bisa elemen image saja? bagimana dengan elemen lain seperti Rectangle? Jawabnya adalah BISA.
Selanjutnya adalah apabila gambar yang di dalam canvas Canvas_ImageArea lebih dari 1, maka kode berikut ini :
AdornedObject item = new AdornedObject(image1);
canvas1.Tag = item;
dapat diubah menjadi seperti berikut ini :
Random random = new Random(1);
foreach (Image image in Canvas_ImageArea.Children)
{
AdornedObject item = new AdornedObject(image, random.Next(50) - 25);
image.Tag = item;
}
Dan hasilnya bisa dilihat seperti gambar di bawah ini :
Bila ingin mencoba contoh di atas, maka dapat segera mengunduh file di bawah ini.