Menu Control in WPF

In this article i will be exploring the different aspects of Menu Control in WPF. I assume that the audience are familier with WPF and Declarative programming using XAML. In brief WPF is the next generation of User Interface designing. XAML helps in making clear separation between Design and code behing logic for design. Explaining about these is out of scope of this article, i go ahead with the assumption that you know basics of XAML and WPF.

Menus has been an integral part of any Windows based application. In WPF there are two classes that are used for making Menu; Menu and MenuItem. A Menu is a collection of one or more MenuItem. Each MenuItem can have a Command associated with it. A MenuItem again may further have MenuItem associated with it to make submenus. In this article i will show how to work with menus.

Lets start by looking how to create a Menu (XAML Code).

< Menu Name="Menu1"  HorizontalAlignment="Left" VerticalAlignment="Top"/ >

This tag creates a Menu Control. Now lets look at some major properties of Menu Control.
Name --> Defines the name of the menu.
Height --> Defines the Height of the menu
Width --> Defines the width of the menu
Margin --> Defines the position of the menu
Background--> Defines backcolor of the menu
HorizontalAlignment --> Defines the horizontal alignment of the menu inside the parent control.
HorizontalContentAlignment --> Defines the horizontal alignment for the menu content.
VerticalAlignment --> Defines the vertical alignment of the menu inside the parent control.
VerticalContentAlignment --> Defines the content alignment for the menu content.
ToolTip --> defines the tooltip for the menu.

Now that we have seen the major properties its time to see them in action. A Menu tag with all its properties set may look like:

< Menu Height="20" Width="200" Name="Menu1" HorizontalAlignment="Left" HorizontalContentAlignment="Left" VerticalAlignment="Top" VerticalContentAlignment="Top" Background="BlanchedAlmond">

In this sample we have set properties of the menu in XAML, but this is not the only way of doing so. Properties of a menu can be set in three different ways:
In XAML manually as done above
Using Property Window
using codebeind in C# at runtime.

Now that our menu control is ready lets add some Menu items to it.

As said earlier MenuItem tag is used to add menu item to a menu.

< MenuItem Header="_File"/>

Here we create a Menu Item with name as File.

A menu item can in turn have other menu items within it as sub menus. Now lest add some more menu items to our File menu.

< MenuItem Header="_File">
                < MenuItem Header="_New"/>
                < MenuItem Header="_Open"/>
                < Separator/>
                < MenuItem Header="_Save"/>
                < MenuItem Header="Save _All"/>
< /MenuItem>

Here we have added 4 menu items and a separator to the File Menu

A separator is used to categorize similer menu items. It is added with < Separator/> tag.

We can also add sub menu items to sub menus.

The xaml will look like

< MenuItem Header="_File">
                < MenuItem Header="_New"/>
                < MenuItem Header="_Open"/>
                < Separator/>
                < MenuItem Header="_Save">
                    < MenuItem Header="Save _File"/>
                    < MenuItem Header="Save A_ll"/>
                    < MenuItem Header="Save _As"/>
                < /MenuItem>
< /MenuItem>

Now lets add a tool tip to our menu item.

< MenuItem Header="_New">
                    < MenuItem.ToolTip>
                        < ToolTip>
                            Create new File
                        < /ToolTip>
                    < /MenuItem.ToolTip>
< /MenuItem>

Now lets look at adding and event handler to menu item.

< MenuItem Header="_New" Click="MenuItem_Click"/>

The Click event is used to associate an event handler to the menu item.

And in the code behind

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