Styling all Silverlight Telerik controls with XAML, not DLL reference

[Brian Swiger]

First off, big fan of the Telerik Silverlight controls so far.  Infragistics is garbage...and had to deal with them already.

I'm struggling to style the whole set of Silverlight controls.  I'm successful referencing the 3, built-in theme DLLs (used the Vista theme, specifically), yet I'm trying to reference a theme by XAML only.

My attempts so far have included:

- Grabbing the XAML of all the controls from the Telerik installation and attempting to reference them (where's the main "Theme" XAML file?)
- Using the Silverlight Toolkits ImplicitStyleManager to apply a "Theme" file that I built that references all the resources dictionaries provided in XAML by the Telerik XAML theme
- Using the Telerik Theme objects, etc. to apply the XAML Vista theme

My application is a simple Silverlight LOB app..with a Docking control, a left-side...resizable nav pane...and a right-side content pane.  I'm using Telerik grids, combos, Microsoft textboxes/radiobuttons, etc.   The Telerik "Vista" theme appears to style the MS controls as well...and I'm excited by that. 

I'm doing all this because the Vista Telerik theme is close but not complete for what my client wants.  I'd like to reference a Theme XAML file from my project and have all the other independent control XAML files there to easily update.

Long-time dev here...and Silverlight and WPF are pretty slick so far.  Thanks for making it cooler with dependable UI controls.

Thanks!

[Brian Swiger]

Any thoughts on styling the Telerik Silverlight controls using referenced XAML so it may be easily updated?

I guess I could add the fact I've followed this guide with no success (and there is no generic.xaml file that I can find):

http://www.telerik.com/help/silverlight/extend-and-modify-builtin-themes.html

And yet, this one does work for easily setting the theme...yet I want a customized version of the Vista theme:

http://www.telerik.com/help/silverlight/setting-built-in-themes.html


I've set a reference to C:\Program Files\Telerik\RadControls for Silverlight Q2 2009\Themes\Vista\Vista.csproj in my Silverlight 3 application.  I do not see a "generic.xaml" as the above link mentions, yet I modified the TreeViewItem.xaml inside the Theme project and compiled it.

Yet, when I set the application-wide theme in code-behind as the above URLs explain, it does not work:

public partial class App : Application
{
     public App()
     {
Telerik.Windows.Controls.StyleManager.ApplicationTheme =
                 new Theme(Uri("/Telerik.Windows.Themes.CustomTheme;component/Themes/generic.xaml",
                             UriKind.Relative));
           InitializeComponent();
     }
}

Thanks again.

[Hristo]

Hello Brian Swiger,

You have two options on creating themes:
1. Open our Themes solution and directly modify the xaml in files.
2. Create new project and adding styles (xaml) for controls you want to style.

When using option 1 all you have to do is modify xaml like you need and build the project. In your case you will get new Telerik.Windows.Themes.Vista.dll assembly. Then in your application just add in the app constructor:

StyleManager.ApplicationTheme = new VistaTheme();

This will be enough to apply the theme globally to all RadControls. However this will not modify the style for Microsoft controls like CheckBox or Button. You will have to explicit set its theme using Theme property:

<CheckBox Context="Test" telerik:StyleManager.Theme="Vista" />

You will have to do this for all non RadControls.

Option 2 is when you create you custom theme project that doesn't follow the approach from our themes.
What you need to do is create xaml files for controls that you want to style then combine them in one file (like generic.xaml) using ResourceDictionary.MergedDictionaries.
Then you create new Theme object with source pointing to the generic.xaml file (that merges all your xaml files from the theme project) like this:

Telerik.Windows.Controls.StyleManager.ApplicationTheme =
   new Theme(Uri("/Telerik.Windows.Themes.CustomTheme;component/Themes/generic.xaml", UriKind.Relative));

Again it will not modify non Telerik controls styles so you have to change their themes manually (like in Option 1).

The tricky part when using option 2 is that you should have references to all assemblies that you are styling. This means that if you have Style for RadMenu in your theme project you should have reference in Telerik.Windows.Controls.Navigation.dll in your application or you will get an exception.

There is 3 option where you could create new theme project but following our approach - you will have Telerik.Windows.Control.xaml file that will merge only styles for controls declared in Telerik.Windows.Control.dll assembly, Telerik.Windows.Control.Input.xaml file merging only styles for controls declared in Telerik.Windows.Control.Input.dll assembly etc.

Then you can inherit from Theme project and set Theme location attribute to BuiltIn like this:

[ThemeLocation(ThemeLocation.BuiltIn)]
public class CustomTheme : Theme
{
    public CustomTheme()
    {
            this.Source = new Uri
 // AssemblyName ; generic.xaml is irrelevant because when there is ThemeLocation.BuiltIn attribute because we are modifing the Source property in Silverlight
("/Telerik.Windows.Themes.CustomTheme;component/themes/Generic.xaml", UriKind.RelativeOrAbsolute);
    }
}

I hope that this will clarify the theming mechanism.
Let us know if you need more help.

Kind regards,
Hristo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Cheng Lim Sek]

Hi Hristo,

Could you provide me the sample project for the three options you mention previously?

Your help will be appreciate.

Best Regards,
Cheng Lim

[Dimitrina]

Hi Cheng Lim Sek,

Please visit this link:
http://www.telerik.com/community/forums/silverlight/radcontrols-for-silverlight-3-official/create-custom-theme-dll-for-q3-2009.aspx#1007817 
It explains how to make a custom theme.In the attached file you can find an example with Custom Theme for Vista theme. If you have any further question please do not hesitate to ask.

Sincerely yours,
Dimitrina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.