Home  separator  Controls  separator  Menus
Bookmark and Share Share...    Subscribe to this feed Feed   About Christian Moser  


Menus in WPF

Menu

The Menu control derives from HeaderedItemsControl. It stacks it items horizontally and draws the typical gray background. The only property that the Menu adds to ItemsControl is the IsMainMenu property. This controls if the menu grabs the focus if the user presses F10 or the ALT key.

 
<Menu IsMainMenu="True">
    <MenuItem Header="_File" />
    <MenuItem Header="_Edit" />
    <MenuItem Header="_View" />
    <MenuItem Header="_Window" />
    <MenuItem Header="_Help" />
</Menu>
 
 

MenuItem

The MenuItem is a HeaderedItemsControl. The content of the Header property is the caption of the menu. The Items of a MenuItems are its sub menus. The Icon property renders a second content on the left of the caption. This is typically used to draw a little image. But it can be used for type of content.

You can define a keyboard shortcut by adding an underscore in front of a character.

 
<MenuItem Header="_Edit">
    <MenuItem Header="_Cut" Command="Cut">
        <MenuItem.Icon>
            <Image Source="Images/cut.png" />
        </MenuItem.Icon>
    </MenuItem>
    <MenuItem Header="_Copy" Command="Copy">
        <MenuItem.Icon>
            <Image Source="Images/copy.png" />
        </MenuItem.Icon>
    </MenuItem>
    <MenuItem Header="_Paste" Command="Paste">
        <MenuItem.Icon>
            <Image Source="Images/paste.png" />
        </MenuItem.Icon>
    </MenuItem>
</MenuItem>
 
 

Checkable MenuItems

You can make a menu item checkable by setting the IsCheckable property to true. The check state can be queried by the IsChecked property. To get notified when the check state changes you can add a handler to the Checked and Unchecked property.

 
<MenuItem Header="_Debug">
    <MenuItem Header="Enable Debugging" IsCheckable="True" />
</MenuItem>
 
 

Separators

Separator is a simple control to group menu items. It's rendered as a horizontal line. It can also be used in ToolBar and StatusBar.

 
<Menu>
    <MenuItem Header="_File">
        <MenuItem Header="_New..." />
        <Separator />
        <MenuItem Header="_Open..." />
        <Separator />
        <MenuItem Header="_Save" />
        <MenuItem Header="_Save As..." />
        <Separator />
        <MenuItem Header="_Exit" />
    </MenuItem>
</Menu>
 
 

Callbacks

You can register a callback to any menu item by adding a callback to the Click event.

 
<Menu>
    <MenuItem Header="_File">
        <MenuItem Header="_New..."  Click="New_Click"/>
    </MenuItem>
</Menu>
 
 
 
private void New_Click(object sender, RoutedEventArgs e)
{
    MessageBox.Show("You clicked 'New...'");
}
 
 

How to bind MenuItems dynamically using MVVM

If you are using the model-view-viewmodel pattern, you probably want to define the available menu command dynamically in your code and then bind them to a MenuItem control. The following sample shows you how to do this:

 
<Menu>
    <Menu.Resources>
        <Style x:Key="ThemeMenuItemStyle" TargetType="MenuItem">
           <Setter Property="Header" Value="{Binding Name}"></Setter>
           <Setter Property="Command" Value="{Binding ActivateCommand}"/>
           <Setter Property="IsChecked" Value="{Binding IsActive}" />
           <Setter Property="IsCheckable" Value="True"/>
        </Style>
    </Menu.Resources>
    <MenuItem Header="Themes" ItemsSource="{Binding Themes}" 
              ItemContainerStyle="{StaticResource ThemeMenuItemStyle}"  />
</Menu>
 
 

Keyboard Shortcuts

To add a keyboard shortcut to a menu item, add a underscode "_" in front of the caracter you want to use as your hot key. This automatically sets the InputGestureText to an appropriate value. But you can also override the proposed text by setting this property to a text of your choice.





Last modified: 2010-07-21 10:14:30
Copyright (c) by Christian Moser, 2011.

 Comments on this article

Show all comments
Goo
Commented on 27.February 2009
Nice article. Perfect for a beginner like me
solairaja
Commented on 2.March 2009
you have missed to say how to create short cuts in the menuitems. plz clarify
George Shugan
Commented on 9.March 2009
Also can you provide the way to add hotkeys example &SAVE and S&AVE AS
Ralf Sinoradzki
Commented on 9.March 2009
Nice. I'm new to WPF and (.net related stuff in general) and this was really helpfull.
But I had some trouble to get shortcuts like Ctrl+Key working.
First I found a way to test for the shortcut in my C# code, but I didn't really like it, because I believe the actual key combination should be within the XAML code, where also the name of that menu item is defined.

