Tweaking the Theme colors for Telerik Silverlight Controls

Its been a while since my last blog post. But this is all for good. It was a busy month for the Telerik Silverlight Team. We did a couple of public releases in the last few weeks. Our last release was yesterday - if you still haven't saw it - do this now - we shipped the missing "5th element" of the suite - the GridView control for Silverlight. Our next release will be in the middle of December when we will release our next essential control - the Docking Manager for Silverlight.

Now back on the topic. One of the major improvements in latest release of the Telerik Silverlight suite is the theming engine. We did a refactoring for all the control themes with one main goal in mind - to give you a suite that can be re-skinned with different colors in just a matter of minutes. By using this new approach we did 6 color variations of our default skin in less that 2 days - including all the tweaks and polishing work from our User Experience team! And ofcourse this was done for all the controls in the suite at once.

I've prepared an application where you can see all the themes and to change browse them runtime. Check it out here:

http://demos.telerik.com/silverlight/themes

So how this all works?. It is very simple. We have a shared list of resources (brushes, styles, colors) that are used across all the control templates. When you modify the resources from that list - the change is automatically applied to all the controls. All you need to do is open the xaml file in Expression Blend and play a bit with the color pickers to achieve the desired color for your application :). 

This is not all. To ease you even more, we also prepared styles for the most commonly used Silverlight framework controls - ScrollViewer, RadioButton, CheckBox, ListBox and for the default Button control. This way you will not need to bother skinning them to look exactly as our Telerik controls. You will get the entire application skinned out of the box by using the Telerik themes!

I've also prepared a solution that will give you a quick start for creating your custom theme. (Download). The solution contains two projects. One is for the Custom Telerik theme, and the other is a Simple Silverlight application that uses that custom theme. Here are the steps that needs to done in order to create a custom styled theme:

1. Open the solution in Expression Blend.

2. Open the Common.xaml file  from the Themes folder of the "MyCustomTheme" project. 

3. Edit the brushes you need.

4. Compile and run the solution to see your new theme.

We are planning even more enhancements on the Theming mechanism and I will be glad to know what is your opinion about what has been done so far.