Home > DeveloperSection > Articles > Menu Control in WPF

Menu Control in WPF


WPF WPF 
Ratings:
0 Comment(s)
 11073  View(s)
Rate this:

Menu Control in WPF


In XAML <Menu /> and <MenuItem /> tag elements is used to create a menu control in WPF. Menus have been an integral part of any windows based application. In WPF there are two classes that are used for making menus. Menu and MenuItem class. A menu is collection of menu items with a command associated with each menu items. In this article I will show you that how to use Menu control in WPF.

Some major properties associated with menu control

Ø  Name—Name property defines a unique name to your WPF menu control.

Ø  Height—Height property is used to set height of your menu control in WPF.

Ø  Width—Width property is used to set Width of your menu control.

Ø  Margin—Margin property is used to define margin of your menu control.

Ø  Background—Background property defines background of your menu control.

Ø  HorizontalAlignment—HorizontalAlignment property is used to define horizontal alignment of your menu control in side container control.

Ø  VerticalAlignment—VerticalAlignment property is used to define vertical alignment of your menu control.

Ø  ToolTip—ToolTip defines tooltip for your menu control.

The following code snippet create a menu control in WPF

<Menu Width="500" Height="30" HorizontalAlignment="Left" VerticalAlignment="Top">

            <Menu.BitmapEffect>

                <DropShadowBitmapEffect />

            </Menu.BitmapEffect>

            <Menu.Background>

                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                    <GradientStop Color="Black" Offset="1" />

                    <GradientStop Color="#B774B19B" Offset="0.455" />

                </LinearGradientBrush>

            </Menu.Background>

</Menu>

Output of the following code snippet

Menu control in WPF

Adding menu items and submenu items to a menu control

After adding Menu control in window the next step is to create a menu item and sub menu item in menu control. We can use <MenuItem /> element in XAML to create a menu item and use Header property of menu Item control to provide a caption to menu item control. The following code snippet represents use of menu item control in WPF.

A XAML code for adding menu items in menu

<MenuItem Header="_File" >

                <MenuItem Header="New" />

                <MenuItem Header="Open" />

                <MenuItem Header="Close" />

            </MenuItem>

            <MenuItem Header='_Edit'>

                <MenuItem Header="Undo" />

                <MenuItem Header="Redo" />

                <MenuItem Header="Cut" />

                <MenuItem Header="Copy" />

                <MenuItem Header="Paste" />

                <MenuItem Header="Select All" />

</MenuItem>

Output of the following code is as follows

Menu control in WPF

We can add separator control to create a grouping in menu items. The following XAML element is used to create a separator <Separator />.

Following code snippet represents use of separator control

<MenuItem Header='_Edit'>

                <MenuItem Header="Undo" />

                <MenuItem Header="Redo" />

                <Separator />

                <MenuItem Header="Cut" />

                <MenuItem Header="Copy" />

                <MenuItem Header="Paste" />

                <Separator />

                <MenuItem Header="Select All" />

            </MenuItem>

</Menu>

Output of the following code snippet is as follows

Menu control in WPF

Adding tooltips in menu item

We can use tool tip to give some useful information about menu item control. In XAML <MenuItem.ToolTip /> container element is used to create a ToolTip for menu item.

Following demonstration shows how to use tooltip for menu item.

<MenuItem Header="_File" >

                <MenuItem Header="New" >

                    <MenuItem.ToolTip>

                        <ToolTip>Create a new file.</ToolTip>

                    </MenuItem.ToolTip>

                </MenuItem>

                <MenuItem Header="Open" >

                    <MenuItem.ToolTip>

                        <ToolTip>

                            Open an existing file.

                        </ToolTip>

                    </MenuItem.ToolTip>

                </MenuItem>

                <Separator />

                <MenuItem Header="Close" >

                    <MenuItem.ToolTip>

                        <ToolTip>

                            Close an existing file.

                        </ToolTip>

                    </MenuItem.ToolTip>

                </MenuItem>

 </MenuItem>

Output of the following code snippet is as follows

Menu control in WPF

Responding to a click event in menu item of a menu control

<MenuItem Header="_File" >

                <MenuItem Header="New" Click="MenuItem_Click" >

                    <MenuItem.ToolTip>

                        <ToolTip>Create a new file.</ToolTip>

                    </MenuItem.ToolTip>

                </MenuItem>

                <MenuItem Header="Open" Click="MenuItem_Click" >

                    <MenuItem.ToolTip>

                        <ToolTip>

                            Open an existing file.

                        </ToolTip>

                    </MenuItem.ToolTip>

                </MenuItem>

                <Separator />

                <MenuItem Header="Close" Click="MenuItem_Click" >

                    <MenuItem.ToolTip>

                        <ToolTip>

                            Close an existing file.

                        </ToolTip>

                    </MenuItem.ToolTip>

</MenuItem>

Output of the following code snippet is as follows

Menu control in WPF

 


Don't want to miss updates? Please click the below button!

Follow MindStick