Edit this page

Modifying Themes in Blend

Themes can be modified either by changing the properties of the RadTabControl or by modifying its ControlTemplate .

Modifying the Theme via Style

Define a Style that has the RadTabControl for target type.

<Style x:Key="TabControlStyle" TargetType="telerik:RadTabControl">
</Style>

Set properties like FontFamily, Foreground, Background in order to change the appearance of the control.

<Style x:Key="TabControlStyle" TargetType="telerik:RadTabControl">
    <Setter Property="ReorderTabRows" Value="True"/>
    <Setter Property="AllowDragReorder" Value="False"/>
    <Setter Property="Background" Value="Blue" />
…
</Style>

To apply the style just set the style property of the tab control in XAML pointing to the static resource.

<telerik:RadTabControl x:Name="radTabControl" Style="{StaticResource TabControlStyle}"/>

It’s best for styles to be defined in the UserControl’s resources or in the Application’s resources.

Modifying the Theme via the ControlTemplate

Via Expression Blend you are able to get the current template of the RadTabControl and modify it. This way you are directly modifying the theme.

To modify the ControlTemplate of the RadTabControl in Expression Blend follow these steps:

Select the RadTabControl you want to modify.

Right-click on the RadTabControl and choose Edit Control Parts -> Edit a Copy.

Choose a name for the template and where to define it.

Modify the controls of the template or add additional if needed.

If you take a look at the XAML in Visual Studio you will see a lot of code. There are several Brushes defined and several ControlTemplates, followed by a Style. These four templates are used by the Top-, Right-, Bottom- and LeftTemplate properties. As a default template is used the TopTemplate value:

<ControlTemplate x:Key="TabControlTopTemplate" TargetType="telerik:RadTabControl">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <vsm:VisualStateManager.VisualStateGroups>
            <vsm:VisualStateGroup x:Name="CommonStates">
                <vsm:VisualState x:Name="Disabled">
                    <Storyboard/>
                </vsm:VisualState>
                <vsm:VisualState x:Name="Normal"/>
            </vsm:VisualStateGroup>
        </vsm:VisualStateManager.VisualStateGroups>
        <Border Margin="0" Grid.Row="1" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
            <ContentPresenter x:Name="ContentElement" Content="{TemplateBinding SelectedContent}" ContentTemplate="{TemplateBinding SelectedContentTemplate}"/>
        </Border>
        <Grid>
            <Rectangle Visibility="{TemplateBinding BackgroundVisibility}" Fill="{StaticResource RadTabControlHeaderBackground}"/>
            <ItemsPresenter Margin="2 4 0 0"/>
        </Grid>
        <Rectangle x:Name="DisableVisual" Visibility="Collapsed" Grid.RowSpan="2" Fill="{StaticResource RadTabItemDisabledBackground}"/>
    </Grid>
</ControlTemplate>

Modify the Background Behind the Headers

Expand the Grid control in the “Object and Timeline” pane and select the rectangle.

Take a look at the “Properties” pane and you’ll see that the square right to the Fill property is green.

In the Local Brush Resources section see which brush is used and modify it by clicking on the rectangle left of its’ name.

The result should look like the following snapshot.

The same way you can modify the DisabledVisual rectangle. To modify the tab’s content and headers visual appearance you have to modify the template of the RadTabItem. More about that here.

If any of the Telerik’s themes is set to the RadTabControl, you will be modifying the ControlTemplate for the RadTabControl defined in them.

See Also

Was this article helpful? Yes No

Give article feedback

Tell us how we can improve this article

Dummy