Edit this page

Setting a Theme with StyleManager

The purpose of this tutorial is to show you how to set a built-in theme to UI for Silverlight.

This topic contains the following sections:

Currently Telerik Silverlight controls support the following themes:

  • Office Black - this is the default theme. No assembly is required for it.

  • Office Blue - requires Telerik.Windows.Themes.Office_Blue.dll.

  • Office Silver - requires Telerik.Windows.Themes.Office_Silver.dll.

  • Expression Dark - requires Telerik.Windows.Themes.Expression_Dark.dll.

  • Summer - requires Telerik.Windows.Themes.Summer.dll.

  • Vista - requires Telerik.Windows.Themes.Vista.dll.

  • Windows 7 - requires Telerik.Windows.Themes.Windows7.dll.

  • Transparent - requires Telerik.Windows.Themes.Transparent.dll

  • Windows8 - requires Telerik.Windows.Themes.Windows8.dll

  • Windows8Touch - requires Telerik.Windows.Themes.Windows8Touch.dll

The Silverlight themes are located in separate assemblies in order the size of the control assembly to be optimized. You can use the Telerik Assembly Minifier tool to minimize the size of the theme as well.

  1. Create a new Silverlight application or open an existing one.

  2. Click the menu item Project -> Add Reference....

  3. Navigate to the place where you have installed UI for Silverlight.

  • Browse Binaries (Bin) folder.

  • Select the assembly that references your theme as it is shown above.

    Common Styling Theming Setting Built In Theme 010

Now you are ready to use the themes either for a single control or for all controls in your application scope.

In the following examples the Vista theme will be used.

Setting Instance-Specific Built-In Theme in XAML

In order to change the theme of a single control in XAML you have to declare a resource of type Theme and set an appropriate key. To complete this procedure follow the instructions below.

  1. Open the user control that hosts your control.

  2. Declare one of the Telerik Silverlight controls and set the attached property StyleManager.Theme value to Vista.

  3. After executing all steps your code should be similar to this:

        <UserControl x:Class="Test.MainPage"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"&#13;        xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls">
            <Grid x:Name="LayoutRoot">
    
                <telerik:RadSlider telerik:StyleManager.Theme="Vista"/>
    
            </Grid>
        </UserControl>
    

Setting Instance-Specific Built-In Theme in the Code-Behind

You can also choose to change the theme for the Telerik Silverlight controls in code-behind. To achieve this follow the brief steps described below.

  1. Open your user control.

  2. Make sure you have explicitly named the target control in XAML.

  3. In the constructor of your user control place the following code:

        StyleManager.SetTheme(radSlider, new VistaTheme() );
    
        StyleManager.SetTheme(radSlider, New VistaTheme())
    

The result of both approaches will be similar and can be seen on the next figure.

Common Styling Theming Setting Built In Theme 020

Setting Application-Wide Built-In Theme in the Code-Behind

Changing the application theme is very similar to changing the theme of a single control in Silverlight. However, changing the application theme is in much bigger scale as it affects all controls in the scope of your application. You could set the desired theme in the constructor of the application. Here is a quick glimpse at how to change the application theme:

