WPF Menu


Built-in to WPF are the two familiar menu controls: Menu and ContextMenu. Menus are just another set of items controls designed for the hierarchical display of items in a series of cascading popups. When I think of a hierarchical display, I often think of the TreeView.

Menu stacks its items horizontally with a gray bar as a background color, by default. menu inherits from ItemsControl base class. Menu has an IsMainMenu property that, by default, is set to true so that when a user presses the Alt or F10 key the menu gets the focus, as the user will expect.

What can we as programmers put in the Menu’s items? Anything, but it is expected that you will use MenuItem and Separator objects.

Here below is the XAML code.

<Window x:Class="MenuSimple.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:MenuSimple"
        mc:Ignorable="d"
        WindowStartupLocation="CenterScreen"
        Title="MenuSimple" Height="250" Width="300">
    <Grid>
        <Menu>
            <MenuItem Header="_File">
                <MenuItem Header="_New..." Name="New" Click="New_Click"/>
                <MenuItem Header="_Open..."/>
                <Separator/>
                <MenuItem Header="Sen_d To">
                    <MenuItem Header="Mail Recipient"/>
                    <MenuItem Header="My Documents"/>
                </MenuItem>
            </MenuItem>
            <MenuItem Header="_Edit">
            </MenuItem>
            <MenuItem Header="_Window">
            </MenuItem>
            <MenuItem Header="_Help">
            </MenuItem>
        </Menu>
    </Grid>
</Window>

MenuItem

Menu is simple, but MenuItem has a properties for customizing its behaviour. Icon enables you to add an arbitrary object to be placed alongside the header. IsCheckable enables you to make a MenuItem act like a CheckBox control. InputGestureText enables you to label an item with an associated gesture.

Events

MenuItem defines five events: Checked, Unchecked, SubmenuOpened, SubmenuClosed and Click. You can use Click to attach behavior to a MenuItem, or you can alternatively assign a command to MenuItem’s Command property.

Vertical Menu

Menu is an items control. You can use the ItemsPanel trick to make a vertical menu. As an aside, ListBox can take advantage of this trick also. We can replace the default panel with a StackPanel, which has a default orientation of vertical. Below is the XAML code for two menus: one horizontal and one vertical.

<Window x:Class="MenuSimple.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:MenuSimple"
        mc:Ignorable="d"
        WindowStartupLocation="CenterScreen"
        Title="MenuSimple" Height="250" Width="300">
    <StackPanel>
        <Menu>
            <MenuItem Header="_File">
                <MenuItem Header="_New..." Name="New" Click="New_Click"/>
                <MenuItem Header="_Open..."/>
                <Separator/>
                <MenuItem Header="Sen_d To">
                    <MenuItem Header="Mail Recipient"/>
                    <MenuItem Header="My Documents"/>
                </MenuItem>
            </MenuItem>
            <MenuItem Header="_Edit">
            </MenuItem>
            <MenuItem Header="_Window">
            </MenuItem>
            <MenuItem Header="_Help">
            </MenuItem>
        </Menu>
        <!-- **************************************************  -->
        <Menu>
            <Menu.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel/>
                </ItemsPanelTemplate>
            </Menu.ItemsPanel>
            <MenuItem Header="_File">
                <MenuItem Header="_New..." Name="New2" Click="New2_Click"/>
                <MenuItem Header="_Open..."/>
                <Separator/>
                <MenuItem Header="Sen_d To">
                    <MenuItem Header="Mail Recipient"/>
                    <MenuItem Header="My Documents"/>
                </MenuItem>
            </MenuItem>
            <MenuItem Header="_Edit">
            </MenuItem>
            <MenuItem Header="_Window">
            </MenuItem>
            <MenuItem Header="_Help">
            </MenuItem>
        </Menu>
    </StackPanel>
</Window>