WPF Menu Overview

Introduction

The WPF Menu enables you to organize elements associated with commands and event handlers in a hierarchical order. Here in this blog, we will see the code example to use WPF Menu, customize menu items, etc.

WPF Menu

Getting Started

The Menu class enables you to organize elements associated with commands and event handlers in a hierarchical order. Each Menu element contains a collection of MenuItem elements that specify commands or options for an application. Typically, clicking a MenuItem opens a submenu or causes an application to carry out a command.

 <Menu>  
      <MenuItem Header="Copy"/>  
      <MenuItem Header="Bold"/>  
      <MenuItem Header="Font Size"/>  
 </Menu>  

In the above code, the Menu contains MenuItem objects that use the Command, IsCheckable, and Header properties and the Checked, Unchecked, and Click events

Use Menu in WPF Window

The below XAML code example describes how to use the WPF Menu inside Window in WPF Project.

 <Window x:Class="WPFMenuDemo.MainWindow"   
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"   
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"   
     xmlns:local="clr-namespace:WPFDemo"   
     Title="MainWindow" Height="300" Width="300">   
   <Grid>   
           <Menu HorizontalAlignment="Stretch" Height="30" VerticalAlignment="Top">    
                <MenuItem Header="Copy"/>  
                <MenuItem Header="Bold"/>  
                <MenuItem Header="Font Size"/>  
           </Menu>    
   </Grid>   
 </Window>  

In the above code, the menu is placed inside the grid control the MainWindow, the menu will automatically appear at the top of MainWindow.

Submenu (WPF Menu)

A MenuItem can have submenus. The submenu of the MenuItem is made up of the objects within the ItemCollection of a MenuItem. It is common for a MenuItem to contain other MenuItem objects to create nested submenus. The below code describes how to use submenu in WPF.

 <Window x:Class="WPFMenuDemo.MainWindow"   
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"   
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"   
     xmlns:local="clr-namespace:WPFDemo"   
     Title="MainWindow" Height="300" Width="300">   
      <Grid>   
           <Menu HorizontalAlignment="Stretch" Height="30" VerticalAlignment="Top">   
                <MenuItem Header="Edit">  
                     <MenuItem Header="Copy"/>  
                     <MenuItem Header="Cut"/>  
                     <MenuItem Header="Paste"/>  
                </MenuItem>   
     </Menu>   
   </Grid>   
 </Window>  

Command (WPF Menu)

The above example shows how to use the Command property to associate the Open and Save commands with MenuItem controls. Not only does the command property associate a command with a MenuItem, but it also supplies the input gesture text to use as a shortcut.

 <Window x:Class="WPFMenuDemo.MainWindow"   
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"   
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"   
     xmlns:local="clr-namespace:WPFDemo"   
     Title="MainWindow" Height="300" Width="300" Loaded="Window_Loaded_1">   
   <Grid>   
     <Menu HorizontalAlignment="Stretch" Height="30" VerticalAlignment="Top">   
                <MenuItem Header="_Edit">  
                     <MenuItem Header="_Copy" Command="ApplicationCommands.Copy"/>  
                     <MenuItem Header="_Cut" Command="ApplicationCommands.Cut"/>  
                     <MenuItem Header="_Paste" Command="ApplicationCommands.Paste"/>  
                </MenuItem>  
     </Menu>   
   </Grid>   
 </Window>  

Keyboard Shortcuts (WPF Menu)

The InputGestureText is used to assign keyboard shortcut text to MenuItem controls, it only places the keyboard shortcut in the menu item. It does not associate the command with the MenuItem

 <Window x:Class="WPFMenuDemo.MainWindow"   
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"   
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"   
     xmlns:local="clr-namespace:WPFDemo"   
     Title="MainWindow" Height="300" Width="300" Loaded="Window_Loaded_1">   
   <Grid>       
     <Menu HorizontalAlignment="Stretch" Height="30" VerticalAlignment="Top">  
                <MenuItem Header="_File">  
                     <MenuItem Header="_Open" InputGestureText="Ctrl+O" Click="Open_Click"/>  
                     <MenuItem Header="_Save" InputGestureText="Ctrl+S" Click="Save_Click"/>  
                </MenuItem>                 
                <MenuItem Header="_Edit">  
                     <MenuItem Header="_Copy" InputGestureText="Ctrl+C" Command="ApplicationCommands.Copy"/>  
                     <MenuItem Header="_Cut" InputGestureText="Ctrl+X" Command="ApplicationCommands.Cut"/>  
                     <MenuItem Header="_Paste" InputGestureText="Ctrl+P" Command="ApplicationCommands.Paste"/>  
                </MenuItem>  
     </Menu>   
   </Grid>   
 </Window>  

