Style and Appearance

Setting a Theme with Telerik UI for Silverlight

Before you proceed reading this topic we recommend you read the Xaml vs. NoXaml article.

The Telerik UI for Silverlight suite provides a variety of themes that will help you achieve outstanding visual appearance and great user experience. Before choosing what theme to apply you might find it useful to familiarize with the themes concept and the difference between Xaml and NoXaml.

What is a Theme?

A theme contains all the styles and resources needed for the visualization of the Telerik controls. Each theme consists of multiple XAML files. You can think of each separate file as a collection of compliant styles which are needed for the visualization of a certain control. As most of the custom controls are quite complex and contain other custom controls within themselves, often you will need the resources of several files.

Theme Setting Mechanisms

There are two mechanisms that can be used to set a theme.

Setting a Theme Using Implicit Styles

Using implicit styles gives you full Blend support and smaller dlls size. To use this mechanism you will need to use the NoXaml version of the UI for Silverlight dlls.

To change the theme you will need to take the following few steps.

  1. Reference the NoXaml version of the Telerik UI for Silverlight dlls. They can be found in the */Telerik UI for Silverlight installation folder/Binaries.NoXaml/* folder.

  2. Get the .xaml files with the control styles and templates.

    There are two options to get the .xaml files.

  3. Merge the required .xaml files in the App.xaml file.

    In the implicit styles (NoXaml) scenario you will need to merge the resources for each referenced dll. For example, to use RadGridView you will need to reference the following dlls.

    • Telerik.Windows.Controls.dll
    • Telerik.Windows.Controls.Input.dll
    • Telerik.Windows.Controls.GridView.dll
    • Telerik.Windows.Data.dll

    And then merge the dictionaries for the controls in the dlls as shown in Example 1.

    Merging .xaml files for the Office_Black theme (from the theme dll)

        <Application> 
        <Application.Resources> 
            <ResourceDictionary> 
                <ResourceDictionary.MergedDictionaries> 
                    <ResourceDictionary Source="/Telerik.Windows.Themes.Office_Black;component/Themes/System.Windows.xaml"/> 
                    <ResourceDictionary Source="/Telerik.Windows.Themes.Office_Black;component/Themes/Telerik.Windows.Controls.xaml"/> 
                    <ResourceDictionary Source="/Telerik.Windows.Themes.Office_Black;component/Themes/Telerik.Windows.Controls.Input.xaml"/> 
                    <ResourceDictionary Source="/Telerik.Windows.Themes.Office_Black;component/Themes/Telerik.Windows.Controls.GridView.xaml"/>          
                </ResourceDictionary.MergedDictionaries> 
            </ResourceDictionary> 
        </Application.Resources> 
    </Application>

    Note that the Telerik.Windows.Data.dll doesn't have any UI (controls) so it doesn't have a ResourceDictionary with styles and templates.

Merging the .xaml files in App.xaml will apply the theme to all controls in the application. To apply the theme only for a specific view you can merge the dictionaries in its Resources. For example, in the <UserControl.Resources></UserControl.Resources>. To apply the theme only for a specific control you can merge the dictionaries in the Resources of the control's parent container.

Keep in mind that, when creating custom controls or styles based on Telerik controls you will need to use their base styles. Read more about this in the Styling the Controls article.

How to get the .xaml files required for merging

You can find all required .xaml files in two places, respectively you can use two approaches to reference them in the project.

Reference theme dll

All styles and templates for the themes are encapsulated in theme dlls located in the /Binaries.NoXaml/ folder (Telerik.Windows.Themes.Material.dll, Telerik.Windows.Themes.Office2016.dll, etc.). To get the styles for a specific theme you can just merge its ResourceDictionaries directly from the theme assembly. For example, if you are using the Office_Black theme, you should add a reference to the Telerik.Windows.Themes.Office_Black.dll and then merge the needed .xaml files as shown in Example 1 .

We recommend this approach because upgrading and maintaining is easier. The other one (copying the XAML files) is better if you have highly customized controls or you use only several controls and don't want to include a dll with all styles.

Copy the XAML files in a dedicated folder in your application

The default styles and resources for each theme are shipped also in the /Telerik UI for Silverlight installation folder/Themes.Implicit folder. In order to apply a certain theme for your application you can copy all the required XAML files from the respective theme's folder (depends on the set of controls you are using) in a folder from your application. And then merge the ResourceDictionaries in the application's MergedDictionaries collection. You should merge all .xaml files corresponding to each assembly reference you have in your project, as shown in Example 2 and Figure 1.

Figure 1: Copy the needed XAML files in a separate folder in your application

implicit styles 3

The MergedDictionaries in your application resources:

<Application.Resources> 
    <ResourceDictionary> 
        <ResourceDictionary.MergedDictionaries> 
            <ResourceDictionary Source="/Themes/System.Windows.xaml"/> 
            <ResourceDictionary Source="/Themes/Telerik.Windows.Controls.xaml"/> 
            <ResourceDictionary Source="/Themes/Telerik.Windows.Controls.Input.xaml"/> 
            <ResourceDictionary Source="/Themes/Telerik.Windows.Controls.GridView.xaml"/> 
        </ResourceDictionary.MergedDictionaries> 
    </ResourceDictionary> 
</Application.Resources>

If you merge a ResourceDictionary for a dll that is missing from the project's References an error will occur.

You should not set application theme using the StyleManager when using implicit styles.

If you copy the .xaml files in your project, please make sure that their Build Action is set to Page.

Setting a Theme Using StyleManager

Switching the theme at runtime when using StyleManager is not supported. To enable this feature, use the NoXaml dlls and Implicit Styles theming. Read more in the Switching Themes at Runtime article.

StyleManager is used when working with the standard (Xaml) dlls. The StyleManager is a class that applies different styles on the Telerik controls based on the set theme. It allows you to set the theme on a control level and on application level.

To change the theme via the StyleManager you will need to take the following few steps.

  1. Reference the Xaml version of the Telerik UI for Silverlight dlls. They can be found in the /Telerik UI for Silverlight installation folder/Binaries/ folder.

  2. Add a reference to the dll with the theme (example: Telerik.Windows.Themes.Office_Black.dll).

  3. Set the StyleManager.Theme attached property on the control you want to theme. Or set the StyleManager.ApplicationTheme static property before calling the InitializeComponent method of the view or the App.xaml.cs file. This will set the theme globally for all Telerik controls.

    Setting the theme on a control level in XAML

        <telerik:RadGridView telerik:StyleManager.Theme="Windows11" />

    Setting the theme on a control level in code

        StyleManager.SetTheme(radControlInstance, new Office2016Theme()); 

        StyleManager.SetTheme(radControlInstance, New Office2016Theme())

    Setting the theme on application level

        StyleManager.ApplicationTheme = new Office2016Theme(); 
    InitializeComponent(); 

        StyleManager.ApplicationTheme = New Office2016Theme() 
    InitializeComponent()

Read more about this approach in the StyleManager help section.

Merging theme resource dictionaries when using StyleManager (mixing implicit styles theming and StyleManager) is not supported. Use StyleManager only with Xaml dlls, or Implicit Styles only with NoXaml binaries.

Changing Color Variation

Some of the Telerik themes support palettes, which contains resources for the associated theme. Some of the palettes have different color variations, which can be changed with the LoadPreset method.

Changing the color variation of the theme

//default color variation 
GreenPalette.LoadPreset(GreenPalette.ColorVariation.Dark); 

//default color variation 
GreenPalette.LoadPreset(GreenPalette.ColorVariation.Dark)

To see which themes support more than one color variation please check the Available Themes article.

Does a Theme Affect All Silverlight Controls?

All Themes are specifically designed to style Telerik controls. However, there are some native Microsoft Silverlight controls which are affected by the theming mechanism as well. You can find a list of these controls in the Setting a Theme on MS Controls article.

See Also

In this article
Related articles
Not finding the help you need? Improve this article