Silverlight 4: How to use the all new Right Click Context Menu?


In my previous posts I discussed about “How to work with Notification API?” & “How to Capture Video from Default Webcam?”. In this post I will describe about the another cool new feature (“How to use the all new Right Click Context Menu?”) of Silverlight 4.

Silverlight 4 has now support for right click. You can now register the event “MouseRightButtonDown” & “MouseRightButtonUp” to any FrameworkElement. Hence, no need to use JavaScript to disable the right click option. If you want to disable the right click option then just implement those events with:

e.Handled = true;

Now if you want to implement a Context Menu on right click, create the Popup Context menu & position it to proper location. The following code will create the context menu:

private Popup CreateContextMenu(Point currentMousePosition)
{
    Popup popup = new Popup();
    Grid popupGrid = new Grid();
    Canvas popupCanvas = new Canvas();

    popup.Child = popupGrid;
    popupCanvas.MouseLeftButtonDown += (sender, e) => { HidePopup(); };
    popupCanvas.MouseRightButtonDown += (sender, e) => { e.Handled = true; HidePopup(); };
    popupCanvas.Background = new SolidColorBrush(Colors.Transparent);
    popupGrid.Children.Add(popupCanvas);
    popupGrid.Children.Add(CreateContextMenuItems(currentMousePosition));

    popupGrid.Width = Application.Current.Host.Content.ActualWidth;
    popupGrid.Height = Application.Current.Host.Content.ActualHeight;
    popupCanvas.Width = popupGrid.Width;
    popupCanvas.Height = popupGrid.Height;

    return popup;
}
CreateContextMenuItems() will add some context menu items, on click it will show which menu item has been cllicked by you. Upto this I only talked about the creation of the customized context menu. Now we have to show it on right click inside the Silverlight application. In my example, I added a Border control which has the right click event registered. Now check the below implemented code which will be responsible for showing the context menu:
void brdRightClickZone_MouseRightButtonUp(object sender, MouseButtonEventArgs e)
{
    txbMessage.Text = "Right Clicked";
    Point currentMousePosition = e.GetPosition(LayoutRoot);
    ShowPopup(currentMousePosition);
}

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

On right mouse down, I am setting the e.Handled = true. This ensures that, this will not show up the default Silverlight context menu & the right mouse up implementation will popup the customized context menu at the current mouse position.

What next? Download the sample application created by me & implement your own logic to create the customized context menu which will open on right click on your silverlight application.

Download Sample Application:  Silverlight 4 Right Click Context Menu Demo


If you have come this far, it means that you liked what you are reading. Why not reach little more and connect with me directly on Twitter, Facebook, Google+ and LinkedIn. I would love to hear your thoughts and opinions on my articles directly. Also, don't forget to share your views and/or feedback in the comment section below.

1 comments

 
© 2008-2016 Kunal-Chowdhury.com - Microsoft Technology Blog for developers and consumers | Designed by Kunal Chowdhury
Back to top