WPF tutorial: HOW TO Enable and show context menu on left click in WPF?
Dear visitor: Please keep in mind that this post is originally from Vibor Cipan's personal blog, the name of which we eventually adopted as our company name together with its conveniently-named URL. We're keeping the posts on our official company blog for all the subscribers to Vibor's blog who have read and commented on his previous posts. Please be aware that this post represents Vibor's personal thinking few years ago and doesn't necessarily represent the opinions of the UX Passion as a company today.
Context menus are usually being shown when user uses right mouse button to click on control. Try right clicking on windows desktop and you will see context menu. But sometimes while designing user interactions you want context menu to appear on regular, left-click. Here is how…
As always, I will suppose that you are using Expression Blend 2 SP 1 and Visual Studio 2008 and we will use C# code as programming logic in this case (tough there will be only two lines of code involved).
First, let’s create regular button. Click on Button tool in Blend and draw button on workspace. Under Common Properties group find Content property and set it to “Regular Button“. You should get something like on following picture.
Now will selected button scroll down in Properties pane until you get to Miscellaneous group. Locate ContextMenu label and click on New button.
Group will expand and then you should locate the Items (Collection) label and click on “…” button.
Collection Editor for Context menu items will appear. In this editor you can specify exactly what kind of items you want to have in your context menu.
Let’s keep it simple for now and just click on drop-down menu and pick MenuItem. Now, on the right side of the interface you will see properties related to your MenuItem.
Navigate to Common Properties group and under Header field enter “New“. That content will be shown as an item in your context menu.
Press ENTER and repeat the procedure to add more items. Consider adding Separator item (from same drop-down menu you used to add MenuItem) to make your menu appear better organized. Note that Separator does not have any header-like properties.
When you are done click on OK to close Collection Editor.
Hit F5 to start your application. Right-click on your button and you will see something similar to image bellow. Of course actual appearance of your menu will be different – depending on organization of your items.
Up to now we haven’t discovered anything too complicated. We’ve created simple context menu that is being shown when you right-click on button control.
How to make context menu to appear when you left-click (normal click) on button or some other control? I am going to show you that right away.
Before proceeding, let’s take a look at XAML code right now to see how context menu is defined in XAML.
Click on XAML or Split tab on the right side of your Blend workspace and investigate code. It should look somewhat like this:
You can see that XAML structure of context menu is fairly simple and understandable so you can add more items directly within code (it is probably faster than using the procedure described in the beginning of this document).
Anyhow, we will add assign name to this context menu. So, I will change line 13 in my case to look like this:
As you can see I’ve just added x:Name = “LeftClickMenu” to assign name to my context menu.
Now let’s go into a code for some more fun…
Select your button on design surface and under Properties tab find Events command (marked on picture bellow):
Click on it and from the list of events navigate to Click. Type “ButtonClicked” or some other name you want for this.
Now hit Enter on your keyboard and Visual Studio will start leading you right to the location where we will add our code.
Type these two lines:
LeftClickMenu.PlacementTarget = this;
LeftClickMenu.IsOpen = true;
So your code will look like this:
Save your changes and hit F5 to start application. Left-click on your button and there it is – you have just enabled context menu on left click in WPF application using the Expression Blend and just two lines of C# code. Simple as that…
Feel free to download source code but also note that code is given here for demonstration purposes and that I and/or my employer cannot be held for any consequences of your usage of this code. Use it on your own responsibility.