Custom ContextMenu in Silverlight Applications

In every Silverlight application we have a context menu with two elements inside, one of them corresponding to the information of Silverlight’s version installed on the current computer. The another one allow to install a Silverlight Business Application (not available on this tutorial).

Because we only apply an Web Site implementation, don’t have the “Install Silverlight Application” option. This option is only available on a Silverlight Business Application where we can install and uninstall the Silverlight application from desktop. Silverlight Business Application allows two ways of implementation: In the browser and Out of the browser (just like a desktop application).

Obviously, the first step is to create a new Silverlight Application, selecting the option of Web Site (on the DropDownList). Or, if you prefer you can add this functionality on your current project.

At this point, we have our default files and folders. We focused on MainPage files (.xaml and .xaml.cs). To avoid confusion we delete the aspx file on Web Site project, we don’t need on this tutorial.

On your MainPage.xaml page put these lines of code:

<UserControl x:Class="CustomContextMenu.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"
 Height="200" Width="350">

<Grid x:Name="LayoutRoot" Background="Azure">
 <TextBlock Text="Context Example" FontFamily="Arial" FontSize="12" FontWeight="Bold" />
 </Grid>
</UserControl>

Run the project (F5). Don’t forget to mark the Web Site as startup project! Here, Visual studios asks if we want to modify the web.config or not. Just, leave the default option.

Well, after do all of these steps we have an empty project with Azure background and a simple textblock, for testing purposes is OK. By default, our little silverlight have a context menu that show “Silverlight“.

Go back to the Visual Studio and Stop the running project. Now we going to focus on MainPage.xaml.cs.

Ok, now we going to disable that context menu from Silverlight Application. For do this we need to write some code (inside your MainPage.xaml.cs file), just like this:

//Constructor of the Main Page
 public MainPage()
 {
 // Initialize all Visual components
 InitializeComponent();

// Add the Mouse Right click Event Handler
 this.MouseRightButtonDown += (s, e) =>
 {
 //Mark the routed event as handled to disable the default context menu.
 e.Handled = true;
 };
 }

The code above creates an mouse right button event handler. So, when we right click on any place inside the silverlight aplication we must cancel the event. Really we Handle the event saying to the compiler “leave this, I have control of this event!”.

All right, but the main title talks about “Custom ContextMenu”. The fragment below talks about that. But I think that was useful for many of you. Now, the last thing that I can tell you is that if you want to implement that behavior you must need to copy/past the c# code inside all Constructors of any Page in your Silverlight Page (In a few days I will implement another way to do this).

Now, we focused on the main title of this tutorial. We’ll create a new contextual menu independent from the default one (you can add background, forecolor, and all you want on xaml).

For create a new context menu, we need to write the following lines on our MainPage.xaml file, just like this: 

<UserControl x:Class="CustomContextMenu.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"
 Height="200" Width="350"
 xmlns:contextMenu="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input.Toolkit">

<Grid x:Name="LayoutRoot" Background="Azure">
 <TextBlock Text="Context Example" FontFamily="Arial" FontSize="12" FontWeight="Bold" />
 <contextMenu:ContextMenuService.ContextMenu>
 <contextMenu:ContextMenu>
 <contextMenu:MenuItem Header="Contextual Menu 1" />
 <contextMenu:Separator />
 <contextMenu:MenuItem Header="Contextual Menu 2" Click="MenuItem_Click" />
 </contextMenu:ContextMenu>
 </contextMenu:ContextMenuService.ContextMenu>
 </Grid>
</UserControl>

Sure, many of you have some error in your xaml saying “We can’t find the namespace…”. To fix errores just don’t forget to Add References to System.Windows.Controls and System.Windows.Controls.Input.Toolkit namespaces.

Now, in your MainPage.xaml.cs (You can press F7 key for direct access to code behind)  add this line of code:

private void MenuItem_Click(object sender, RoutedEventArgs e)
 {
 //Show a simple message on Silverlight Application
 MessageBox.Show("You clicked on Contextual Menu 2!");
 }

Remember that you can create really beautiful contextmenu if you play with some element inside your xaml. I can tell you that XAML allow some really nice alternatives to do fantastic applications. All we have to do is taking our visual studio and play with some features available inside it. C# is a powerful language but we can replace some lines of code with xaml adoption. Sure, depends of you.

That was a very simple tutorial about ContextMenu on Silverlight 5. This implementation is very useful if you need to present alternatives for the user that consume your application. It’s very simple to right click and have a quick access to main features for a determinate scenario. Hope you can comments on this article to show me another way or another example of contextmenu.

Hope you can find this article useful