XAML Menu Code Example

The <Menu> and <MenuItem> XAML elements are used to create menus in XAML. Learn how to use menu and menu item in a WPF app.

A menu control is a group of menu items. Each menu item can be used for a certain action. The code samples in this article show how to use a menu control and menu items in a WPF app at design time using XAML.
  
The complete tutorial is here: Working with WPF Menu Control using XAML and C# .
 
The following code snippet in XAML creates a menu control at design time. 
  1. <Menu Height="22" Name="menu1" Width="200" Margin="10, 10, 5, 5" HorizontalAlignment="Left" VerticalAlignment="Top" Background="Chocolate">  
  2. </Menu>  
The following code snippet sets a menu property. 
  1. <Menu Height="22" Name="menu1" Width="200" Margin="10, 10, 5, 5" HorizontalAlignment="Left" VerticalAlignment="Top" Background="Blue" BorderThickness="2">  
  2.       <Menu.BitmapEffect>  
  3.           <DropShadowBitmapEffect />  
  4.       </Menu.BitmapEffect>  
  5. </Menu>  
The following XAML adds three child menu items to the first menu item.
  1. <MenuItem Header="_File">             
  2.        <MenuItem Header="_Open" IsCheckable="true"/>  
  3.        <MenuItem Header="_Close" IsCheckable="true"/>  
  4.        <MenuItem Header="_Save" IsCheckable="true"/>  
  5. </MenuItem>    
The output looks following.
 
A separator is used to separate categories of menu items. We can add a separator to a menu control using the <Separator /> tag.

We can also add sub menus and sub menu items using the MenuItem tag within the parent, a MenuItem tag. The following code adds a separator and sub menus and sub menu items to the menu.
  1. <Separator/>  
  2. <MenuItem Header="Sub Items">  
  3.     <MenuItem Header="Child1 SubItem" IsCheckable="true"/>  
  4.     <MenuItem Header="Child2 SubItem" IsCheckable="true">  
  5.         <MenuItem Header="GrandChild2 SubItem" IsCheckable="true"/>  
  6.      </MenuItem>  
  7. </MenuItem>  
Now, our new output looks like the following.
 
The MenuItem.ToolTip tag adds a tooltip to a menu item. The following code adds a tooltip to the Open menu item.
  1. <MenuItem Header="_Open" IsCheckable="true">  
  2.     <MenuItem.ToolTip>  
  3.         <ToolTip>  
  4.              Open a file.   
  5.         </ToolTip>  
  6.     </MenuItem.ToolTip>  
  7. </MenuItem>  
The output with the tooltip looks like the following. 



The InputGestureText property is used to add keyboard shortcuts to the menu item. The following code adds CTRL+O to a menu item.
  1. <MenuItem IsCheckable="true" Header="_Open" InputGestureText="Ctrl+O">  
The Click event adds the menu item click event handler. The following code adds a click event handler for a menu item.
  1. <MenuItem IsCheckable="true" Header="_Open" Click="MenuItem_Click">  
The event handler is defined as  in the following in the code behind. I added a message box when the menu item is clicked.
  1. private void MenuItem_Click(object sender, RoutedEventArgs e)  
  2. {  
  3.     MessageBox.Show("Menu item clicked");  
  4. }   
The complete tutorial is here: Working with WPF Menu Control using XAML and C#