Posted by: Zeeshan Amjad | February 17, 2011

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&quot;
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml&quot;
  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&quot;
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml&quot;
  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.

MenuItemControlTemplate

Advertisements

Responses

  1. Where the C# code? Tq


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: