Styles and Templates

RadTabbedWindow allows you to easily modify its appearance by providing some useful properties.

AddButtonStyle

Via the AddButtonStyle property, you can control the appearance of the button which is used to add new tabs to the window.

Example 1: Specify AddButtonStyle

<telerik:RadTabbedWindow.AddButtonStyle> 
    <Style TargetType="telerik:RadButton" BasedOn="{StaticResource AddItemsButtonStyle}"> 
        <Setter Property="MinWidth" Value="36" /> 
        <Setter Property="MinHeight" Value="36" /> 
    </Style> 
</telerik:RadTabbedWindow.AddButtonStyle>

If you are using the default Office_Black theme (you have not merged a theme assembly) or you've set a different theme with the StyleManager, you should copy the AddItemsButtonStyle and all the referenced resources from the Telerik.Windows.Controls.Navigation.xaml file into your project.

ItemContainerStyle

You can use the ItemContainerStyle property to style the individual RadTabItem elements.

Example 2: Specify ItemContainerStyle

<telerik:RadTabbedWindow.ItemContainerStyle> 
    <Style TargetType="telerik:RadTabItem" BasedOn="{StaticResource RadTabbedWindowTabItemStyle}"> 
        <Setter Property="MinHeight" Value="40" /> 
        <Setter Property="Background" Value="Red" /> 
        <Setter Property="FontWeight" Value="Bold" /> 
        <Setter Property="PinButtonVisibility" Value="Visible" /> 
        <Setter Property="CloseButtonVisibility" Value="Visible"/> 
    </Style> 
</telerik:RadTabbedWindow.ItemContainerStyle>

If you are using the default Office_Black theme (you have not merged a theme assembly) or you've set a different theme with the StyleManager, you should copy the RadTabbedWindowTabItemStyle and all the referenced resources from the Telerik.Windows.Controls.Navigation.xaml file into your project.

ItemContainerStyleSelector

You can also define a StyleSelector and conditionally style the tab items via the ItemContainerStyleSelector property.

Example 3: Create a custom StyleSelector

public class MyTabItemStyleSelector : StyleSelector 
{ 
    public Style ProgressStyle { get; set; } 
    public Style NormalStyle { get; set; } 
 
    public override Style SelectStyle(object item, DependencyObject container) 
    { 
        var tab = item as Tab; 
        if (tab.Header.Contains("Progress")) 
        { 
            return this.ProgressStyle; 
        } 
 
        return this.NormalStyle; 
    } 
}

Public Class MyTabItemStyleSelector 
    Inherits StyleSelector 
 
    Public Property ProgressStyle() As Style 
    Public Property NormalStyle() As Style 
 
    Public Overrides Function SelectStyle(ByVal item As Object, ByVal container As DependencyObject) As Style 
        Dim tab = TryCast(item, Tab) 
        If tab.Header.Contains("Progress") Then 
            Return Me.ProgressStyle 
        End If 
 
        Return Me.NormalStyle 
    End Function 
End Class

Example 4: Specify ItemContainerStyleSelector property

<telerik:RadTabbedWindow ... ItemContainerStyle="{x:Null}"> 
    <telerik:RadTabbedWindow.ItemContainerStyleSelector> 
        <local:MyTabItemStyleSelector> 
            <local:MyTabItemStyleSelector.ProgressStyle> 
                <Style TargetType="telerik:RadTabItem" BasedOn="{StaticResource RadTabbedWindowTabItemStyle}"> 
                    <Setter Property="Background" Value="LightGreen" /> 
                    <Setter Property="FontWeight" Value="Bold" /> 
                </Style> 
            </local:MyTabItemStyleSelector.ProgressStyle> 
            <local:MyTabItemStyleSelector.NormalStyle> 
                <Style TargetType="telerik:RadTabItem" BasedOn="{StaticResource RadTabbedWindowTabItemStyle}" /> 
            </local:MyTabItemStyleSelector.NormalStyle> 
        </local:MyTabItemStyleSelector> 
    </telerik:RadTabbedWindow.ItemContainerStyleSelector> 
</telerik:RadTabbedWindow>

Please note that to use the ItemContainerStyleSelector property, you need to clear the ItemContainerStyle by setting it to null.

ItemTemplate and ItemTemplateSelector

When binding your RadTabbedWindow to a collection, you are able to configure the visualization of the data and the appearance of the tab items via the ItemTemplate and the ItemTemplateSelector properties.

Example 5: Define a custom ItemTemplate

<telerik:RadTabbedWindow.ItemTemplate> 
    <DataTemplate> 
        <StackPanel Orientation="Horizontal"> 
            <Ellipse Width="10" Height="10" Fill="LightGreen" /> 
            <TextBlock Text="{Binding Header}" FontWeight="Bold" Margin="5 0 0 0" /> 
        </StackPanel> 
    </DataTemplate> 
</telerik:RadTabbedWindow.ItemTemplate>

If you wish to return different templates for the tab items, you can use the ItemTemplateSelector property and pass a custom DataTemplateSelector to it.

ContentTemplate and ContentTemplateSelector

Similarly, in a data-binding scenario you can control the appearance of the tabs' content via the ContentTemplate and the ContentTemplateSelector properties.

Example 6: Define a custom ContentTemplate

<telerik:RadTabbedWindow.ContentTemplate> 
    <DataTemplate> 
        <TextBlock Text="{Binding Content}" FontWeight="Bold" /> 
    </DataTemplate> 
</telerik:RadTabbedWindow.ContentTemplate>

If you wish to return different templates for the tab items' content, you can use the ContentTemplateSelector property and pass a custom DataTemplateSelector to it.