Share via

Menu Overview

  • Article

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. This topic introduces the Menu class and provides examples of how to use it in both Extensible Application Markup Language (XAML) and C#.

This topic contains the following sections.

  • Menu Control
  • Creating Menus
  • MenuItems with Keyboard Shortcuts
  • Menu Styling
  • Related Topics

The Menu control presents a list of items that specify commands or options for an application. Typically, clicking a MenuItem opens a submenu or causes an application to carry out a command. The following graphic shows the three different states of a menu control. The default state is when no device such as a mouse pointer is resting on the Menu. The focus state occurs when the mouse pointer is hovering over the Menu and pressed state occurs when a mouse button is clicked over the Menu.

Menus in different states

Menu states

Creating Menus

The following example shows how to create menus with submenus in XAML. One MenuItem has an attached ToolTip. The example also shows how to use the IsCheckable property to make MenuItem elements that can be checked.

<Menu Width="30" Margin="10, 10, 5, 5" HorizontalAlignment="Left" Background="White">
   <MenuItem Header="_File">
          <MenuItem Header="_New" IsCheckable="true"/>
          <MenuItem Header="_Open" IsCheckable="true"/>
          <MenuItem Header="_Close" IsCheckable="true"/>
      <Separator/>
          <MenuItem Header="Menu with Submenu">
                <MenuItem Header="_submenuitem1" IsCheckable="true"/>
                <MenuItem Header="_submenuitem2" IsCheckable="true">          
                    <MenuItem Header="_submenuitem2.1" IsCheckable="true"/>
                </MenuItem>
         </MenuItem>
         <Separator/>
         <MenuItem Header="_Menu item with ToolTip">
          <MenuItem.ToolTip>
            <ToolTip>
            ToolTip Information.
            </ToolTip>
          </MenuItem.ToolTip>
      </MenuItem>
   </MenuItem>
</Menu>

For the complete sample see Menu Sample.

The following example shows how to generate a Menu using C#.

menu = new Menu();
menu.Background = Brushes.LightBlue;
mi = new MenuItem();
mi.Width = 50;
mi.Header = "_File";
menu.Items.Add(mi);

mia = new MenuItem();
mia.Header = "_Cut";
mia.InputGestureText = "Ctrl+X";
mi.Items.Add(mia);

mib = new MenuItem();
mib.Command = System.Windows.Input.ApplicationCommands.Copy;
mib.Header = "_Copy";
mi.Items.Add(mib);

mic = new MenuItem();
mic.Command = System.Windows.Input.ApplicationCommands.Paste;
mic.Header = "_Paste";
mi.Items.Add(mic);
cv2.Children.Add(menu);

For the complete sample see Menu Sample.

Keyboard shortcuts are character combinations that can be entered with the keyboard to invoke Menu commands. For example, the shortcut for Copy is Ctrl+C. There are two properties to use with keyboard shortcuts and menus items — the InputGestureText or Command property.

InputGestureText

The following XAML and C# examples show how to use the InputGestureText property to assign keyboard shortcuts text to MenuItem controls. The following examples assign Ctrl+X for the Cut command. This only places the keyboard shortcut in the menu item. It does not associate the command with the MenuItem. The application must handle the user's input to carry out the action.

<MenuItem Header="_Cut" InputGestureText="Ctrl+X"/>
<MenuItem Header="_Find" InputGestureText="Ctrl+F"/>

mia = new MenuItem();
mia.Header = "_Cut";
mia.InputGestureText = "Ctrl+X";
mi.Items.Add(mia);

Command

The following XAML and C# examples show how to use the Command property to associate the Copy and Paste 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.

The CommandTarget property specifies the element where the command occurs. If CommandTarget is not set, the element that has keyboard focus will receive the command.

<MenuItem Command="ApplicationCommands.Open">
<MenuItem.Header>_Open</MenuItem.Header>
</MenuItem>
<MenuItem Command="ApplicationCommands.Close">
<MenuItem.Header>_Close</MenuItem.Header>
</MenuItem>

mib = new MenuItem();
mib.Command = System.Windows.Input.ApplicationCommands.Copy;
mib.Header = "_Copy";
mi.Items.Add(mib);

mic = new MenuItem();
mic.Command = System.Windows.Input.ApplicationCommands.Paste;
mic.Header = "_Paste";
mi.Items.Add(mic);

For the complete sample see Menu Sample.

With control styling, you can dramatically change the appearance and behavior of Menu controls without having to write a custom control. In addition to setting visual properties, you can also apply a Style to individual parts of a control, change the behavior of parts of the control through properties, or add additional parts or change the layout of a control. The following examples demonstrate several ways to add a Style to a Menu control.

The first code example defines a Style called Simple that shows how to use the current system settings in your style. The code assigns the color of the MenuHighlightBrush as the menu's background color and the MenuTextBrush as the menu's foreground color. Notice that you use resource keys to assign the brushes.

<Style x:Key="Simple" TargetType="{x:Type MenuItem}">
    <Setter Property = "Background" Value= "{DynamicResource {x:Static SystemColors.MenuHighlightBrushKey}}"/>
    <Setter Property = "Foreground" Value= "{DynamicResource {x:Static SystemColors.MenuTextBrushKey}}"/>
    <Setter Property = "Height" Value= "{DynamicResource {x:Static SystemParameters.CaptionHeightKey}}"/>
</Style>

The following sample uses Trigger elements that enable you to change the appearance of a MenuItem in response to events that occur on the Menu. When you move the mouse over the Menu, the foreground color and the font characteristics of the menu items change.

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

For the complete sample see Menu Styles Sample.

See Also

Tasks

How to: Create a Menu
How to: Create a Menu with Keyboard Shortcuts
How to: Style a Separator Used as a Menu Item

Other Resources

WPF Controls Gallery Sample