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 and what approach to take in order to do so, you might find it useful to familiarize with the Themes Concept and their Distribution.
The theming mechanism makes it really easy for you to change the overall appearance of your application. Furthermore, it is simple for you to make customizations, assemblies have smaller size and modifications through Blend is supported.
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 visualisation of a certain control. As most of the custom controls are quite complex and contain within themselves other custom controls, often you will need the resources of several files.
To apply a theme, you need to merge these files into the Merged Dictionaries of your application. As you most probably will be using just a subset of the available controls, you can merge only several files which are needed for the specific controls. This leads to a smaller assembly size and an easy-to-customize appearance.
After installing the Telerik UI for Silverlight suite, you will find the following structure in the installation folder (usually C://Program Files/Telerik/ Telerik UI for Silverlight [version]/)
Binaries: The standard binaries including the themes dlls.
Binaries.NoXaml: Binaries without XAML, even the default Office_Black theme is not included.
Themes.Implicit: The theme-specific XAML code for all the controls.
As its name suggests, the Themes.Implicit folder contains all styles and resources needed for the visualization of the Telerik UI for Silverlight controls. Further digging into its structure, you will notice that it contains separate folders for each available theme.
The standard binaries include the implementation of the different controls as well as the styles and the resources needed for their visualization. As our assemblies contain multiple components, all styles for them are included and the assembly size is larger.
The NoXAML binaries, on the other hand, do not include any XAML files - no styles, no brushes or any other resources. This results in smaller assembly size and would mean that when you use them, you have to provide the resources needed for the visualization of the controls. This happens by merging the needed XAML files from the Themes folder into the Application's Merged Dictionaries.
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.
Now that you have an idea of the concepts behind the theming mechanism, it is time to set up your project so that it is correctly applied.
There are two main approaches from which you can choose:
Reference the theme DLL which includes all XAML files for the respective theme and merge only the needed XAML files in the MergedDictionaries of your application.
Copy the different XAML files of the controls which you will use in your application(from the respective theme`s folder) into a dedicated folder in your application and merge them in the application's MergedDictionaries. This approach is preferred in case you need to directly modify the default styles and resources of the theme.
The approaches are shown in details below:
All XAML files are included in a separate Theme DLL located in the Binaries.NoXaml folder (Telerik.Windows.Themes.Expression_Dark.dll, Telerik.Windows.Themes.Windows8.dll, etc.). So instead of copying all the XAML files in your project(as shown in the second approach), you can just merge them 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 Figure 1 and Example 1 .
Figure 1: Add reference to the theme binary file:
[XAML] Example 1: After you add a reference, you should merge the needed .xaml files
<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.Navigation.xaml"/> <ResourceDictionary Source="/Telerik.Windows.Themes.Office_Black;component/Themes/Telerik.Windows.Controls.GridView.xaml"/> <ResourceDictionary Source="/Telerik.Windows.Themes.Office_Black;component/Themes/Telerik.Windows.Controls.Data.xaml"/> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Application.Resources>
As already advised, the default styles and resources for each theme are shipped in the Themes.Implicit folder. In order to apply a certain theme for your application you need to merge all the required XAML files from the respective theme's folder(depends on the set of controls you are using) in the application's MergedDictionaries. You should merge all XAML files corresponding to each assembly reference you have in your project, as shown in Example 1 and Figure 1 and 2.
Figure 2: The binary references in your application:
The references should point to the binary files from the Binaries.NoXAML folder.
Figure 3: Copy the needed XAML files in a separate folder in your application:
[XAML] Example 2: 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.Navigation.xaml"/> <ResourceDictionary Source="/Themes/Telerik.Windows.Controls.GridView.xaml"/> <ResourceDictionary Source="/Themes/Telerik.Windows.Controls.Data.xaml"/> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Application.Resources>
If you copy the XAML files in your project, please make sure that they are with the proper build action. Generally it should be Resource, but for the Telerik.Windows.Controls.RibbonView.xaml file the build action should be Page. Telerik.Windows.Controls.RichTextBoxUI.xaml also should be with build action Page since it includes all RibbonView styles. This is caused by several x:Shared setters, which cannot be set in loose XAML. More information can be found in MSDN.
You should not set Application Theme using the StyleManager when using implicit styles.