After finding some other code and changing it a bit, I do this:

<Window x:Class="WpfApplication2.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300" >

<Window.InputBindings>
<KeyBinding Command="New" Modifiers="ctrl" Key="N" />
</Window.InputBindings>
...
<Menu>
<MenuItem Header="_File" >
<MenuItem Header="_New..." Command="New"/>
<Separator />
....

And in the C# file that belongs to it:

public partial class Window1 : Window
{
public Window1()
{
InitializeComponent();

CommandBinding New_CmdBinding = new CommandBinding(
ApplicationCommands.New,
New_CmdExecute,
New_CmdCanExecute);

this.CommandBindings.Add(New_CmdBinding);
}

void New_CmdExecute(object target, ExecutedRoutedEventArgs e)
{
MessageBox.Show("The 'New...' command has been invoked.");
}

void New_CmdCanExecute(object sender, CanExecuteRoutedEventArgs e)
{
e.CanExecute = true;
}

...

So both event, the mouse click on New and it's shortcut get routed right into New_CmdCanExecute, if the related NewCanExecute function returns true, otherwise the menu item is disabled.
Manoj Kumar...
Commented on 1.April 2009
Hey Ralf.

That is a very round about way of doing it. Try this:

<MenuItem Name="miNew"
Header="_New..."
Command="New"
InputGestureText="Ctrl+N"
Click="miNew_Click" />

Hope this helps.

MANOJ KUMAR SHARMA.
Filipe
Commented on 5.May 2009
Nice one, but i noticed that separators are giving too much space... and i dont know how to get it smaller spaces, same with menu items.
Tore Aurstad
Commented on 8.May 2009
Just started reading this website, it looks very clear informative. I guess many of the techniques here also applies to ContextMenu which can be used when showing a menu after right+click in WPF?
Prakash
Commented on 1.June 2009
Nice article. Perfect for a beginner like me
Patel Dishant
Commented on 1.July 2009
Hi am Patel dishant i want to know how to create hyperlnk in wpf
Ton
Commented on 17.September 2009
Very nice, but why even i am using exatly the same code in my Visual Studio project I still can't see this side vertical gray rectangle in my MenuItem!!! (e.g. File menu)
Any help plz??
Bayu
Commented on 28.December 2009
Hello,

This article is helpful. By the way, can you tell me how to change the MenuItems background color? especially without coding, if its possible.

Thank You very much
su
Commented on 5.January 2010
the menu items are permanently disabled for me - how do i enable them?
su
Commented on 5.January 2010
the menu items are permanently disabled for me - how do i enable them?
Chris
Commented on 22.February 2010
Hello Christian,

All in all I like your tutorials very much. They are really nice done.

But there is one point I disagree with your opinion. You wrote:

The Menu control derives from HeaderedItemsControl.

But the Menu control doesn't derive from HeaderedItemsControl.It derives directly from ItemsControl.
That makes some difference.

Greetings

Chris
kenntrix
Commented on 29.March 2010
nice article. i can use this with my project now.

visit http://www.kenntrix.info
Ram
Commented on 23.April 2010
We refered the controls which you've given is very useful to brush up knowledge.
Thanks
Ram
YJ
Commented on 26.April 2010
nice article. Thank you very much.
johnny
Commented on 29.April 2010
Nice one keep it up.....
hema
Commented on 14.May 2010
nice post with examples. thanks for your work and time
ramesh m
Commented on 17.May 2010
this is very useful for anyone who ll see this article.. thanks..
[xeesh]
Commented on 25.May 2010
Awsome tutorial.. Very useful..
thanks for sharin.. ^^
chet
Commented on 2.July 2010
It seem the InputGestureText don\'t work well...Is my fault?
Tim
Commented on 2.August 2010
I am creating my first WPF application and am trying to simulate the menu system you have on your site. how did you do yours? can I get a xaml sample please?
satyagrahi
Commented on 11.August 2010
Really nice one
Tareq
Commented on 21.August 2010
how to manipulate these visually using properties window
Richard
Commented on 21.August 2010
is it possible to create this type of menu on an animated object?
Bjarne
Commented on 26.August 2010
In Windows Forms it's possible to add a Menu, and in designer mode choose "Insert standard items" which creates all the File, Edit etc menu items automatically. Is this possible in WPF, or do I have to do this manually?
stateland
Commented on 2.September 2010
very usefull. thank you
Tony Welsh
Commented on 11.September 2010
Useful, but I am wondering why the design interface does not help you do this. I dragged a menu onto my main window but found no way to set the text of the menu items without getting into the XAML. Surely I should not have to do that? Didn't seem to be one of the properties, but I guess it is there somewhere.
Ptaylor
Commented on 24.September 2010
Where did you get the icons for copy/cut/paste? I'm looking for a save icon and haven't been able to find a good std. looking one.
mohsen saki...
Commented on 3.October 2010
tanks
mohsen saki...
Commented on 3.October 2010
tanks
ter
Commented on 7.October 2010
etertret
manjupoongud...
Commented on 22.October 2010
i dont know the dependency property
karthik
Commented on 22.October 2010
what is the language is this?
manjupoongud...
Commented on 22.October 2010
i dont know the dependency property
karthik
Commented on 22.October 2010
what is the language is this?
shimul
Commented on 24.October 2010
Is to good,Thanks..
Vikram
Commented on 11.November 2010
Nice Article...Thank u!
Victor
Commented on 6.December 2010
What do I need to do if I want the Help menu item on the right-hand side?
Victor
Commented on 6.December 2010
What do I need to do if I want the Help menu item on the right-hand side?
Victor
Commented on 6.December 2010
What do I need to do if I want the Help menu item on the right-hand side?
Victor
Commented on 7.December 2010
What do I need to do if I want the Help menu item on the right-hand side?
Victor
Commented on 13.December 2010
What do I need to do if I want the Help menu item on the right-hand side?
bar
Commented on 15.December 2010
Thanks!!
Mehul
Commented on 1.January 2011
Awesome tutorial !!!!!!!!
Very Helpful
Special Thanks !!!!!!!!!
esha
Commented on 21.January 2011
Nice.. Thanks!
Shweta Patel
Commented on 11.February 2011
Hey Christian,

There is one suggestion or i can say request to u.
Why dont u keep "Ask -- Reply" mechanism here instead of comments, or along with comments. So that it becomes easy to find answers for doubts.

This was just a suggestion only.
Other wise everything is perfect.
Jitendra
Commented on 16.February 2011
Really very nice Articles

thanks
Jitendra
Commented on 16.February 2011
Really very nice Articles

thanks
Kiransinh
Commented on 11.March 2011
Very nice article.
mr e
Commented on 13.March 2011
thanks a lot! really helpful :)
DavidW
Commented on 14.March 2011
@Tony, you can set up the menu item collection by going to the 'properties' of the control in design view, finding the 'Items' property which is a (Collection) and clicking on the [...] button.
Stephen
Commented on 24.March 2011
Perfectly Explained. Well done. Thank you
Manish
Commented on 18.April 2011
awesome Article man ....
vinay
Commented on 22.April 2011
Thanks because this is very good for learning to a beginner.
and there is define in both language XML and C#.

Again Thanks.
Alexander
Commented on 11.May 2011
I don't know what I've missed, but all my subitems of a meny at run time are disabled besides the main menu. I've assigned everywhere IsEnabled proprty to &quot;True&quot;. But no success. Besides this, the access to the code area from design mode to the subitems of menu is not possible, again access available just to the main menu items
Mr.Truong
Commented on 8.June 2011
thanks, can you more write a use wcf with x509?
Jesse B
Commented on 1.July 2011
IMPORTANT! The following line and similar ones gave me an error...
&lt;MenuItem Header=&quot;_Copy&quot; Command=&quot;Copy&quot;&gt;
In Visual Studio 2008, it is actually:
&lt;MenuItem Header=&quot;_Copy&quot; Click=&quot;Paste_Click&quot;&gt;
You then right click on Paste_Click and select &quot;Navigate to Event Handler&quot;.
Deepak
Commented on 9.July 2011
Thanks
Felipe
Commented on 11.July 2011
Greetings to all. I found very interesting this mini tutorial. I would suggest an idea. What do you think to create another tutorial on creating menus more stylized, like those that Word 2010 and Excel 2010 are currently using?
izel
Commented on 26.July 2011
Hola soy nueva en esto tengo una duda...Es posible llamar un MainWindow de un submenu como se isiera en un windownForm
Designer_my
Commented on 28.July 2011
Thamk you!
Daniex
Commented on 20.August 2011
That's helpful, thanks.
babu
Commented on 30.August 2011
nice written
Peter Farrer
Commented on 1.September 2011
Having spent 3 hours trying to attach an image to a MenuItem, discovered that there is a bug in VS 2008 and 2010, you simply need to close Visual Studio and reopen it.

The XAML error message you get is The file 'x' is not part of the project or its 'Build Action' property is not set to 'Resource'
Awesomer
Commented on 8.September 2011
Awesome! Mega cool.
saber
Commented on 27.September 2011
how to give the effective look for window in Wpf

Name
E-Mail (optional)
Comment