Telerik blogs

I know many of you like our WinForms "Desert" theme:
 
image
 
I like it very much too. But I've been using it for quite some time and it started to kind of bore me. I just wish it wasn't so orange-ish. Then I got impressed by the UI of Windows Live's set of desktop applications, which have the cool option to change the skin color - on the fly:
 
image image
 
Its very neat and I just can't get bored using this kind of UI.

Our Windows Form components on the other hand have a very extensible way of skinning, but still, you are limited to selecting one of the predefined themes or take the not-so-short way to fully customizing an existing theme. If you are keeping an eye from time to time at our roadmap, you probably know that we are on our way to extend the list of built-in themes, but still, this does not help the UI be as easily customizable as the above mentioned MS products.

Well, not any more!

For the upcoming Q3 2008 release we have been working closely with our UX guys to implement a color blending feature within our products that works similar to the way the professional graphics design tools do.

The result is an new elegant approach to customizing the appearance of your applications. And it works very straightforward. Lets take a look again at the Desert theme. We have smooth dark orange color all over. But if we take away all the orange and replace it with other color(s) we get these new cool-looking themes: 
 
Theme_Color_Blending_All_Big
 
Here is what's happening underneath in short. To apply the color blend, TPF will search through the theme's color RGB settings, convert them to HSL color space and calculate the new RGB color values, based on the newly selected color Hue. The code used to achieve all this looks similar to the following:

Theme currentTheme = Telerik.WinControls.ThemeResolutionService.GetTheme("Desert");
currentTheme.AddColorBlend("BaseColor", HslColor.FromColor(Color.Orange));
currentTheme.ThemeProperties["BaseColor"] = HslColor.FromColor(Color.PaleGreen); 

 
That's all! And since the theme modification is taking place at runtime you will be able to see all controls on the form changing their appearance corresponding to the new color blend base-color selection.

What about themes, like the MS Office-resembling Blue that has a totally different set of colors based on the visual state of each piece of UI? Well, you can add several color blends, at once:
 
ColorBlending_OfficeBlue
 

And finally if the resulting skin still needs some touches, you can export the modified theme data to xml files, and tweak them using the Visual Style Builder app, as much as you wish.

I believe that by using this powerful approach you will be able to design your application with an UI that can be personalized by the end user, but still looks very professional.

I will be really exited to hear what you think about about Theme Color Blending.


Comments

Comments are disabled in preview mode.