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 "True". 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...
<MenuItem Header="_Copy" Command="Copy">
In Visual Studio 2008, it is actually:
<MenuItem Header="_Copy" Click="Paste_Click">
You then right click on Paste_Click and select "Navigate to Event Handler".
|
|
|
|
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
|
|
|
|