Edit this page

ItemContainerStyle

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. The style defined for the ItemContainerStyle property should have as TargetType the RadTreeViewItem class.

The ItemContainerStyle clashes with the theming. You cannot have both an ItemContainerStyle and a non-application theme for the RadTreeView. The reason is that they both set a style. If you want to use a different theme and ItemContainerStyle you need to set the theme as an application theme (which sets a DefaultStyle rather than Style).

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.

Defining the style in the resources of the control or in the resources of the application, makes it reusable.

RadTreeViewItem HeaderTemplate

XAML

<Style x:Key="myItemContainerStyle" TargetType="telerik:RadTreeViewItem">
    <Setter Property="Foreground" Value="Red"/>
    <Setter Property="IsExpanded" Value="True"/>
</Style>

XAML

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

If you have different items and/or you prefer to display items with different styles, then you should use the ItemContainerStyleSelector property.

See Also