Define Control template for Menu Item

We already saw one example of defining hierarchical data template here.  Now we are going to extend this example and define control template too. The simplest way to define control template is using style. It would be something like this in resource section.

Code Snippet

1. <Style x:Key="menuItem" TargetType="{x:Type MenuItem}">

 

Here important this is that we have to define the target type. If we don’t define the target type, then we can’t set the template property inside the style and we will get the following error.

Code Snippet

1. error MC4003: Cannot resolve the Style Property 'Template'. Verify that the owning type is the Style's TargetType, or use Class.Property syntax to specify the Property.

 

Here is simple style to define the control template for menu item.

Code Snippet

1. <Style x:Key="menuItem" TargetType="{x:Type MenuItem}">
2.     <Setter Property="Template">
3.         <Setter.Value>
4.             <ControlTemplate TargetType="{x:Type MenuItem}">
5.                 <Border Margin="3" Name="Border" Background="AliceBlue"
6.                         BorderThickness="1" CornerRadius="5" BorderBrush="Black">
7.                     <ContentPresenter Margin="3" Name="HeaderHost" ContentSource="Header"/>
8.                 </Border>
9.             </ControlTemplate>
10.         </Setter.Value>
11.     </Setter>
12. </Style>

 

Now we are going to use this style. We can use it inside the data template, which we define as a part of defining hierarchical data template. Here is a piece of code to use this style.

Code Snippet

1. <Menu.ItemTemplate>
2.     <HierarchicalDataTemplate ItemsSource="{Binding Path=Cities}">
3.         <TextBlock Margin="1" Text="{Binding Name}"/>
4.         <HierarchicalDataTemplate.ItemTemplate>
5.             <DataTemplate>
6.                 <MenuItem Style="{StaticResource menuItem}" Margin="1" Header="{Binding Name}"/>
7.             </DataTemplate>
8.         </HierarchicalDataTemplate.ItemTemplate>
9.     </HierarchicalDataTemplate>
10. </Menu.ItemTemplate>

 

Here is complete XAML code of this program.

Code Snippet

1. <Window x:Class="WpfMenu.MainWindow"
2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4.         Title="MainWindow" Height="350" Width="525">
5.     <Window.Resources>
6.         <Style x:Key="menuItem" TargetType="{x:Type MenuItem}">
7.             <Setter Property="Template">
8.                 <Setter.Value>
9.                     <ControlTemplate TargetType="{x:Type MenuItem}">
10.                         <Border Margin="3" Name="Border" Background="AliceBlue"
11.                                 BorderThickness="1" CornerRadius="5" BorderBrush="Black">
12.                             <ContentPresenter Margin="3" Name="HeaderHost" ContentSource="Header"/>
13.                         </Border>
14.                     </ControlTemplate>
15.                 </Setter.Value>
16.             </Setter>
17.         </Style>
18.     </Window.Resources>
19.     <DockPanel DataContext="{Binding}">
20.         <Menu DockPanel.Dock="Top" ItemsSource="{Binding}">
21.             <Menu.ItemTemplate>
22.                 <HierarchicalDataTemplate ItemsSource="{Binding Path=Cities}">
23.                     <TextBlock Margin="1" Text="{Binding Name}"/>
24.                     <HierarchicalDataTemplate.ItemTemplate>
25.                         <DataTemplate>
26.                             <MenuItem Style="{StaticResource menuItem}" Margin="1" Header="{Binding Name}"/>
27.                         </DataTemplate>
28.                     </HierarchicalDataTemplate.ItemTemplate>
29.                 </HierarchicalDataTemplate>
30.             </Menu.ItemTemplate>
31.         </Menu>
32.         <TextBlock/>
33.     </DockPanel>
34. </Window>

 

And here is complete C# code of the program.

Code Snippet

1. <Window x:Class="WpfMenu.MainWindow"
2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4.         Title="MainWindow" Height="300" Width="400">
5.     <Window.Resources>
6.         <Style x:Key="menuItem" TargetType="{x:Type MenuItem}">
7.             <Setter Property="Template">
8.                 <Setter.Value>
9.                     <ControlTemplate TargetType="{x:Type MenuItem}">
10.                         <Border Margin="3" Name="Border" Background="AliceBlue"
11.                                 BorderThickness="1" CornerRadius="5" BorderBrush="Black">
12.                             <ContentPresenter Margin="3" Name="HeaderHost" ContentSource="Header"/>
13.                         </Border>
14.                     </ControlTemplate>
15.                 </Setter.Value>
16.             </Setter>
17.         </Style>
18.     </Window.Resources>
19.     <DockPanel DataContext="{Binding}">
20.         <Menu DockPanel.Dock="Top" ItemsSource="{Binding}">
21.             <Menu.ItemTemplate>
22.                 <HierarchicalDataTemplate ItemsSource="{Binding Path=Cities}">
23.                     <TextBlock Margin="1" Text="{Binding Name}"/>
24.                     <HierarchicalDataTemplate.ItemTemplate>
25.                         <DataTemplate>
26.                             <MenuItem Style="{StaticResource menuItem}" Margin="1" Header="{Binding Name}"/>
27.                         </DataTemplate>
28.                     </HierarchicalDataTemplate.ItemTemplate>
29.                 </HierarchicalDataTemplate>
30.             </Menu.ItemTemplate>
31.         </Menu>
32.         <TextBlock/>
33.     </DockPanel>
34. </Window>

 

This is the output of the program.