Template and Style Selectors
The RadContextMenu and the RadMenuItem controls come with a set of selector properties. Typically, you use a template or style selector when you have more than one data template or style defined for the same type of objects.
The following example is based on the Populating with Data - Binding to Dynamic Data article.
Here is a list of the selectors provided by the RadContextMenu control:
- ItemTemplateSelector: Used to select the DataTemplate that is set as the HeaderTemplate property of the child RadMenuItems.
Example 1: Define the ItemTemplateSelector
public class MyTemplateSelector : DataTemplateSelector
{
public DataTemplate CutTemplate { get; set; }
public DataTemplate DefaultTemplate { get; set; }
public override DataTemplate SelectTemplate(object item, DependencyObject container)
{
if (item.ToString() == "Cut")
{
return this.CutTemplate;
}
return this.DefaultTemplate;
}
}
Example 2: Using the ItemTemplateSelector in XAML
<Grid.Resources>
<!-- ... -->
<local:MyTemplateSelector x:Key="MyTemplateSelector">
<local:MyTemplateSelector.CutTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Rectangle Width="10" Height="10" Fill="Red"/>
<TextBlock Text="{Binding}" />
</StackPanel>
</DataTemplate>
</local:MyTemplateSelector.CutTemplate>
<local:MyTemplateSelector.DefaultTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" />
</DataTemplate>
</local:MyTemplateSelector.DefaultTemplate>
</local:MyTemplateSelector>
</Grid.Resources>
<TextBox Width="200" VerticalAlignment="Top" ContextMenu="{x:Null}">
<telerik:RadContextMenu.ContextMenu>
<telerik:RadContextMenu x:Name="radContextMenu"
ItemContainerStyle="{StaticResource MenuItemStyle}"
ItemTemplateSelector="{StaticResource MyTemplateSelector}"/>
</telerik:RadContextMenu.ContextMenu>
</TextBox>
Figure 1: Result of Example 1 and Example 2
- ItemContainerStyleSelector: Used to select the Style that is applied to the child RadMenuItems.
Example 3: Define the ItemContainerStyleSelector
public class MyStyleSelector : StyleSelector
{
public Style CutStyle { get; set; }
public Style DefaultStyle { get; set; }
public override Style SelectStyle(object item, DependencyObject container)
{
var menuItem = item as MenuItem;
if (menuItem.Text == "Cut")
{
return this.CutStyle;
}
return this.DefaultStyle;
}
}
Example 4: Using the ItemContainerStyleSelector in XAML
<Grid.Resources>
<!-- ... -->
<local:MyStyleSelector x:Key="MyStyleSelector" DefaultStyle="{StaticResource MenuItemStyle}">
<local:MyStyleSelector.CutStyle>
<Style TargetType="telerik:RadMenuItem" BasedOn="{StaticResource MenuItemStyle}">
<Setter Property="Background" Value="Red"/>
</Style>
</local:MyStyleSelector.CutStyle>
</local:MyStyleSelector>
</Grid.Resources>
<TextBox Width="200" VerticalAlignment="Top" ContextMenu="{x:Null}">
<telerik:RadContextMenu.ContextMenu>
<telerik:RadContextMenu x:Name="radContextMenu"
ItemContainerStyleSelector="{StaticResource MyStyleSelector}"/>
</telerik:RadContextMenu.ContextMenu>
</TextBox>
Figure 2: Result of Example 3 and Example 4
And a list of the selectors provided by the RadMenuItem control:
HeaderTemplateSelector: Used to select the DataTemplate that is set to its HeaderTemplate property.
ItemContainerStyleSelector: Used to select the Style that is applied to the child RadMenuItems.
ItemTemplateSelector: Used to select the DataTemplate that is set as the HeaderTemplate property of the child RadMenuItems.
These properties of the RadMenuItem should be set through the ItemContainerStyle of the parent item. If you set the ItemContainerStyle property of the RadContextMenu only (valid for dynamic data scenarios), it will get inherited in the hierarchy, unless it is not explicitly set somewhere.
The HierarchicalDataTemplate used with the RadContextMenu also exposes ItemContainerStyleSelector and ItemTemplateSelector properties.