Choose Header Template by Custom Logic

The Selectors allow us to apply a different DataTemplate or Style on an item, based on some custom logic. They are used whenever you need to visualize the same data in different way, depending on one or more conditions.

For example you have a several tabs, which contain data about different animals or plants. You want to display the animals in tabs with special header template (with a yellow background) and the plants in tabs with a header template with a green background.

Let's first define the DataTemplates in the Application’s resources (App.xaml):

<Application.Resources>
    <DataTemplate x:Key="AnimalDataTemplate">
        <Border Background="Yellow">
            <StackPanel Orientation="Horizontal">
                <Image Source="{Binding ImageSource}" Width="16" Height="16"/>
                <TextBlock Text="{Binding Name}" VerticalAlignment="Center"/>
            </StackPanel>
        </Border>
    </DataTemplate>
    <DataTemplate x:Key="PlantDataTemplate">
        <Border Background="Green">
            <StackPanel Orientation="Horizontal">
                <Image Source="{Binding ImageSource}" Width="16" Height="16"/>
                <TextBlock Text="{Binding Name}" VerticalAlignment="Center"/>
            </StackPanel>
        </Border>
    </DataTemplate>
</Application.Resources>

This will allow you to access them easily from the HeaderSelector as shown below:

DataTemplate dataTemplate = (DataTemplate)Application.Current.Resources["DataTemplateKey"];

Dim dataTemplate As DataTemplate = DirectCast(Application.Current.Resources("DataTemplateKey"), DataTemplate)

Next, create a class file and name it HeaderSelector. The HeaderSelector class must derive from the DataTemplateSelector class, which is located into the Telerik.Windows.Controls assembly.

public class HeaderSelector : Telerik.Windows.Controls.DataTemplateSelector
{
}

Public Class HeaderSelector
    Inherits Telerik.Windows.Controls.DataTemplateSelector
End Class

Override the SelectTemplate 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 HeaderSelector : DataTemplateSelector
{
    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        if (item is Animal)
        {
            return Application.Current.Resources["AnimalDataTemplate"] as DataTemplate;
        }
        else
        {
            return Application.Current.Resources["PlantDataTemplate"] as DataTemplate;
        }
    }
}

Public Class HeaderSelector
    Inherits Telerik.Windows.Controls.DataTemplateSelector
    Public Overrides Function SelectTemplate(item As Object, container As DependencyObject) As DataTemplate
        If TypeOf item Is Animal Then
            Return TryCast(Application.Current.Resources("AnimalDataTemplate"), DataTemplate)
        Else
            Return TryCast(Application.Current.Resources("PlantDataTemplate"), DataTemplate)
        End If
    End Function
End Class

Finally set the HeaderTemplateSelector property of the RadTabItem:

<selectors:HeaderSelector x:Key="HeaderSelector" />
...
<telerik:RadTabControl x:Name="Tabs">
    <telerik:RadTabControl.ItemContainerStyle>
        <Style TargetType="telerik:RadTabItem">
            <Setter Property="HeaderTemplateSelector" Value="{StaticResource HeaderSelector}" />
        </Style>
    </telerik:RadTabControl.ItemContainerStyle>
</telerik:RadTabControl>

Please note that RadTabControl exposes an ItemTemplateSelector that applies a DataTemplateSelector as an HeaderTemplateSelector to all RadTabItems.

<telerik:RadTabControl x:Name="Tabs" ItemTemplateSelector="{StaticResource HeaderSelector}"/>   

See Also

• Tab Items Overview