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> 
 
        <telerik:HierarchicalDataTemplate x:Key="Division" ItemTemplate="{StaticResource Team}" 
            ItemsSource="{Binding Teams}"> 
            <TextBlock Text="{Binding Name}" /> 
        </telerik:HierarchicalDataTemplate> 
 
        <telerik:HierarchicalDataTemplate x:Key="League" ItemTemplate="{StaticResource Division}" 
            ItemsSource="{Binding Divisions}"> 
            <TextBlock Text="{Binding Name}" /> 
        </telerik: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. Silverlight RadTreeView Sample Declaration

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 (user control).

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

Silverlight RadTreeView Item Container Style Selector

See Also

In this article