Edit this page

Item Template and Template Selectors

When binding our RadTabControl to a business collection, you can configure the visualization of the data and the appearance of the RadTabItems via the ItemTemplate, ContentTemplate and the ItemTemplateSelector, ContentTemplateSelector properties.

ItemTemplate Property

The ItemTemplate property is used to configure the template for the header of the tabs. It can be set in both Expression Blend and Visual Studio. To set it in Expression Blend you can follow these steps:

Select the RadTabControl, which ItemTemplate you want to set.

Right-click on it or right-click in the scene explorer and choose Edit Additional Templates -> Edit Generated Items -> Create Empty.

Choose a name for the data template and where to be defined in:

Defining the template in the Application section makes it reusable from everywhere in the application.

Drag and drop the controls you need for the template and configure their properties. In the example are used an Image and a TextBlock controls:

<DataTemplate x:Key="ItemTemplate">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Image Stretch="None" Grid.Column="0" />
        <TextBlock Grid.Column="1" TextWrapping="Wrap" />
    </Grid>
</DataTemplate>

To configure the binding for the Source property of the Image control, select it in the “Object and Timeline” pane.

Go to the “Properties” pane and find the Source property in the 'Common properties' section.

Click the empty square right of it to open the context menu for the property and choose DataBinding to open the "Create Data Binding" dialog.

If you are familiar with the binding syntax you can also choose Custom Expression and manually write the binding.

In the "Create Data Binding" dialog choose the Explicit DataContext tab and check the Use custom path expression box. In the field write the name of the property you want to bind to. Click "Finish".

Do the same for the Text property of the TextBlock.

You can also define the bindings manually in XAML:

<DataTemplate x:Key="ItemTemplate">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Image Stretch="None"
               Grid.Column="0"
               Source="{Binding ImagePath}" />
            <TextBlock Grid.Column="1"
                       TextWrapping="Wrap"
                       Text="{Binding Header}" />
    </Grid>
</DataTemplate>
...
<telerik:RadTabControl x:Name="Tabs" ItemTemplate="{StaticResource ItemTemplate}">
</telerik:RadTabControl>

When you start the application with configured ItemsSource (read more here) you should see a similar result:

Although it is clearer when defining the DataTemplate in the control, it’s a good practice to place it within the resources, in case you want to reuse it later.

ContentTemplate Property

The ContentTemplate property is used to configure the template for the content of the tabs. It can be set in both Expression Blend and Visual Studio. To set it in Expression Blend you can follow the above steps. If you decide to set it in Visual Studio, you can define the following XAML:

<DataTemplate x:Key="ItemTemplate">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Image Stretch="None"
               Grid.Column="0"
               Source="{Binding ImagePath}" />
            <TextBlock Grid.Column="1"
                       TextWrapping="Wrap"
                       Text="{Binding Header}" />
    </Grid>
</DataTemplate>

<DataTemplate x:Key="ContentTemplate">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Image Stretch="None"
               Grid.Column="0"
               Source="{Binding ImagePath}" />
            <TextBlock Grid.Column="1"
                       TextWrapping="Wrap"
                       Text="{Binding Description}" />
    </Grid>
</DataTemplate>

...
<telerik:RadTabControl x:Name="Tabs"
                       ItemTemplate="{StaticResource ItemTemplate}" 
                       ContentTemplate="{StaticResource ContentTemplate}">
</telerik:RadTabControl>

ItemContainerStyle Property

You can use the ItemContainerStyle property to control the appearance of the item’s container.

To set properties of the tab’s header, you can use the ItemContainerStyle property. The container created by the RadTabControl for each item in the collection is of type RadTabItem. The style defined for the ItemContainerStyle property should have as TargetType the RadTabItem class.

<telerik:RadTabControl x:Name="Tabs">
    <telerik:RadTabControl.ItemContainerStyle>
        <Style TargetType="telerik:RadTabItem">
        </Style>
    </telerik:RadTabControl.ItemContainerStyle>
</telerik:RadTabControl>

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

The property that needs to be set in order to define the header template for the RadTabItem is the HeaderTemplate:

<telerik:RadTabControl x:Name="Tabs">
    <telerik:RadTabControl.ItemContainerStyle>
        <Style TargetType="telerik:RadTabItem">
            <Setter Property="HeaderTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <Image x:Name="HeaderIcon" Source="{Binding IconPath}" />
                            <TextBlock x:Name="HeaderText" Text="{Binding Header}" />
                        </StackPanel>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </telerik:RadTabControl.ItemContainerStyle>
</telerik:RadTabControl>

ContentTemplateSelector Property

The ContentTemplateSelector allows you to apply different Templates 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 and plants. You want to display the animals in a template with a yellow background and the plants in a different template with a green background. To create your own selector you can use Visual Studio.

Create a ContentSelector class deriving from the DataTemplateSelector class, which is located into the Telerik.Windows.Controls assembly.

public class ContentSelector : Telerik.Windows.Controls.DataTemplateSelector
{
}
Public Class ContentSelector 
    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 ContentSelector : Telerik.Windows.Controls.DataTemplateSelector
{
    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        if (((LifeForm)item).Type == LifeFormTypes.Animal)
        {
            return Application.Current.Resources["AnimalDataTemplate"] as DataTemplate;
        }
        else
        {
            return Application.Current.Resources["PlantDataTemplate"] as DataTemplate;
        }
    }
}
Public Class ContentSelector Inherits Telerik.Windows.Controls.DataTemplateSelector
    Public Overloads Overrides Function SelectTemplate(ByVal item As Object, ByVal container As DependencyObject) As DataTemplate
        If DirectCast(item, LifeForm).Type = LifeFormTypes.Animal Then
            Return TryCast(Application.Current.Resources("AnimalDataTemplate"), DataTemplate)
        Else
            Return TryCast(Application.Current.Resources("PlantDataTemplate"), DataTemplate)
        End If
    End Function
End Class

You can define your DataTemplates in the Application’s resources (App.xaml), so you can easily access them from the ItemSelector:

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

Define the created selector as a resource in your XAML and set it to the ItemTemplateSelector property.

<selectors:ContentSelector x:Key="ContentSelector" />
    ...
<telerik:RadTabControl x:Name="Tabs" ContentTemplateSelector="{StaticResource ContentSelector}">
</telerik:RadTabControl>

The same approach is used when creating StyleSelectors (for example for the ItemContainerStyleSelector property); just derive your selector class from StyleSelector, instead of DataTemplateSelector.

See Also

Was this article helpful? Yes No

Give article feedback

Tell us how we can improve this article

Dummy