Edit this page

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:

XAML

    <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

      XAML

      <Style x:Key="LeagueItemContainerStyle" TargetType="telerik:RadTreeViewItem{x:Type telerik:RadTreeViewItem}">
          <Setter Property="Foreground" Value="Red"/>
          <Setter Property="IsExpanded" Value="True"/>
      </Style>
      
    • DivisionItemContainerStyle

      XAML

      <Style x:Key="DivisionItemContainerStyle" TargetType="telerik:RadTreeViewItem{x:Type telerik:RadTreeViewItem}">
          <Setter Property="Foreground" Value="Green"/>
          <Setter Property="IsExpanded" Value="True"/>
      </Style>
      
    • TeamItemContainerStyle

      XAML

      <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.

    C#

    public class LeagueItemContainerStyleSelector : StyleSelector
    {
    }
    

    VB.NET

    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.

    C#

    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;
            }
        }
    }
    

    VB.NET

    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.

    XAML

    <example:LeagueItemContainerStyleSelector x:Key="myContainerStyleSelector"
        LeagueStyle="{StaticResource LeagueItemContainerStyle}"
        DivisionStyle="{StaticResource DivisionItemContainerStyle}"
        TeamStyle="{StaticResource TeamItemContainerStyle}"/>
    

    XAML

    <telerik:RadTreeView x:Name="radTreeView"
        ItemsSource="{Binding Source={StaticResource DataSource}, Path=LeaguesDataSource}"
        ItemTemplate="{StaticResource League}"
        ItemContainerStyleSelector="{StaticResource myContainerStyleSelector}"/>
    

See Also