To change the application theme in code-behind you should follow the instructions below:

  1. Open an existing application or create a new one.

  2. Open MainPage.xaml.cs

    In this case MainPage.xaml.cs is your entry point for the application. If you wonder which is your startup page, open the App.xaml.cs file and see the Application_Startup event handler:

        private void Application_Startup( object sender, StartupEventArgs e )
        {
            this.RootVisual = new MainPage();
        }
    
        Private Sub Application_Startup(ByVal sender As Object, ByVal e As StartupEventArgs)
            Me.RootVisual = New MainPage()
        End Sub
    
  3. Declare the following code before the InitializeComponent() call, depending on the name of your theme as follows:

        StyleManager.ApplicationTheme = new VistaTheme();
    
        StyleManager.ApplicationTheme = New VistaTheme()
    
  4. After properly executing the following steps your MainPage class should be similar to this:

        public partial class MainPage : UserControl
        {
            public MainPage()
            {
                StyleManager.ApplicationTheme = new VistaTheme();
    
                InitializeComponent();
            }
        }
    
        Public Partial Class MainPage
            Inherits UserControl
            Public Sub New()
                StyleManager.ApplicationTheme = New VistaTheme()
    
                InitializeComponent()
            End Sub
        End Class
    

    With the same success setting an application-wide built-in theme can be done in the constructor of your Application class (App.xaml.cs):

        public partial class App : Application
        {
            public App()
            {
                this.Startup += this.Application_Startup;
                this.Exit += this.Application_Exit;
                this.UnhandledException += this.Application_UnhandledException;
    
                StyleManager.ApplicationTheme = new VistaTheme();
    
                InitializeComponent();
            }
        }
    
        Public Partial Class App
            Inherits Application
    
            Public Sub New()
                AddHandler Startup, AddressOf Me.Application_Startup
                AddHandler [Exit], AddressOf Me.Application_Exit
                AddHandler UnhandledException, AddressOf Me.Application_UnhandledException
    
                StyleManager.ApplicationTheme = New VistaTheme()
    
                InitializeComponent()
            End Sub
        End Class
    

Create a Custom Theme

This section contains the following subsections:

Create a New Theme Project and Add Styles for Controls You Want to Style

  1. Create a new Silverlight Class Library project.

  2. Add a new Silverlight Resource Dictionary. Here you should define the styles for the controls you want to style.

  3. At the end you should have a single file that merges all your XAML files (if you have separate XAML files) using the ResourceDictionary.MergedDictionaries construction.

    For example, if you merge your styles in Generic.xaml file, then you can set the theme pointing to this file:

        Telerik.Windows.Controls.StyleManager.ApplicationTheme = new Theme( Uri( "/Telerik.Windows.Themes.CustomTheme;component/Themes/Generic.xaml", UriKind.Relative ) );
    
        Telerik.Windows.Controls.StyleManager.ApplicationTheme = New Theme(Uri("/Telerik.Windows.Themes.CustomTheme;component/Themes/Generic.xaml", UriKind.Relative))
    

    In the above code snippet it is assumed that:

    • The theme project name is Telerik.Windows.Themes.CustomTheme.

    • The Generic.xaml file is located in the Themes folder.

Using the Theme Class

  1. Create a new Silverlight Class Library project.

  2. Add a new Silverlight Resource Dictionary. Here you should define the styles for the controls you want to style.

  3. At the end you should have a single file that merges all your XAML files (if you have separate XAML files) using the ResourceDictionary.MergedDictionaries construction.

  4. Create a new class which derives from Theme.

        public class CustomTheme : Telerik.Windows.Controls.Theme
        {
        }
    
        Public Class CustomTheme
            Inherits Telerik.Windows.Controls.Theme
        End Class
    
  5. Set the ThemeLocationAttribute attribute to BuiltIn like this:

        [ThemeLocation( ThemeLocation.BuiltIn )]
        public class CustomTheme : Telerik.Windows.Controls.Theme
        {
        }
    
        <ThemeLocation(ThemeLocation.BuiltIn)> _
        Public Class CustomTheme
            Inherits Telerik.Windows.Controls.Theme
        End Class
    
  6. In the class constructor set the Source property of the Theme.

        public CustomTheme()
        {
            this.Source = new Uri( "/Telerik.Windows.Themes.CustomTheme;component/themes/Generic.xaml", UriKind.Relative );
        }
    
        Public Sub New()
            Me.Source = New Uri("/Telerik.Windows.Themes.CustomTheme;component/Themes/Generic.xaml", UriKind.Relative)
        End Sub
    

In the above code snippet it is assumed that:

  • The theme project name is Telerik.Windows.Themes.CustomTheme.

  • The Generic.xaml file is located in the Themes folder.

See Also