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
HeaderedItemsControl
ItemsControl
IsMainMenu
<Menu IsMainMenu="True"> <MenuItem Header="_File" /> <MenuItem Header="_Edit" /> <MenuItem Header="_View" /> <MenuItem Header="_Window" /> <MenuItem Header="_Help" /> </Menu>
The MenuItem is a HeaderedItemsControl. The content of the Header property is the caption of the menu. The Itemsof 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.
MenuItem
Header
Items
Icon
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>
You can make a menu item checkable by setting the IsCheckable property to true. The check state can be queried by theIsChecked property. To get notified when the check state changes you can add a handler to the Checked andUnchecked property.
IsCheckable
IsChecked
Checked
Unchecked
<MenuItem Header="_Debug"> <MenuItem Header="Enable Debugging" IsCheckable="True" /> </MenuItem>
Separator is a simple control to group menu items. It's rendered as a horizontal line. It can also be used in ToolBar andStatusBar.
ToolBar
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>
You can register a callback to any menu item by adding a callback to the Click event.
Click
<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...'"); }
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>
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.
InputGestureText