Applying Themes on RadControls for Silverlight

The theme engine of RadControls for Silverlight is quite powerful and provides the developers with the ability to apply application-wide theme on all RadControls, as well as specific theme on a single control. If the theme does not contain the needed styles, the controls fallback to their default styles, so you could create an application theme for just a couple of controls and the rest will display with their default styles. We also provide styles for the standard controls, such as Button, CheckBox, RadioButton, etc. which enables you to create application with consistent look and feel.

Each theme is distributed as a assembly, containing a single generic.xaml file, that contains all control styles. The simplest way to apply one of our standard themes on a single control is to set the StyleManager.Theme attached property:

xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"
...
<telerikNavigation:RadMenu telerik:StyleManager.Theme=”Vista” ... /> <telerikNavigation:RadTreeView telerik:StyleManager.Theme=”Vista” ... />

Note that you need to reference the Telerik.Windows.Themes.Vista.dll in this case.

The long syntax of the example above is more suitable for setting custom themes, but also works for the standard themes:

<UserControl.Resources> <telerik:Theme x:Key=”VistaTheme” 

 Source=”/Telerik.Windows.Themes.Vista;component/themes/generic.xaml” /> </UserControl.Resources> <telerikNavigation:RadMenu 

 telerik:StyleManager.Theme=”{StaticResource VistaTheme}” ... /> <telerikNavigation:RadTreeView 

 telerik:StyleManager.Theme=”{StaticResource VistaTheme}” ... />

The custom themes usually are a represented by a single ResourceDictionary file that contains the default styles of the controls you want to customize. The Source property of the Theme class should contain the Uri to that ResourceDictionary. For example, if your Silverlight application assembly is named MyApplication.dll and the custom theme is placed in the MyTheme.xaml, located in the /Themes/TelerikControls/ folder of the project, the Uri would be:

/MyApplication;component/Themes/TelerikControls/MyTheme.xaml

An unexpected feature is the ability to apply themes on the standard controls, for example:

<Button telerik:StyleManager.Theme=”Vista” Content=”Click me!” />

From the code-behind the themes are set in a slightly different way:

RadMenu menu = new RadMenu();

// Use VistaTheme or Office_BlackTheme, or SummerTheme
StyleManager.SetTheme(menu, new VistaTheme()); 

You could also apply a custom theme:

Theme myTheme = new Theme(

 new Uri(“/MyApplication;component/Themes/TelerikControls/MyTheme.xaml”, 

        UriKind.RelativeOrAbsolute));
StyleManager.SetTheme(menu, myTheme);

If you want all Telerik controls to use one theme, you can set application theme:

StyleManager.ApplicationTheme = new VistaTheme();

or just

new VistaTheme().IsApplicationTheme = true;

Note that you need to set the application theme as early as possible. The best place for this would be the page constructor, or the Application.Startup event.

public partial class Page : UserControl
{
    public Page()
    {
        new VistaTheme().IsApplicationTheme = true;
        InitializeComponent();
    }
    ...
}

Unfortunately the standard controls will not use the application themes and you will have to set the StyleManager.Theme attached property on each of them in your application.