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