Creating and applying a custom theme for RadScheduler for WPF

HOW TO implement a new custom theme in a few steps

The current version (Q2 2010) of RadScheduler for WPF offers developers to choose between several built-in themes. It also provides a range of properties and ways to customize the looks of individual parts. However, if a developer wants to give a completely different layout of some internal controls, or change a style/template of a particular element, a custom theme comes into play.
The solution attached to this post contains two projects – CustomTheme and CustomThemeExample. The first contains the custom theme and the second – the example project which use it.

Below are the main steps to build the CustomTheme project:

1. Create a new Class Library project.
2. Add a new folder named “Themes” in the project and a Generic.xaml file inside it. This will contain our custom theme’s resources. Make sure the xaml file’s BuildAction property is set to ”Page”. Add also “Images” folder to hold the images used by your custom theme. Make sure all the images you add are with BuildAction property set to ”Resource” in order to be usable by the theme. 
   
    
3. Add a new empty class which inherits from Telerik.Windows.Controls.Theme. In our example it is called MyTheme – this will be the name of the new theme.
4. In RadScheduler’s project solution (which is provided for customers only), click the “Show all files” button in solution explorer, so that you can see the generated Scheduler.xaml file, containing all needed resources for the theme. Copy its contents and paste it in the already created Generic.xaml file in our CustomTheme project. This will give us the chance to make changes over the theme from which we have picked the xaml code.
   
   
   
   NOTE: In order to see a Scheduler.xaml file, you will have to build the Scheduler project. After doing so, you will find a copy of this file with resources in the folder of each theme.
5. Corrections in our new Generic.xaml
   1.  Since some resources in the xaml refer already external assembles we will need to correct some namespaces:
      

      xmlns:telerikScheduler="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Scheduler"

      xmlns:scheduler="clr-namespace:Telerik.Windows.Controls.Scheduler;assembly=Telerik.Windows.Controls.Scheduler"

   2. Replace original theme’s default style keys with our new theme’s Type like so:
      original key:
      

      <Style x:Key="{telerik:ThemeResourceKey ThemeType=telerik:Office_SilverTheme, ElementType={x:Type telerikScheduler:RadScheduler}}"

      TargetType="{x:Type telerikScheduler:RadScheduler}"

      BasedOn="{StaticResource RadSchedulerStyle}">

      </Style>

      new key:
      

      <Style x:Key="{telerik:ThemeResourceKey ThemeType=CustomTheme:MyTheme, ElementType={x:Type telerikScheduler:RadScheduler}}"

      TargetType="{x:Type telerikScheduler:RadScheduler}"

      BasedOn="{StaticResource RadSchedulerStyle}">

      </Style>

   3. Replace all image source paths used to point to our Images folder in the new theme like
      <Image Source="CustomTheme;;;component/Themes/images/recc.png"/>
   4. The last thing to do is to verify that a generic theme can be properly applied. Add the ThemeInfo attribute into the AssemblyInfo.cs: 
      

      [assembly: ThemeInfo(ResourceDictionaryLocation.None, ResourceDictionaryLocation.SourceAssembly)]

      This specifies that there is a generic.xaml file which is eventually used to retrieve resources from.
   5. Just for the sake of demonstration and to make difference with the original theme, we have changed the color which is applied to the AppointmentItem elements:

      <SolidColorBrush x:Key="AppointmentBackground" Color="Azure"/>

To use the ready custom theme:

1. Create new WPF application project and refer your custom theme project.
2. Make a static instance of the custom theme in the main window xaml and use it like this:
   

   <Grid.Resources>

   <CustomTheme:MyTheme x:Key="MyThemeInstance" />

   </Grid.Resources>

   <telerikScheduler:RadScheduler x:Name="scheduler"

   telerik:StyleManager.Theme="{StaticResource MyThemeInstance}" />

...and after running our application, the scheduler should look like:


The sample project with the custom theme is attached below. Happy theming!

P.S.:Article addressing customizing themes for Silverlight version of RadScheduler coming soon!