Post
Ask Question

WPF Menus A Complete Tutorial

In WPF, the Menu and the MenuItem classes represent a menu and a menu item respectively. A Menu is a collection of menu items with a command associated with each menu item. A menu item may have children menu items called submenus. This article discusses how to work with menus in WPF applications using XAML and C#.

WPF Menu Control  

Creating a WPF Menu at Design Time

The Menu element in XAML creates a menu control.

The Name property defines the name of the menu and Height and Width represents the height and width of a menu control.

  1. <Menu Name="menu1" Height="22" Width="200" />  

To position a menu control in a Window, the Margin, HorizontalAlignment and VerticalAlignment properties may be used. The following code sets horizontal, vertical alignments, margin, and background color of a menu control.

  1. <Menu Height="22" Name="menu1" Width="200" Margin="10, 10, 5, 5" HorizontalAlignment="Left" VerticalAlignment="Top" Background="Chocolate">  
  2. </Menu>  

Setting WPF Menu Control Properties

There are three ways to set  menu control properties. You may use the Properties windows, set properties in XAML manually, or set properties at run-time using WPF code.

If you right click on the menu control and select Properties menu item, you will see the Properties window same as Figure 1.

Properties Window 
Figure 1. Properties Window

As you can see from Figure 1, you can set all properties of a Menu control through this Window such as border thickness, opacity, bitmap effects, background and foreground colors, alignments, width and height, layouts, and fonts.

Once you set properties in the Properties window, the respective XAML code is written in the XAML file by the designer. For example, I set BorderThickness to 2, BitmapEffect to DropShadowEffect, and Background to Blue as shown in Figure 2.

Setting a Menu Control Properties 
Figure 2. Setting a Menu Control Properties

If you look at the XAML file now, you will see Menu code like below where you can see BorderThickness is set to 2, Background is set to Blue, and Menu.BitmapEffect element is added within the Menu element.

  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>  

Now, the menu looks like Figure 3.

Menu with blue background and drop shadow effect 
Figure 3. Menu with blue background and drop shadow effect

Adding WPF Menu Items

Now let's add menu items and sub menus to the menu control. The MenuItem element adds a menu item to the menu control. The following code shows the initial syntax of the MenuItem element. The Header attribute is the name of the MenuItem.

  1. <MenuItem Header="Menu Item Name " />  

A MenuItem can have other MenuItem elements within it as child/sub menus and can go up to several levels. The following code adds three children menu items to 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 like Figure 4.

A menu with menu items 
Figure 4. A menu with menu items

A separate is used to separate categories of menu items. We can add a separator to a menu control by using <Separator /> element.

We can also add sub menus and sub menu items using the MenuItem element within parent a MenuItem element. 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 Figure 5.

A menu with menu items
Figure 5. A menu with menu items

Adding Tooltips to a WPF Menu

The MenuItem.ToolTip element 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> Open a file. </ToolTip>  
  4.    </MenuItem.ToolTip>  
  5. </MenuItem>  

The output with the tooltip looks like Figure 6.

A menu with a tooltip 
Figure 6.A menu with a tooltip

Adding a CheckBox to a Menu Item

By setting IsCheckable property of a MenuItem to true makes a menu item a CheckBox in front of the header text.

  1. <MenuItem IsCheckable="true">  

CheckBox to a Menu Item
Figure 7

Adding a Keyboard Shortcut to a Menu Item

InputGestureText property is used to add keyboard shortcut to the menu item. The following code adds CTRL+O to a menu item.

  1. <MenuItem IsCheckable="true" Header="_Open" InputGestureText="Ctrl+O">  

You can also add ALT support to a menu item by adding underscore (_) before a character and ALT+character will work. For example, in the previous line of code, _Open menu item can be executed using ALT+O.

Adding an Event Trigger to a MenuItem

The Click event is used to add 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 like following in the code behind. I added a message box when the menu item is clicked.

  1. privatevoid MenuItem_Click(object sender, RoutedEventArgs e)   
  2. {  
  3.     MessageBox.Show("Menu item clicked");  
  4. }  

Creating a WPF Menu Control at Run-time

The following code creates a menu and adds menu items dynamically.

  1. Menu mainMenu = newMenu();  
  2. mainMenu.Background = Brushes.LightGreen;  
  3. mainMenu.Height = 300;  
  4. mainMenu.Width = 200;  
  5. MenuItem item1 = newMenuItem();  
  6. item1.Width = 50;  
  7. item1.Header = "First";  
  8. mainMenu.Items.Add(item1);  
  9. MenuItem item2 = newMenuItem();  
  10. item2.Width = 50;  
  11. item2.Header = "Two";  
  12. item1.Items.Add(item2);  
  13. MenuItem item3 = newMenuItem();  
  14. item3.Width = 50;  
  15. item3.Header = "Third";  
  16. item1.Items.Add(item3);  

Listing 1

