Reyza

tenang, senang, sederhana
See also: Other Geeks@INDC

Public

March 2010 - Posts

Put Right Click Feature on Silverlight’s Control

Setelah gambar sudah bisa di drop dan ditampilkan pada badan aplikasi Silverlight kemudian digerak-gerakan, mungkin ada yang ingin melakukan suatu aksi pada gambar yang dipilih. Karena aksinya dilakukan pada objek gambar yang dipilih dan pilihan aksi yang dapat dilakukan ada kemungkinan lebih dari 1 aksi, maka cara yang paling elegan adalah menampilkan menu atau dialog didekat objek gambar tersebut. Karena klik tombol kiri mouse telah digunakan untuk proses drag-drop, maka untuk memunculkan pilihan aksi terpaksa harus menggunakan klik tombol kanan mouse .

Untungnya Silverlight 4 sudah memberikan event untuk klik tombol kanan mouse, yaitu :

  • MouseRightButtonDown.
  • MouseRightButtonUp.

Sebelum menambahkan fitur ini ke kode sebelumnya, maka ada baiknya dibuat contoh yang sederhana dulu seperti di bawah ini.

<UserControl x:Class="RightClickApp.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400" xmlns:dataInput="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input">

<Grid x:Name="LayoutRoot" Background="White" MouseRightButtonDown="LayoutRoot_MouseRightButtonDown">
<dataInput:Label Height="28" HorizontalAlignment="Left" Margin="12,12,0,0" Name="label1" VerticalAlignment="Top" Width="120" />
</Grid>
</UserControl>

dan ini :

using System.Windows.Controls;
using System.Windows.Input;

namespace RightClickApp
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
}

private void LayoutRoot_MouseRightButtonDown(object sender, MouseButtonEventArgs e)
{
label1.Content = "Right mouse button clicked";
}
}
}

Hmm….kode di atas, sepertinya terlalu sederhana, nenek juga bisa bikin seperti di atas kalau bisa menggunakan VS2010 :)

Bagaimana kalau contoh berikut ini. Yang dilakukan pertama adalah menyiapkan dialog yang akan menjadi rumah aksi-aksi yang dapat dipilih user.

geek1

Untuk membuat dialog saat gambar diklik kanan dengan mouse seperti gambar di bawah ini, maka perlu ditambahkan 2 class Dialog.cs dan SimpleDialog.cs.

geek2

File Dialog.cs merupakan hasil rekayasa ulang dari class yang terdapat pada posting ini. Berikut adalah isi dari class ini :

/*
* Dialog class code provided by Dave Relyea
* Original information and background can be found
* here: http://blogs.msdn.com/devdave/archive/2008/06/08/using-popup-to-create-a-dialog-class.aspx
* */
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
using System.Windows.Media;

namespace RightClickApp.Controls
{
public abstract class Dialog
{
private Point _location;
private bool _isShowing;
private Popup _popup;
private Grid _grid;
private Canvas _canvas;
private FrameworkElement _content;

public void Show(Point location)
{
if (_isShowing)
throw new InvalidOperationException();

_isShowing = true;
_location = location;
EnsurePopup();
_popup.IsOpen = true;
}

public void Close()
{
_isShowing = false;

if (_popup != null)
{
_popup.IsOpen = false;
}
}

protected abstract FrameworkElement GetContent();

protected virtual void OnClickOutside() { }

private void EnsurePopup()
{
if (_popup != null)
return;

_popup = new Popup();
_grid = new Grid();

_popup.Child = _grid;

_canvas = new Canvas();

_canvas.MouseLeftButtonDown += (sender, args) => { OnClickOutside(); };
_canvas.MouseRightButtonDown += (sender, args) => { args.Handled = true; OnClickOutside(); };

_canvas.Background = new SolidColorBrush(Colors.Transparent);

_grid.Children.Add(_canvas);

_content = GetContent();

_content.HorizontalAlignment = HorizontalAlignment.Left;
_content.VerticalAlignment = VerticalAlignment.Top;
_content.Margin = new Thickness(_location.X, _location.Y, 0, 0);


_grid.Children.Add(_content);

UpdateSize();
}

private void OnPluginSizeChanged(object sender, EventArgs e)
{
UpdateSize();
}

private void UpdateSize()
{
_grid.Width = Application.Current.Host.Content.ActualWidth;
_grid.Height = Application.Current.Host.Content.ActualHeight;

if (_canvas != null)
{
_canvas.Width = _grid.Width;
_canvas.Height = _grid.Height;
}
}
}
}

Sedangkan class SimpleDialog.cs adalah class turunan dari Dialog.cs, yang berfungsi untuk memberikan fitur dialog pada gambar yang diinginkan. Berikut isi dari file SimpleDialog.cs.

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Shapes;

using RightClickApp.Controls;

