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:

• Setting instance-specific built-in theme in XAML

• Setting instance-specific built-in theme in the code-behind

• Setting application-wide built-in theme in the code-behind

• Create a custom theme

• Unsupported Controls

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

• VisualStudio2013: Requires Telerik.Windows.Themes.VisualStudio2013.dll

• Office2013: Requires Telerik.Windows.Themes.Office2013.dll

The Silverlight themes are located in separate assemblies in order the size of the control assembly to be optimized.

Set up the Silverlight project

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.

  

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" 
           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.

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 (XAML) for the controls you want to style.

• Using the Theme class. This approach is used for the creation of the built-in themes for UI for Silverlight.

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.

Unsupported controls

The RadGanttView control doesn't support changing the theme using StyleManager and it should be used with the NoXaml dlls and the Implicit Styles mechanism.

See Also

• Modifying a Built-In Theme
• Theming-Overview
• Setting a Theme (Using Implicit Styles)