Edit this page

Creating a Custom Theme Project

The second option to create a custom theme is to create your own custom theme project, which doesn't follow the approach from the Telerik built-in themes. Basically, what you need to do is to create XAML files for the controls that you want to style and then to combine them in one file (like Generic.xaml) using ResourceDictionary.MergedDictionaries. Then create a new class, which derives from Telerik.Windows.Controls.Theme. In the constructor you should set the source to point to the Generic.xaml file (that merges all your XAML files from the theme project). The tricky part here is that you should have references to all assemblies that you are styling. Which means that if you have Style for RadMenu in your theme project, you should have a reference to the Telerik.Windows.Controls.Navigation.dll assembly in your application or you will get an exception.

The purpose of this topic is to show you how to do that.

  1. Open Visual Studio and create a new Silverlight Application. Name the project CustomThemeDemo.

    Common Styling Theming Creating Custom Theme 010

  2. Add a new Silverlight class library project to your solution, named MyTheme.

  3. In the MyTheme project add references to the Telerik assemblies containing the controls you want to style. For example, if you have Style for RadMenu, you should have a reference to the Telerik.Windows.Controls.Navigation.dll assembly. In this demo the RadSlider control will be styled for simplicity. That's why you need to add a reference only to the Telerik.Windows.Controls.dll assembly.

  4. In the MyTheme project, add a new folder named Themes. All XAML files, describing the styles for the target controls, should be placed in the Themes folder. In the following example, the original Vista theme of the RadSlider control is copied from the UI for Silverlight installation folder (~UI for Silverlight Installation Folder\Themes\Vista\Themes\Vista\Slider.xaml) and pasted in the Themes folder of the MyTheme project.

  5. Add a new ResourceDictionary to the Themes folder. Name it Generic.xaml. Use Generic.xaml as a Resource Dictionary which contains Merged Resource Dictionaries only.

        <ResourceDictionary
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"&gt;&#13;        <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/MyTheme;component/Themes/Slider.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    
  6. Just for the demonstration, open the Slider.xaml file and modify the SliderBackgroundTrack brush to Red.

        <SolidColorBrush x:Key="SliderBackgroundTrack" Color="Red" />
    
  7. Add a new class named MyTheme to the MyTheme project. That class should derive from the Telerik.Windows.Controls.Theme base class. In the constructor you should set the source to point to the Generic.xaml file (that merges all your XAML files from the theme project).

        using System;
        namespace MyTheme
        {
            public class MyTheme : Telerik.Windows.Controls.Theme
            {
                public MyTheme()
                {
                    this.Source = new Uri( "/MyTheme;component/Themes/Generic.xaml", UriKind.Relative );
                }
            }
        }
    
        Imports System
        Namespace MyTheme
         Public Class MyTheme
          Inherits Telerik.Windows.Controls.Theme
          Public Sub New()
           Me.Source = New Uri("/MyTheme;component/Themes/Generic.xaml", UriKind.Relative)
          End Sub
         End Class
        End Namespace
    
  8. Finally, the MyTheme project should have the following structure.

    Common Styling Theming Creating Custom Theme 020

  9. The next step is to apply the custom theme. In the Silverlight client project, add a reference to the project containing your custom theme (in this case this is the MyTheme project).

    You should have references to all assemblies that you are styling. Which means that if you have Style for RadMenu in your theme project, you should have a reference to the Telerik.Windows.Controls.Navigation.dll assembly in your application or you will get an exception.

  10. Open the App.xaml.cs file and add the following code in the constructor. This will be enough to apply the theme globally to all Telerik Silverlight controls.

        Telerik.Windows.Controls.StyleManager.ApplicationTheme = new MyTheme.MyTheme();
    
        Telerik.Windows.Controls.StyleManager.ApplicationTheme = New MyTheme.MyTheme()
    
  11. If you want to apply the theme only for a specific control, then you should stick to the following approach:

        <UserControl.Resources>
            <myThemeProject:MyTheme x:Name="MyTheme" />
        </UserControl.Resources>
        <Grid x:Name="LayoutRoot"
                Background="White" Margin="50">
            <telerik:RadSlider x:Name="radSlider"
                                telerik:StyleManager.Theme="{StaticResource MyTheme}"/>
        </Grid>
    

    Common Styling Theming Creating Custom Theme 030

See Also