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


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.




 Comments on this article

Show all comments
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

Name
E-Mail (optional)
Comment
About Christian Moser