Using XAML Menus in WPF

XAML Menus in WPF

XAML Menu and MenuItem elements represent menus in WPF. A Menu is a collection of menu items with a command associated with each menu items. A menu item may have children menu items called submenus. This article discusses how to work with menus in XAML and WPF applications.

Creating a Menu as Design Time

The Menu tag 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.

<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 the horizontal and vertical alignments, the margin and the background color of a menu control.

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

Setting 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 the Properties menu item, you will see the Properties window as in Figure 1.


Figure 1. Properties Window

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

Once you set the 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.


Figure 2. Setting a Menu Control Properties

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

<Menu Height="22" Name="menu1" Width="200" Margin="10, 10, 5, 5" HorizontalAlignment="Left" VerticalAlignment="Top" Background="Blue" BorderThickness="2">
      <Menu.BitmapEffect>
          <DropShadowBitmapEffect />
      </Menu.BitmapEffect>
</Menu>

Now, the menu looks as in Figure 3.


Figure 3. Menu with blue background and drop shadow effect

Adding Menu Items and Sub Menus to a Menu

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

The Header attribute is the name of the MenuItem.

<MenuItem Header="Menu Item Name " />

A MenuItem can have other MenuItem tags within it as child/sub menus for several levels. The following code adds three children menu items to the first menu item.

<MenuItem Header="_File">
       <MenuItem Header="_Open" IsCheckable="true"/>
       <MenuItem Header="_Close" IsCheckable="true"/>
       <MenuItem Header="_Save" IsCheckable="true"/>
</MenuItem>

The output looks as in Figure 4.


Figure 4. A menu with menu items

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.

<Separator/>
<MenuItem Header="Sub Items">
    <MenuItem Header="Child1 SubItem" IsCheckable="true"/>
    <MenuItem Header="Child2 SubItem" IsCheckable="true">
        <MenuItem Header="GrandChild2 SubItem" IsCheckable="true"/>
     </MenuItem>
</MenuItem>

Now, our new output looks as in Figure 5.


Figure 5. A menu with menu items

Adding Tooltips to Menus

The MenuItem.ToolTip tag adds a tooltip to a menu item. The following code adds a tooltip to the Open menu item.

<MenuItem Header="_Open" IsCheckable="true">
    <MenuItem.ToolTip>
        <ToolTip>
             Open a file.
        </ToolTip>
    </MenuItem.ToolTip>
</MenuItem>

The output with the tooltip looks as in Figure 6.


Figure 6. A menu with a tooltip

Adding a CheckBox to a Menu Item

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

<MenuItem IsCheckable="true">

Adding a Keyboard Shortcut to a Menu Item

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

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

Adding an Event Trigger to a MenuItem

The Click event adds the menu item click event handler. The following code adds a click event handler for a menu item.

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

private void MenuItem_Click(object sender, RoutedEventArgs e)
{
    MessageBox.Show("Menu item clicked");
}

Creating a Menu Control at Run-time

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

Menu mainMenu = new Menu();
mainMenu.Background = Brushes.LightGreen;
mainMenu.Height = 300;
mainMenu.Width = 200;

MenuItem item1 = new MenuItem();
item1.Width = 50;
item1.Header = "First";
mainMenu.Items.Add(item1);

MenuItem item2 = new MenuItem();
item2.Width = 50;
item2.Header = "Two";
item1.Items.Add(item2);

MenuItem item3 = new MenuItem();
item3.Width = 50;
item3.Header = "Third";
item1.Items.Add(item3);

Summary

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