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