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.

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>

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>

5. Adding Separators

Separators are used to differentiate the MenuItems within a Menu

</MenuItem>

6. Shortcuts

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

</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

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>
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>
IsCheckable property

This property is used to get a Checkbox in front of the Header as in the following:
<MenuItem Header="Mexican" IsCheckable="True"/>
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;
}
}