ItemContainerStyleSelector
The Telerik RadTreeView supports ItemContainerStyle. The ItemContainerStyle property gives you the ability to change the treeview items' header. The container created by the RadTreeView for each item in the collection is of type RadTreeViewItem.
If you have different items and/or you prefer to display items with different styles, then you should use the ItemContainerStyleSelector property. This tutorial will walk you through the common task of creating and applying ItemContainerStyleSelector.
For the purpose of this tutorial will be used the following treeview declaration:
<UserControl.Resources>
<sampleData:RadTreeViewSampleData x:Key="DataSource"/>
<DataTemplate x:Key="Team">
<TextBlock Text="{Binding Name}" />
</DataTemplate>
<HierarchicalDataTemplate x:Key="Division" ItemTemplate="{StaticResource Team}"
ItemsSource="{Binding Teams}">
<TextBlock Text="{Binding Name}" />
</HierarchicalDataTemplate>
<HierarchicalDataTemplate x:Key="League" ItemTemplate="{StaticResource Division}"
ItemsSource="{Binding Divisions}">
<TextBlock Text="{Binding Name}" />
</HierarchicalDataTemplate>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<telerik:RadTreeView x:Name="radTreeView"
ItemsSource="{Binding Source={StaticResource DataSource}, Path=LeaguesDataSource}"
ItemTemplate="{StaticResource League}"/>
</Grid>
The data source class RadTreeViewSampleData assigned to the RadTreeView is covered in greater details in the chapter Binding to Object.
ItemContainerStyleSelector
The most common use of the "selectors" is to display different kind of data (different kind of items).
If you want to read more about HierarchicalDataTemplate and DataBinding, see the main topics about HierarchicalDataTemplate and Binding to Object.
-
Create three styles in the resources of your application.
-
LeagueItemContainerStyle
<Style x:Key="LeagueItemContainerStyle" TargetType="telerik:RadTreeViewItem{x:Type telerik:RadTreeViewItem}"> <Setter Property="Foreground" Value="Red"/> <Setter Property="IsExpanded" Value="True"/> </Style> -
DivisionItemContainerStyle
<Style x:Key="DivisionItemContainerStyle" TargetType="telerik:RadTreeViewItem{x:Type telerik:RadTreeViewItem}"> <Setter Property="Foreground" Value="Green"/> <Setter Property="IsExpanded" Value="True"/> </Style> -
TeamItemContainerStyle
<Style x:Key="TeamItemContainerStyle" TargetType="telerik:RadTreeViewItem{x:Type telerik:RadTreeViewItem}"> <Setter Property="Foreground" Value="Purple"/> <Setter Property="FontSize" Value="16"/> </Style>
The style defined for the ItemContainerStyle property should have as TargetType the RadTreeViewItem class.
These are the three Styles, which will be used as item container style. Accordingly, when the object type is League, then the LeagueItemContainerStyle will be applied; when the object type is Division, then the DivisionItemContainerStyle will be applied; when the object type is Team, then the TeamItemContainerStyle will be applied.
-
The next step is to create a selector where the logic about selecting the right style will be.
-
Create a new class, named LeagueItemContainerStyleSelector, which derives from StyleSelector.
If you create an ItemTemplateSelector or ItemEditTemplateSelector, you must derive from the DataTemplateSelector class. But if you want to create ItemContainerStyleSelector, you must derive from the StyleSelector class.
public class LeagueItemContainerStyleSelector : StyleSelector { }Public Class LeagueItemContainerStyleSelector Inherits StyleSelector End Class -
Override the SelectStyle method and implement your custom logic in it. The method accepts as arguments an object and a DependencyObject. The object argument is the actual object being bound and the DependecyObject is the container for it.
public class LeagueItemContainerStyleSelector : StyleSelector { private Style leagueStyle; private Style divisionStyle; private Style teamStyle; public override Style SelectStyle( object item, DependencyObject container ) { if ( item is League ) return this.leagueStyle; else if ( item is Division ) return this.divisionStyle; else if ( item is Team ) return this.teamStyle; return null; } public Style LeagueStyle { get { return this.leagueStyle; } set { this.leagueStyle = value; } } public Style DivisionStyle { get { return this.divisionStyle; } set { this.divisionStyle = value; } } public Style TeamStyle { get { return this.teamStyle; } set { this.teamStyle = value; } } }Public Class LeagueItemContainerStyleSelector Inherits StyleSelector Private m_leagueStyle As Style Private m_divisionStyle As Style Private m_teamStyle As Style Public Overloads Overrides Function SelectStyle(ByVal item As Object, ByVal container As DependencyObject) As Style If TypeOf item Is League Then Return Me.m_leagueStyle ElseIf TypeOf item Is Division Then Return Me.m_divisionStyle ElseIf TypeOf item Is Team Then Return Me.m_teamStyle End If Return Nothing End Function Public Property LeagueStyle() As Style Get Return Me.m_leagueStyle End Get Set(ByVal value As Style) Me.m_leagueStyle = value End Set End Property Public Property DivisionStyle() As Style Get Return Me.m_divisionStyle End Get Set(ByVal value As Style) Me.m_divisionStyle = value End Set End Property Public Property TeamStyle() As Style Get Return Me.m_teamStyle End Get Set(ByVal value As Style) Me.m_teamStyle = value End Set End Property End Class -
Define the created selector as a resource in your XAML and set it to the ItemContainerStyleSelector property.
<example:LeagueItemContainerStyleSelector x:Key="myContainerStyleSelector" LeagueStyle="{StaticResource LeagueItemContainerStyle}" DivisionStyle="{StaticResource DivisionItemContainerStyle}" TeamStyle="{StaticResource TeamItemContainerStyle}"/><telerik:RadTreeView x:Name="radTreeView" ItemsSource="{Binding Source={StaticResource DataSource}, Path=LeaguesDataSource}" ItemTemplate="{StaticResource League}" ItemContainerStyleSelector="{StaticResource myContainerStyleSelector}"/>
