.NET 4.0+

WPF Menu Controls - Menu

by Richard Carr, published at http://www.blackwasp.co.uk/WPFMenu.aspx

The seventy-sixth part of the Windows Presentation Foundation Fundamentals tutorial begins to look at the WPF menu controls. These controls allow users to select from many commands using menus and toolbars. The first of these controls is the Menu.

Menu

The Menu control is used in programs that include a large number of commands, from which the user can make selections. Menus are commonly placed in a DockPanel that is docked at the top of a window, though this is not a requirement. Such menus contain several menu items that are displayed side by side. These items can be selected and expanded to show further menu items, some of which might represent commands, others may expand to show yet more menu items, organised in a hierarchy.

Each option in a Menu is defined using a MenuItem control. In this article we will concentrate on the Menu container. In the next we'll look at MenuItem in more detail. For this article we only need to understand that MenuItem includes a Header property that holds the visible content for the menu item.

To demonstrate the Menu control, create a new WPF application in Visual Studio. Name the solution, "MenuDemo". Once ready, replace the XAML in the main window with the following code:

<Window x:Class="MenuDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Not Notepad"
        Height="250"
        Width="350">
    <DockPanel>
        <Menu DockPanel.Dock="Top">
            <MenuItem Header="File" />
            <MenuItem Header="Edit" />
            <MenuItem Header="Format" />
            <MenuItem Header="View" />
            <MenuItem Header="Help" />
        </Menu>
        <TextBox Name="MyText" AcceptsReturn="True" AcceptsTab="True" TextWrapping="NoWrap" />
    </DockPanel>
</Window>

The above XAML defines a window containing a Menu and a TextBox, both within a DockPanel. Note that the menu items are defined within the tag for the Menu. The five menu options appear along the portion of the menu that is always visible.

Try running the program to see the results. The menu should appear as shown below. The control provides all of the expected behaviour of a Microsoft Windows menu. For example, moving the mouse over the menu causes animation and pressing the Alt key or F10 activates the menu for use with the arrow keys.

Nesting Menus

A key feature of menus is the ability to nest menu items to create a hierarchy of commands. This is easy to achieve. You simply add further MenuItems within the tags of their parent MenuItem. The top level items become the permanently visible options of the menu. Child MenuItems become drop-down menus and lower level items cause their parent options to expand further.

To demonstrate, replace the window's XAML with the code below. This creates a menu system similar to that of the Windows Notepad utility. Note that the menu system also includes Separators, which add gaps between items for additional grouping.

<Window x:Class="MenuDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Not Notepad"
        Height="250"
        Width="350">
    <DockPanel>
        <Menu DockPanel.Dock="Top">
            <MenuItem Header="File">
                <MenuItem Header="New"/>
                <MenuItem Header="Open..."/>
                <MenuItem Header="Save"/>
                <MenuItem Header="Save As"/>
                <Separator />
                <MenuItem Header="Page Setup..."/>
                <MenuItem Header="Print..."/>
                <Separator />
                <MenuItem Header="Exit"/>
            </MenuItem>
            <MenuItem Header="Edit">
                <MenuItem Header="Undo"/>
                <Separator />
                <MenuItem Header="Cut"/>
                <MenuItem Header="Copy"/>
                <MenuItem Header="Paste"/>
                <MenuItem Header="Delete"/>
                <Separator />
                <MenuItem Header="Find..."/>
                <MenuItem Header="Find Next"/>
                <MenuItem Header="Replace..."/>
                <MenuItem Header="Go To..."/>
                <Separator />
                <MenuItem Header="Select">
                    <MenuItem Header="All"/>
                    <MenuItem Header="Paragraph"/>
                </MenuItem>
                <MenuItem Header="Time/Date"/>
            </MenuItem>
            <MenuItem Header="Format">
                <MenuItem Header="Word Wrap"/>
                <MenuItem Header="Font..."/>
            </MenuItem>
            <MenuItem Header="View">
                <MenuItem Header="Status Bar"/>
            </MenuItem>
            <MenuItem Header="Help">
                <MenuItem Header="View Help"/>
                <Separator />
                <MenuItem Header="About Not Notepad"/>
            </MenuItem>
        </Menu>
        <TextBox Name="MyText" AcceptsReturn="True" AcceptsTab="True" TextWrapping="NoWrap" />
    </DockPanel>
</Window>

Run the program again to see the results. You should find that the menus can be expanded to show the additional options. If you click the Edit menu you'll see that the Select option shows a small triangle, indicating that this option includes child items. Clicking the Select menu shows its children.

Using the Click Event

So far we've constructed a menu but haven't made the menu items perform any actions. We'll look at this in the next article. However, for completeness, let's make one of the menu items functional, using it's Click event. Modify the XAML for the "Exit" menu item to register the event, as follows:

<MenuItem Header="Exit" Click="Exit_Click"/>

Let's make this menu option exit the program by closing the main window. Add the following code behind the window:

private void Exit_Click(object sender, RoutedEventArgs e)
{
    Close();
}

Try running the program and choosing the Exit menu option to see the results.