Edit

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.

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.

Creating Menus

The following example creates a Menu to manipulate text in a TextBox. The Menu contains MenuItem objects that use the Command, IsCheckable, and Header properties and the Checked, Unchecked, and Click events.

<Menu>
  <MenuItem Header="_Edit">
    <MenuItem Command="ApplicationCommands.Copy"/>
    <MenuItem Command="ApplicationCommands.Cut"/>
    <MenuItem Command="ApplicationCommands.Paste"/>
  </MenuItem>
  <MenuItem Header="_Font">
    <MenuItem Header="_Bold" IsCheckable="True"
              Checked="Bold_Checked"
              Unchecked="Bold_Unchecked"/>
    <MenuItem Header="_Italic" IsCheckable="True"
              Checked="Italic_Checked"
              Unchecked="Italic_Unchecked"/>
    <Separator/>
    <MenuItem Header="I_ncrease Font Size"
              Click="IncreaseFont_Click"/>
    <MenuItem Header="_Decrease Font Size"
              Click="DecreaseFont_Click"/>
  </MenuItem>
</Menu>
<TextBox Name="textBox1" TextWrapping="Wrap"
         Margin="2">
  The quick brown fox jumps over the lazy dog.
</TextBox>


private void Bold_Checked(object sender, RoutedEventArgs e)
{
    textBox1.FontWeight = FontWeights.Bold;
}

private void Bold_Unchecked(object sender, RoutedEventArgs e)
{
    textBox1.FontWeight = FontWeights.Normal;
}

private void Italic_Checked(object sender, RoutedEventArgs e)
{
    textBox1.FontStyle = FontStyles.Italic;
}

private void Italic_Unchecked(object sender, RoutedEventArgs e)
{
    textBox1.FontStyle = FontStyles.Normal;
}

private void IncreaseFont_Click(object sender, RoutedEventArgs e)
{
    if (textBox1.FontSize < 18)
    {
        textBox1.FontSize += 2;
    }
}

private void DecreaseFont_Click(object sender, RoutedEventArgs e)
{
    if (textBox1.FontSize > 10)
    {
        textBox1.FontSize -= 2;
    }
}


Private Sub Bold_Checked(ByVal sender As Object, ByVal e As RoutedEventArgs)
    textBox1.FontWeight = FontWeights.Bold
End Sub

Private Sub Bold_Unchecked(ByVal sender As Object, ByVal e As RoutedEventArgs)
    textBox1.FontWeight = FontWeights.Normal
End Sub

Private Sub Italic_Checked(ByVal sender As Object, ByVal e As RoutedEventArgs)
    textBox1.FontStyle = FontStyles.Italic
End Sub

Private Sub Italic_Unchecked(ByVal sender As Object, ByVal e As RoutedEventArgs)
    textBox1.FontStyle = FontStyles.Normal
End Sub

Private Sub IncreaseFont_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
    If textBox1.FontSize < 18 Then
        textBox1.FontSize += 2
    End If
End Sub

Private Sub DecreaseFont_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
    If textBox1.FontSize > 10 Then
        textBox1.FontSize -= 2
    End If
End Sub

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 menu items —InputGestureText or Command.

InputGestureText

The following example shows how to use the InputGestureText property to assign keyboard shortcut text to MenuItem controls. 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"/>

Command

The following example shows how to use the Command property to associate the Open and Save 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.

<MenuItem Header="_Open" Command="ApplicationCommands.Open"/>
<MenuItem Header="_Save" Command="ApplicationCommands.Save"/>

The MenuItem class also has a CommandTarget property, which specifies the element where the command occurs. If CommandTarget is not set, the element that has keyboard focus receives the command. For more information about commands, see Commanding Overview.

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>

See also