Description
Menu control in WPF is used to display a menu in WPF Applications. Here, adding the items to menu control is very simple. A Menu is a collection of menu items. A menu item may have children menu items called submenus.
This article explains, how to work with menu control using XAML and WPF Applications.
Example
Create a new window, go to XAML Source and write the following code:
[csharp]
<Window x:Class="WPFMenu.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPF | Menu" Height="350" Width="525">
<Grid>
<Menu>
<MenuItem Header="File">
<MenuItem Header="New" />
<MenuItem Header="Open" />
<MenuItem Header="Save" />
<MenuItem Header="Save as" />
<MenuItem Header="Save" />
<MenuItem Header="Add" />
<MenuItem Header="Close" />
</MenuItem>
</Menu>
</Grid>
</Window>[/csharp]
Now run the application.The output appears as:
Description
By using WPF Menu control, user interface can be shown with Icons or Symbols. It gives the look and feel for to application. The user can understand easily.If wanted to add icons, images must be added into an application or it should be present in system such that the path for image source property is set.
In this example, two menu items are taken.One is File and another is Project. File menu has three items and Project menu have six items.
Example
Create a new window, go to XAML Source and write the following code:
[csharp]
<Window x:Class="WPFMenu.Icons" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPF | Menu" Height="300" Width="300">
<Grid>
<Menu>
<MenuItem Header="_File">
<MenuItem Header="_Save" />
<MenuItem Header="_Save as" />
<MenuItem Header="_Close" />
</MenuItem>
<MenuItem Header="_Project">
<MenuItem Header="_Download">
<MenuItem.Icon>
<Image Source="E:\SPlessons images\WPF lesson\IconDownload.PNG" />
</MenuItem.Icon>
</MenuItem>
<MenuItem Header="_Users">
<MenuItem.Icon>
<Image Source="E:\SPlessons images\WPF lesson\user_group.png" />
</MenuItem.Icon>
</MenuItem>
<MenuItem Header="_Delete users">
<MenuItem.Icon>
<Image Source="E:\SPlessons images\WPF lesson\IconDelete.PNG" />
</MenuItem.Icon>
</MenuItem>
<MenuItem Header="Class">
<MenuItem.Icon>
<Image Source="E:\SPlessons images\WPF lesson\Classicon (1).PNG" />
</MenuItem.Icon>
</MenuItem>
<MenuItem Header="_ReLoad">
<MenuItem.Icon>
<Image Source="E:\SPlessons images\WPF lesson\IconReload.PNG" />
</MenuItem.Icon>
</MenuItem>
<MenuItem Header="_Show groups" IsCheckable="True" IsChecked="True" />
</MenuItem>
</Menu>
</Grid>
</Window>
[/csharp]
Now run the application and observe the output.
If clicked on file, the output will be:
If clicked on Project, the output will be:
Description
The context menu is nothing but when right clicked on mouse then pop-up appears which is known as Context Menu.
For example, in WPF Application take a right-click on mouse in WPF Main window.Then popup comes like below:
Example
One can use any control in WPF like Button or TextBox or Lable etc. Here Textbox control is being used to show the Context Menu.
Create a new window, go to XML source and write the following code:
[csharp]<Window x:Class="WPFMenu.WPFContextMenu" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPFContextMenu" Height="300" Width="400">
<Grid>
<TextBox Width="270" Height="24" Margin="20" Background="LightBlue">
<TextBox.ContextMenu>
<ContextMenu>
<MenuItem Header="SPlessons1"></MenuItem>
<MenuItem Header="SPlessons2"></MenuItem>
<MenuItem Header="SPlessons3"></MenuItem>
<MenuItem Header="SPlessons4"></MenuItem>
</ContextMenu>
</TextBox.ContextMenu>
</TextBox>
</Grid>
</Window>[/csharp]
Now run the application.The output comes as below.
If right-clicked on above textbox, a context menu appears like below:
Example
Using Properties and Events of Context Menu:
Create a new window, go to XAML Source and write the following code:
[csharp]
<Window x:Class="WPFMenu.WPFContextMenu" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPFContextMenu" Height="300" Width="400">
<Grid>
<TextBox Width="270" Height="24" Margin="20" Background="LightBlue">
<TextBox.ContextMenu>
<ContextMenu>
<MenuItem Header="SPlessons1" IsCheckable="True"></MenuItem>
<MenuItem Header="SPlessons2" IsEnabled="False"></MenuItem>
<MenuItem Header="SPlessons3" Click="MenuItem_Click"></MenuItem>
</ContextMenu>
</TextBox.ContextMenu>
</TextBox>
</Grid>
</Window>
[/csharp]
Now write runtime code for Click Event like below:
[csharp]
private void MenuItem_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("You clicked on SPlessons3");
}
[/csharp]
Now run the application.The output appears as below.
If right clicked on textbox control then the context menu displays like below:
More Info
To disable the context menu, then simply disable the control.
Syntax:
[csharp] <TextBox IsEnabled="False"></TextBox>[/csharp]
To show the context menu when the control was disabled, simply set a property called ContextMenuService.ShowOnDisabled and made it equal to True.
Syntax:
[csharp] <TextBox ContextMenuService.ShowOnDisabled="True"></TextBox>[/csharp]