Click here to Skip to main content
11,488,877 members (78,719 online)
Click here to Skip to main content

Custom ContextMenu in Silverlight Applications

, 21 Aug 2012 CPOL 15.6K 4
Rate this:
Please Sign up or sign in to vote.
In this simple tutorial I want to show How to hide the default Context Menu presents on every Silverlight Application created via Visual Studio.

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 <img src= 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Christian Amado
Software Developer
Paraguay Paraguay
Christian Amado is a Microsoft MVP, software engineer, pro developer and trainer with over 12 years of experience building application for Windows Desktop and the Web. Located in Asuncion, Paraguay, He is well involved in many Microsoft's technologies including XAML, C#, WCF, ADO.NET and ASP.NET.

Christian is quick to embrace new development technologies and has won some awards in programming competitions organized by communities. He is also involved in the Microsoft Student Partner program helping nominees students and is the Group Leader in the only Windows Phone Developers Group in Paraguay.

He holds a several Microsoft certifications including Microsoft Certified Professional Developer (MCPD), Microsoft Certified IT Professional, Microsoft Certified Technology Specialist and Microsoft Office Specialist.
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
GeneralMy vote of 5 Pin
Dulce Barrios5-Sep-12 17:31
memberDulce Barrios5-Sep-12 17:31 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.150520.1 | Last Updated 21 Aug 2012
Article Copyright 2012 by Christian Amado
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid