Edit this page

Using Themes

RadTabControl uses themes to control the overall look-and-feel of the control. The theme consists of a set of styles that are set to the Telerik RadControls when the theme is applied. To apply a theme to the RadTabControl, set its’ StyleManager.Theme attached property or apply the theme for the entire application.

A theme can be applied to a single control, which will affect only that control overall look, or can be applied to the entire application, which will affect the look and feel of all RadControls in the application.

RadTabControl comes with a number of predefined themes as part of the RadControls:
Summer

Office Black

 Vista

Using the Default Theme

When no theme is applied to the control, the default style and template of the RadTabControl are used. You can create your own styles and templates and use them to change the overall look of the RadTabControl.

Applying a Theme to a Single RadTabControl

The predefined Telerik Themes are located in their own assemblies. You will be able to see the themes in the intellisense or create instances of them in the managed code without adding a reference to the desired theme assembly. But the theme will not apply until you refer the theme’s assembly.

Applying a theme can be done declaratively in XAML or programmatically in managed code.

In XAML we can set the theme directly to the control:

<UserControl x:Class="RadTabControlHelp.Page"
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"&gt;&#13;    ...
        <telerik:RadTabControl x:Name="radTabControl" telerik:StyleManager.Theme="Office_Black"/>
    ...
</UserControl>

or declare it as a static resource in the UserControl’s resources or the Application’s resources:

<UserControl.Resources>
    <telerik:Theme x:Key="VistaTheme" Source="/Telerik.Windows.Theme.Vista;component/themes/generic.xaml" />
</UserControl.Resources>
<Grid x:Name="LayoutRoot">
    <telerik:RadTabControl x:Name="radTabControl" telerik:StyleManager.Theme="{StaticResource VistaTheme}" />
</Grid>

As the Vista theme is contained in the Telerik.Windows.Themes.Vista assembly, we first have to point the path to the assembly and then using the ;component syntax to point the way to the theme in the context of the assembly.

Declaring the theme in the Application’s resources (App.xaml) makes it reusable everywhere in the application, while the theme declared in the UserControl’s resources is only available for the particular UserControl.

In the managed code we apply themes to controls by using the static SetTheme() method of the Style manager - StyleManager.SetTheme(DependencyObject element, Theme value);

VistaTheme theme = new VistaTheme();
RadTabControl radTabControl= new RadTabControl();
StyleManager.SetTheme( radTabControl, theme );
Dim theme As New VistaTheme()
Dim radTabControlAs New RadTabControl()
StyleManager.SetTheme(radTabControl, theme)

By using the same approaches you can apply Telerik themes to the standard controls as well. Custom themes can also be created and applied via the StyleManager.

Applying a Theme to the Whole Application

A theme can be applied not only for a particular control, but also for all of the controls in the application.

StyleManager.ApplicationTheme = new VistaTheme();
StyleManager.ApplicationTheme = New VistaTheme()

or

new VistaTheme().IsApplicationTheme = true;
Dim theme As New VistaTheme()
theme.IsApplicationTheme = True

Applying a theme to the whole application will only affect the RadControls. If you want to apply the theme to the standard controls, you will have to set it to each of them using the StyleManager attached property or the StyleManager class in code-behind.

You have to set the application theme as early as possible. The most suitable locations are the Application.Startup event or in the UserControl’s constructor:

C#

private void Application_Startup( object sender, StartupEventArgs e )
{
    new VistaTheme().IsApplicationTheme = true;
    this.RootVisual = new Page();
}

VB.NET

Private Sub Application_Startup(ByVal o As Object, ByVal e As StartupEventArgs) Handles Me.Startup
    Dim theme As New VistaTheme()
    theme.IsApplicationTheme = True
    Me.RootVisual = New MainPage()
End Sub

Applying a Custom Theme

The StyleManager is not limited only when using the Telerik predefined themes. You are able to create your own themes and apply them to RadControls or the standard controls.

The theme will affect only those controls, for which there are styles defined.

Applying the custom theme is done in the same way as applying a Telerik’s theme:

<UserControl.Resources>
    <telerik:Theme x:Key="CustomTheme" Source="/PathToTheCustomTheme.xaml" />
</UserControl.Resources>
<Grid x:Name="LayoutRoot">
    <telerik:RadTabControl x:Name="radTabControl" telerik:StyleManager.Theme="{StaticResource CustomTheme}"/>
</Grid>

Theme theme = new Theme( new Uri( "PathToMyTheme.xaml", UriKind.RelativeOrAbsolute ) );
RadTabControl radTabControl = new RadTabControl();
StyleManager.SetTheme( radTabControl, theme );
Dim theme As New Theme(New Uri("PathToMyTheme.xaml", UriKind.RelativeOrAbsolute))
Dim radTabControlAs New RadTabControl()
StyleManager.SetTheme(radTabControl, theme)

If the theme is not found or is invalid, the default style of the control will be used.

Each one of the Telerik’s themes contains a set of color resources that determine the overall look of the controls. By configuring just these resources you can change the visual appearance of the controls and create your own theme on the basis of the original ones.

See Also

Was this article helpful? Yes No

Give article feedback

Tell us how we can improve this article

Dummy