The above example shows how to use the InputGestureText property to assign keyboard shortcut text to MenuItem controls. The application must handle the user's input to carry out the action.

Customizing (WPF Menu)

Like other WPF controls, the Menu and MenuItem can also customize. The below example places the MenuItem control in different directions (Left and Right).

 <Window x:Class="WPFMenuDemo.MainWindow"   
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"   
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"   
     xmlns:local="clr-namespace:WPFDemo"   
     Title="MainWindow" Height="300" Width="300">   
   <Grid>   
     <Menu HorizontalAlignment="Stretch" Height="30" VerticalAlignment="Top">   
       <Menu.ItemsPanel>   
         <ItemsPanelTemplate>   
           <DockPanel HorizontalAlignment="Stretch"></DockPanel>   
         </ItemsPanelTemplate>   
       </Menu.ItemsPanel>   
        <MenuItem Header="_Edit">  
                     <MenuItem Header="_Copy" InputGestureText="Ctrl+C" Command="ApplicationCommands.Copy"/>  
                     <MenuItem Header="_Cut" InputGestureText="Ctrl+X" Command="ApplicationCommands.Cut"/>  
                     <MenuItem Header="_Paste" InputGestureText="Ctrl+P" Command="ApplicationCommands.Paste"/>  
                </MenuItem>   
       <MenuItem Header="HELP" HorizontalAlignment="Right"></MenuItem>   
     </Menu>   
   </Grid>   
 </Window>  

To apply the same property settings to multiple MenuItem controls, use the Style property. You can modify the default ControlTemplate to give the control a unique appearance. The following examples demonstrate several ways to add a Style to a Menu control.

WPF Menu Style

 <Window x:Class="WPFMenuDemo.MainWindow"   
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"   
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"   
     xmlns:local="clr-namespace:WPFDemo"   
     Title="MainWindow" Height="300" Width="300">   
   <Grid>   
     <Menu HorizontalAlignment="Stretch" Height="30" VerticalAlignment="Top">  
                <Menu.Style>  
                     <Style x:Key="Triggers" TargetType="{x:Type MenuItem}">  
                      <Style.Triggers>  
                          <Trigger Property="MenuItem.IsMouseOver" Value="true">  
                           <Setter Property = "Foreground" Value="Red"/>  
                           <Setter Property = "FontSize" Value="16"/>  
                           <Setter Property = "FontStyle" Value="Italic"/>  
                          </Trigger>  
                      </Style.Triggers>  
                     </Style>  
                </Menu.Style>  
       <Menu.ItemsPanel>   
         <ItemsPanelTemplate>   
           <DockPanel HorizontalAlignment="Stretch"></DockPanel>   
         </ItemsPanelTemplate>   
       </Menu.ItemsPanel>   
        <MenuItem Header="_Edit">  
                     <MenuItem Header="_Copy" InputGestureText="Ctrl+C" Command="ApplicationCommands.Copy"/>  
                     <MenuItem Header="_Cut" InputGestureText="Ctrl+X" Command="ApplicationCommands.Cut"/>  
                     <MenuItem Header="_Paste" InputGestureText="Ctrl+P" Command="ApplicationCommands.Paste"/>  
                </MenuItem>   
       <MenuItem Header="HELP" HorizontalAlignment="Right"></MenuItem>   
     </Menu>   
   </Grid>   
 </Window>  

WPF Menu Style

Summary

Here in the above, we learn what is WPF Menu and saw the various code example for WPF Menu, WPF MenuItem, Submenu, Menu Command, Menu Keyboard Shortcuts, WPF Menu style, WPF MenuItem style, and customized Menu. I hope you have enjoyed it a lot.

Thanks