namespace RightClickApp
{
public class SimpeDialog : Dialog
{
Image _image;

public SimpeDialog(Image image)
{
_image = image;
}

protected override void OnClickOutside()
{
Close();
}

protected override FrameworkElement GetContent()
{
Grid grid = new Grid() { Width = 150, Height = 115 };
Border border = new Border() { BorderBrush = new SolidColorBrush(Colors.Black), BorderThickness = new Thickness(1), Background = new SolidColorBrush(Colors.LightGray) };
grid.Children.Add(border);

TextBlock upload = new TextBlock() { Text = "Upload", Width = 130 };

TextBlock robert = new TextBlock() { Text = "Deteksi tepi Robert", Width = 130 };

TextBlock sobel = new TextBlock() { Text = "Deteksi tepi Sobel", Width = 130 };

TextBlock prewitt = new TextBlock() { Text = "Deteksi tepi Prewitt", Width = 130 };

TextBlock canny = new TextBlock() { Text = "Deteksi tepi Canny", Width = 130 };

ListBox options = new ListBox();
options.Items.Add(upload);
options.Items.Add(robert);
options.Items.Add(sobel);
options.Items.Add(prewitt);
options.Items.Add(canny);

grid.Children.Add(options);

return grid;
}
}
}

Selanjutnya adalah memasang event klik tombol kanan mouse pada gambar yang diinginkan.

   1: <UserControl x:Class="RightClickApp.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="300" d:DesignWidth="400" xmlns:dataInput="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input">
   8:  
   9:     <Grid x:Name="LayoutRoot" Background="White">
  10:         <Image Height="224" MouseRightButtonDown="Gambar_MouseRightButtonDown" MouseRightButtonUp="Gambar_MouseRightButtonUp" HorizontalAlignment="Left" Margin="93,12,0,0" Name="Gambar" Stretch="Fill" VerticalAlignment="Top" Width="224" Source="/RightClickApp;component/Images/reza.JPG" />
  11:     </Grid>
  12: </UserControl>
Pada baris ke 10 terdapat Image dengan event MouseRightButtomUp dan MouseRightButtonDown.
   1: using System.Windows.Controls;
   2: using System.Windows.Input;
   3:  
   4: namespace RightClickApp
   5: {
   6:     public partial class MainPage : UserControl
   7:     {
   8:         public MainPage()
   9:         {
  10:             InitializeComponent();
  11:         }
  12:  
  13:         private void Gambar_MouseRightButtonDown(object sender, MouseButtonEventArgs e)
  14:         {
  15:             e.Handled = true;
  16:         }
  17:  
  18:         private void Gambar_MouseRightButtonUp(object sender, MouseButtonEventArgs e)
  19:         {
  20:             SimpeDialog simpleDialog = new SimpeDialog(Gambar);
  21:             simpleDialog.Show(e.GetPosition(LayoutRoot));
  22:         }
  23:     }
  24: }

 

Pada baris 13, terdapat handler yang berfungsi agar saat klik tombol kanan mouse dilakukan, jangan menampilkan menu Silverlight seperti gambar di bawah.

geek3

Sedangkan dimulai pada baris ke 18 adalah handler dari MouseRightButtonUp yang berfungsi untuk menampilkan dialog yang berisikan aksi-aksi yang nanti dapat dilakukan terhadap gambar.

Untuk mencoba contoh di atas, dapat dilakukan dengan terlebih dahulu mengunduh solution di bawah ini.

Dengan berbekal contoh di atas, maka tinggal menambahkan fitur ini pada solution pada posting sebelumnya. Caranya, hampir sama dengan langkah yang telah disebutkan di atas. Pada solution ini tambahkan folder Controls yang berisi class Dialog.cs dan SimpleDialog.cs. Karena kedua class tersebut tergabung dalam namespace RightClickApp, maka perlu ditambahkan baris berikut ini :

using RightClickApp;

 

Setelah itu pada method DrawImage ditambahkan baris ke-8 dan ke-9:

   1: private void DrawImage(FileInfo fi)
   2: {
   3:     using (Stream stream = fi.OpenRead())
   4:     {
   5:         try
   6:         {
   7:             . . . .
   8:             gambar.MouseRightButtonDown += new MouseButtonEventHandler(OnRightButtonDown);
   9:             gambar.MouseRightButtonUp += new MouseButtonEventHandler(OnRightButtonUp);
  10:             . . .
  11:         }
  12:         catch (Exception)
  13:         {
  14:         }
  15:     }
  16: }

Kemudian tinggal tambahkan method handler OnRightButtonDown dan OnRightButtonUp.

private void OnRightButtonDown(object sender, MouseButtonEventArgs e)
{
e.Handled = true;
}

private void OnRightButtonUp(object sender, MouseButtonEventArgs e)
{
Image gambar = (Image)sender;
SimpeDialog simpleDialog = new SimpeDialog(gambar);
simpleDialog.Show(e.GetPosition(LayoutRoot));
}

 

Dan berikut hasilnya :

geek4

Dapat dilihat pada gambar ketika diklik tombol kanan mouse akan dimunculkan dialog.

Untuk mencoba solution ini dapat mengunduh file di bawah ini.

Selamat mencoba.

Share this post: | | | |
Posted: Mar 09 2010, 07:17 AM by reyza | with no comments
Filed under: