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
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