Using Menus in WPF

1. Introduction

This article will help developers in using the menu options available in Visual Studio for WPF applications.

2. Creating a Menu

The Menu control is available in your toolbox under “All WPF Controls”.

Just drag and drop the same onto your window.

The following line of code will be added to your XAML.

<Menu Height="23"  Name="menu1" Height=”23” Width=”50”/>

One can also create the same in code behind

Menu mainMenu = new Menu();
mainMenu.Height = 23;
mainMenu.Width = 50;

3. Adding MenuItems

MenuItems are the items present inside the Menu.

The “Header” property is used to set the text visible in the Menu.

Use the following to add MenuItems:

<Menu Height="23"  Name="menu1" Height=”23” Width=”50”/>

    <MenuItem Header="Restaurants" ToolTip="WPF menu demo" />

</Menu>

One can also create the same in code behind as in the following:

Menu mainMenu = new Menu();
mainMenu.Height = 23;
mainMenu.Width = 50;

MenuItem item1 = new MenuItem();
item1.Header = "Restaurants";
mainMenu.Items.Add(item1);

4. Adding SubMenus

SubMenus are MenuItems within a MenuItem

Use the following to add subMenus:

<MenuItem Header="Restaurants" ToolTip="WPF menu demo" />

<MenuItem Header="Cuisine" />

<MenuItem Header="Location" />

</MenuItem>

 

 

5. Adding Separators

Separators are used to differentiate the MenuItems within a Menu

<MenuItem Header="Restaurants" ToolTip="WPF menu demo" />

<MenuItem Header="Cuisine" />

<Separator />

<MenuItem Header="Location" />

</MenuItem>

 

 

6. Shortcuts

In order to add Shortcuts to open your Menu using the Keyboard just prefix the MenuItem “Header” with a "_".

<MenuItem Header="_Restaurants" ToolTip="WPF menu demo" />

<MenuItem Header="_Cuisine" />

<Separator />

<MenuItem Header="_Location" />

</MenuItem>

Run your application and press the “Alt” key, you can observe that the first letter is underlined. This can be used as the shortcut key.

7. Customizing MenuItems

1. Adding Background
   
   I have added another MenuItem “Italian” to demonstrate the setting of the background.
    

   <MenuItem Header="_Restaurants" ToolTip="WPF menu demo" />

   <MenuItem Header="_Cuisine">

   <MenuItem Header="Italian" IsCheckable="True">

         <MenuItem.Background>

          <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">

                                   <GradientStop Color="#FFFFFF" Offset="0.328"/>

                                   <GradientStop Color="BlanchedAlmond" Offset="0.728"/>

                                   <GradientStop Color="Brown" Offset="1"/>

           </LinearGradientBrush>

          </MenuItem.Background>

   </MenuItem>

   </MenuItem>

    

   <Separator />

   <MenuItem Header="_Location" />

   </MenuItem>
    
   
   
   

2. Adding Image to MenuItem
   
   To add an image to the MenuItem, the user needs to set the Icon Property as in the following:
    

   <MenuItem Header="_Location">

         <MenuItem Header="Bangalore">

              <MenuItem>

                 <MenuItem.Icon>

                     <Image Source="Images/Kor.png" />

                 </MenuItem.Icon>

              </MenuItem>

         </MenuItem>

   </MenuItem>
   
   
    

3. IsCheckable property
   
   This property is used to get a Checkbox in front of the Header as in the following:

   <MenuItem Header="Mexican" IsCheckable="True"/>
   
   
    

4. Adding ToolTip to MenuItem
   
   To show a tooltip on the MenuItem, the user needs to set the ToolTip property as in the following:

   <MenuItem Header="_Restaurants" ToolTip="WPF menu demo">
   
   
   

8. Adding Command for the MenuItems

<MenuItem Header="Chinese" ToolTip="Cuisine" Click="MenuItem_Click"/>

9. Command Binding in MenuItem

The users can bind the MeuItem to the ICommand property. The Click event of the menuitem can be bound to the ICommand as in the following:

<MenuItem Header="Chinese" ToolTip="Cuisine" Click="OpenChineseCuisineCommand"/>
Private ICommand openChineseCuisineCommand
public ICommand OpenChineseCuisineCommand
{
    get
   {
       if (openChineseCuisineCommand == null)
      openChineseCuisineCommand = new DelegateCommand(ExecuteOpenChineseCuisine, CanExecuteOpenChineseCuisine);
      return openChineseCuisineCommand;
  }
}