Silverlight Right Click on TextBlock by Ant

January 23, 2011 muthu Silverlight 0

While building some application which creates some data and displays it to final user, you may implement some way for user to grad that data. You can store it like file, send e-mail, but one obvious decision – is to give user ability to Copy-Paste.

In versions prior to Silverlight 4, when you right clicked an UI Element, the events were handled by the Silverlight plug-in internally to display the Silverlight configuration dialog. In Silverlight 4, you now have the ability to right click an element and invoke a custom ContextMenu. Silverlight 4 now adds support for MouseRightButtonDown and the MouseRightButtonUp events on all UIElements. The Silverlight Toolkit (April Release) also introduces the ContextMenu control to Silverlight developers. It included in System.Windows.Controls namespace.

This is is simple ContextMenu with 3 items:

 
<toolkit:ContextMenuService.ContextMenu> 
<toolkit:ContextMenu Name="Menu"> 
<toolkit:MenuItem Header="Copy" Click="MenuItem_Click"/> 
<toolkit:Separator/> 
<toolkit:MenuItem Header="Paste" Click="MenuItem_Click"/> 
</toolkit:ContextMenu> 
</toolkit:ContextMenuService.ContextMenu>

We will get each item header in code to perform appropriate actions:

 
private void MenuItem_Click(object sender, RoutedEventArgs e) 
{ 
  MenuItem menuItem = (MenuItem)sender; 
  switch (menuItem.Header.ToString()) 
  { 
   case "Copy": 
    Clipboard.SetText(textblock.Text)); 
   break; 
   case "Paste": 
    textblock.Text = Clipboard.GetText(); 
   break; 
   default: 
   break; 
  } 
  Menu.IsOpen = false; 
}

In the code shown above, we are programmatically accessing the clipboard when a menu item of the ContextMenu is clicked to do Copy and Paste operations on the TextBox. Here’s what the code does

  • Clipboard.SetText() – Copies data from a Silverlight application to the clipboard
  • Clipboard.GetText()- Retrieves copied date from the clipboard
  • textblock.Text= Clipboard.GetText()- Does a copy and paste. To do a Cut operation, just use the Clipboard.SetText() and set the content of the current selection to an empty string
  • Step 4: The last part is to implement the right-click and display the ContextMenu on the TextBox. To do so, just handle the MouseRightButtonDown event and set the MouseButtonEventArgs.Handled property to true. In addition there is one more method – ContainsText, which is queries the clipboard for the presence of data in the UnicodeText format, but we will not use it here. More info on MSDN.

This is our XAML cs file.

 
public MainPage() 
{ 
  InitializeComponent(); 
  //Adding handlers for Mouse Right Button Up and Mouse Right Button Down 
  textblock.MouseRightButtonDown += new MouseButtonEventHandler(tb_MouseRightButtonDown); 
  textblock.MouseRightButtonUp += new MouseButtonEventHandler(tb_MouseRightButtonUp); 
} 
//Mouse Right Button Up handler 
void textblock_MouseRightButtonUp(object sender, MouseButtonEventArgs e) 
{ 
 //Getting position relative to our textblock 
 Menu.HorizontalOffset = e.GetPosition(textblock).X + 2; 
 Menu.VerticalOffset = e.GetPosition(textblock).Y + 2; 
 //Opening the context menu Menu.IsOpen = true; 
} 
//Mouse Right Button Down handler void tb_MouseRightButtonDown(object sender, MouseButtonEventArgs e) 
{ 
  //Setting handled, so there will be no default context menu 
 e.Handled = true; 
}

The ContextMenu.IsOpen sets a value to make the ContextMenu visible. That’s it. Run your application and you should be able to invoke the ContextMenu on right-click and perform Cut, Copy and Paste operations on the TextBox. Note: When you programmatically access the clipboard for the first time, Silverlight will prompt the user with a dialog to request permission to access the clipboard. Click Yes.