Added on 9/27/2011

Change WPF Menu Brackground

How about creating a nice gradient background of menu as in Figure 8.

make a Gradient Brackground
Figure 8

All we need is to set the Background of the Menu item to LinearGradientBrush. 

  1. <Menu.Background>  
  2.     <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">  
  3.         <GradientStop Color="#FF3A60AD" Offset="0.528" />  
  4.         <GradientStop Color="#FF6A85D8" Offset="0.01" />  
  5.         <GradientStop Color="#FF3464C4" Offset="1" />  
  6.         <GradientStop Color="#FF202E7E" Offset="1" />  
  7.     </LinearGradientBrush>  
  8. </Menu.Background>  

How to Add multiple menu items horizontally to a WPF Menu

Let's say you need to add menu items horizontally, not vertically. All you need to do is, create your Menu width so all items will fit. And you can set layout of the Grid.

Add multiple menus horizontally

See code Listing 2. 

  1. <Grid x:Name="LayoutRoot">  
  2.     <Grid.RowDefinitions>  
  3.         <RowDefinition Height="Auto" />  
  4.         <RowDefinition Height="*" />  
  5.     </Grid.RowDefinitions>  
  6.     <Menu Height="38" Name="menu1" Margin="10,10,344,0" VerticalAlignment="Top" BorderThickness="2" Foreground="White" FontSize="16" FontWeight="Bold">  
  7.         <Menu.Background>  
  8.             <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">  
  9.                 <GradientStop Color="#FF3A60AD" Offset="0.528" />  
  10.                 <GradientStop Color="#FF6A85D8" Offset="0.01" />  
  11.                 <GradientStop Color="#FF3464C4" Offset="1" />  
  12.                 <GradientStop Color="#FF202E7E" Offset="1" />  
  13.             </LinearGradientBrush>  
  14.         </Menu.Background>  
  15.         <Menu.BitmapEffect>  
  16.             <DropShadowBitmapEffect />  
  17.         </Menu.BitmapEffect>  
  18.         <MenuItem Header="Tools" IsCheckable="true">  
  19.         <MenuItem.Icon>  
  20.             <Image Source="Tools.png" Width="20" Height="20" />  
  21.         </MenuItem.Icon>  
  22.         </MenuItem>  
  23.         <MenuItem Header="Settings" IsCheckable="true" Foreground="Orange" FontSize="16">  
  24.         <MenuItem.Icon>  
  25.             <Image Source="Settings.png" Width="20" Height="20" />  
  26.         </MenuItem.Icon>  
  27.         </MenuItem>  
  28.         <MenuItem Header="Security" IsCheckable="true" Foreground="White" FontSize="16">  
  29.         <MenuItem.Icon>  
  30.             <Image Source="Security.png" Width="20" Height="20" />  
  31.         </MenuItem.Icon>  
  32.         </MenuItem>  
  33.         <MenuItem Header="Database" IsCheckable="true" Foreground="LightGreen" FontSize="16">  
  34.         <MenuItem.Icon>  
  35.             <Image Source="Database.png" Width="20" Height="20" />  
  36.         </MenuItem.Icon>  
  37.         <MenuItem.Background>  
  38.             <ImageBrush ImageSource="Database.png" Stretch="Fill" />  
  39.         </MenuItem.Background>  
  40.         </MenuItem>  
  41.     </Menu>  
  42. </Grid>  
Listing 2

Set WPF Menu Item Background to an Image

One of the readers how to set the MenuItem background to an Image. 

We can do this by setting the Background property of the MenuItem to an ImageBrush. The ImageBrush takes ImageSource as the full path of an image and we can also set the Stretch property to Fill. 

  1. <MenuItem Header="Database" IsCheckable="true" Foreground="LightGreen" FontSize="16">  
  2. <MenuItem.Icon>  
  3.     <Image Source="Database.png" Width="20" Height="20" />  
  4. </MenuItem.Icon>  
  5. <MenuItem.Background>  
  6.     <ImageBrush ImageSource="Database.png" Stretch="Fill" />  
  7. </MenuItem.Background>  
  8. </MenuItem>  

How to add an Image to a WPF Menu Item.

This code adds an icon image in front of the menu item header text.

  1. <MenuItem Header="Child1 SubItem" IsCheckable="true">  
  2.    <MenuItem.Icon>  
  3.        <Image Source="Tree.jpg" Width="20" Height="20" />  
  4.    </MenuItem.Icon>  
  5. </MenuItem>  

The output looks like this,

Add an Image to a Menu Item

Summary

In this article, I discussed how we can use Menu and MenuItem controls to create menus in a WPF application.We also saw how we can set menu properties, add menu items at design-time as well as at run-time and add menu item event handlers.


Similar Articles
Mindcracker
Founded in 2003, Mindcracker is the authority in custom software development and innovation. We put best practices into action. We deliver solutions based on consumer and industry analysis.