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:

    <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}"/>
    

See Also