Create custom theme DLL for Q3 2009

[Greg]

How does one create a new theme DLL for the Q3 2009 release?

I want to create a custom theme for the Q3 release. All of the posts on the forum seem to indicate that new themes require a generic.xaml file that holds all theme information - however, this is not how it seems to be done in Q3.

What I want to do is copy a Telerik theme project - for example Windows7 project - and then modify it to my own color scheme. I then want to reference this new theme in my project.

When I try this, since the new theme is not referenced in the Telerik.Windows.Controls namespace it is not found.

Can you provide a walk-through that in detail discusses how to create a new theme DLL file that is used by Q3 controls?

[Deepak Subhedar]

I have a logged a case with support. As the compiled theme dll is small compared to the original dll's.
I did make changes to the resource files and the generated dll is not working with Q3 release.

An example to customize the resource file for Tile View , Grid and Outlook bar would be great from Telerik team.

[Fabiana]

I would like to create a new theme DLL file that will be used by Q3 controls... Do you have additional information about this topic ?

Thanks!

[Tihomir Petkov]

Hi guys,

We are currently working on improving our design-time and theming support and hopefully some of this work will be available with the upcoming service pack.

I prepared a sample project that demonstrates how to create a custom theme based on our WIndows7 theme and the Q3 version of RadControls. The sample is currently identical to the Windows7 one but it is setup so that you can modify it as needed. Please explore the solution and let me know if you have any difficulties.

Here are the steps you need to follow to create your custom theme, based on an existing Telerik one:

1. Create a new Silervlight project that will contain the custom theme.

2. Add references to all Telerik binaries that hold controls you want to style. In the case of a complete theme these would be all Telerik binaries plus the DLL of the Telerik theme that you will base your custom theme on.

3. Create a class that inherits Telerik.Windows.Controls.Theme.

4. Copy the "Themes" folder from the theme you want to use as a basis to the project of your custom theme. The default themes can be found in the Themes solution that comes with the source code of RadControls. Clients can download the source from our website under their client accounts.

5. In all files directly under the "Themes" folder that you just copied (total of 13 files), change the path in the ResourceDictionary to point to the name of your custom theme. E.g. for the Windows7 theme the change will be the following (in each of the files):

Before:
<ResourceDictionary Source="/Telerik.Windows.Themes.Windows7;Component/Themes/Windows7/Chart.xaml" />

After:
<ResourceDictionary Source="/MyCustomTheme;Component/Themes/Windows7/Chart.xaml" />

6. Add a generic file to the "Themes" folder that merges the rest of the ResourceDictionaries. In the attached sample this file is called "MyGeneric.xaml". You can refer to it for an example of how to merge the theme resources. With this step your custom theme is ready to roll.

7. Now you have to a reference the DLL of your custom theme, add an instance in the resources, and you are ready to use it in your Silverlight application. You can set it either individually to an element or globally for the aplication. Below is an example:

Individually:
telerik:StyleManager.Theme="{StaticResource Theme}"

Globally:
<customTheme:CustomThemeClass x:Key="Theme" IsApplicationTheme="True" Source="/MyCustomTheme;Component/Themes/MyGeneric.xaml"/>

Please refer to the attached sample and let me know if youhave any questions.

Kind regards,
Tihomir Petkov
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.

[Fabiana]

Hello, I just have one question: Can I do this code? Because now I did an application, and I added MyCustomTheme.dll reference. I added Windows7.dll theme as reference too in my application. If new Office_BlackTheme() everything is OK! But with new MyCustomTheme.Class1()... problems!

public MainPage()
        {

            InitializeComponent();

            //Set initial Theme
            //StyleManager.ApplicationTheme = new Office_BlackTheme();
           StyleManager.ApplicationTheme = new MyCustomTheme.Class1();


        }

[Tihomir Petkov]

Hello Fabiana,

If you want to set application theme in the constructor of your page, you need to do it as follows:

Class1 customTheme = new Class1();
customTheme.Source = new Uri("/MyCustomTheme;Component/Themes/MyGeneric.xaml", UriKind.Relative);
StyleManager.ApplicationTheme = customTheme;

InitializeComponent();

There are two important things to note here:
- you should set the theme before the InitializeComponent() method.
- setting an application theme would not set the styles of non-Telerik controls - you need to set their style manually.

Regards,
Tihomir Petkov
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.

[Fabiana]

Thank you very much Tihomir Petkov !!!
Perfect!!

[Greg]

Tihomir:

The example you provided DOES NOT WORK!!!!!!!!!!!!!

I wish you at telerik would TRY OUT your suggestions before you propose them as answers.

1) Follow all of the steps you indicated (which, by the way I had already figured out on my own) in your answer.
2) Open the solution in Expression Blend
3) Open Docking.xaml
4) Note INVALID XAML LINE 268, LINE 1681
5) Open LayoutTransferControl.XAML
6) Note numerous INVALID XAML
7) Where in your "example" is the custom class you talk about creating?
8) All you did in your "example" was put a reference to the existing Windows7.dll. This is certainly not the custom one - how could a dll possibly refer to itself in it's code?

You are truly wasting our time by providing non-working examples. You need to address the real problem - which is that custom theming DOES NOT WORK in Q3 2009.

[Tihomir Petkov]

Hello Greg,

I can assure you that the sample solution works because I built and tested it. The steps that I listed are exactly what I did to create the sample. I see you are upset by the error messages in Blend but please note that I haven't mentioned anything about Blend in my post. The reason for the messages is the difference between the way Visual Studio and Blend handle XAML code. We are currently working on improving the design-time support for our controls across Visual Studio and Blend. Please understand that with several versions of Visual Studio and Blend and considering the differences between each of these versions it is very difficult to provide seamless experience across all of them.

While I can understand your frustration with the Blend messages, I cannot agree that the sample that I provided does not work. If you build and run it you will see that the custom theme is applied. I specifically noted that the custom theme is identical to our Windows7 theme because it is based on that theme and I haven't made any modifications to it, so that you can start modifying it without having to search and revert any changes done by me. 

"7) Where in your "example" is the custom class you talk about creating?"
It is in the Class1.cs file under the MyCustomTheme project.

"8) All you did in your "example" was put a reference to the existing Windows7.dll."
Adding a reference to the DLL holding the theme that you want to use as a starting point is only a small part of creating your custom theme and you can see that by inspecting the sample I provided.

In the end, if you truly believe that I am wasting your time please state this explicitly and I will redirect this thread to one of my colleagues since I do not want to waste our clients' time.

Sincerely yours,
Tihomir Petkov
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.

[Taslim H]

Hi Tihomir,

I am trying to create a custom Theme DLL for Q2 SP1.

I followed the steps as mentioned by you. As mentioned in step # 5, I copied the Themes folder of Summer Theme. But as mentioned by you files that "all files directly under the "Themes" folder that you just copied (total of 13 files)", here I have more than 13 files and it contains Common.xaml

After this I changed the path in the ResourceDictionary. Added a generic file to Themes Folder. When I build the project I get few errors in Common.xaml, Expander.xaml, ProgressBar.xaml and Slider.xaml (and all these files come directly under the "Themes" folder).

I have no idea if I am in the right direction.

Could you please help me creating a custom theme DLL for Telerik Q2 SP1.

Thanks,
Taslim.

[banesh aursang]

Hi Tihimor,
I am creating a custom theme for my project.
I followed your steps mentioned in this thread and add ref. of custom theme to my project.
Instead of mentioning ref. globally I followed it as-

Class1 customTheme = new Class1();
customTheme.Source = new Uri("/MyCustomTheme;Component/Themes/MyGeneric.xaml", UriKind.Relative);
StyleManager.ApplicationTheme = customTheme;

But it is generating exception on the next line of this code i.e. InitializeComponent().
When I observed this exception it found that it is generating at the last/closing property of any control which is first on main.xaml
i.e. it is generating exception on first control creation .
Can you provide solution on this issue ?

[Pana]

Hi all,

Here is how you can create a theme after our last release.

First it's a good idea to base the theme on one of our existing themes instead of starting form zero. You can find the xaml files for our themes in the distribution packages. In the attached project I have added the Windows7 theme to use as example. Note that the Windows7 theme is not referenced anywhere in the main project. It's added to the solution so we can easily copy/paste in our custom theme.

Now to create a theme you will need to reference the Telerik.Windows.Controls.dll because the Theme class is there. Our custom themes have some constants hardcoded so they can easily be accessed from xaml. If you are about to create your custom theme you will need to create an Instance of Theme and set it's Source property... Now most people want to create custom class instead of creating Theme instance with it's Source set to xaml file. So you can check how to create a custom theme class in the CustomTheme project in the attached example. There is a class called CustomTheme.cs which defines a source to xaml file:

public class CustomTheme : Theme
{
    public CustomTheme()
    {
        this.Source = new Uri("/CustomTheme;component/Themes/CustomThemeGeneric.xaml", UriKind.Relative);
    }
}

Note that when you create an instance of CustomTheme now the Theme's Source will be automaically set in the CustomTheme constructor.

Now let's see what should be within the /Themes/CustomThemeGeneric.xaml file. Our themes use ResourceDictionaries to search for the styles for the controls and if they find a proper style they will attach it to the control (by setting the control's Style property in Silverlight). If a style is not present in the dictionary the control will fallback to the default Office_Black. In the example I wanted to use RadComboBox and RadColorPicker. So the CustomThemeGeneric.xaml had to contain definitions for these two styles. The easiest way is to include the xaml files for these controls (I copy-pasted them from the Windows7 included theme) and modify them.

Note that if you miss a resource in the xaml file or mispell the path to the generic you will get errors. Also the example contains definitions for controls in Telerik.Windows.Controls.Input so the custom theme project needs references to the Input dll. If you are about to add more controls you will need to reference the proper dlls.

Once You have extended the Theme class, set it's source to dictionary with styles and included the proper styles your theme will be ready to use the theme. How to apply it? In the CustomWindows7Theme project in the attached solution I'm using the CustomTheme. Note that CustomWindows7Theme references the CustomTheme project as well as the Telerik.Windows.Controls.dll and the Telerik.Windows.Controls.Input.dll. All I need to set an application theme is to create an instance of the CustomTheme class and point the style manager to the instance:

// Set the application theme before the InitializeComponent
Telerik.Windows.Controls.Theme appTheme = new CustomTheme.CustomTheme();
Telerik.Windows.Controls.StyleManager.ApplicationTheme = appTheme;

Note that this is done in the App.xaml.cs before InitializeComponent().  If you set application theme after you create the controls the theme won't take effect.

Also if you don't want to create a custom theme you can add it in the Resources:

<Grid.Resources>
    <customTheme:CustomTheme x:Key="theme" />
</Grid.Resources>

And use the StyleManager to set a theme to a single control:

<telerikInput:RadComboBox Margin="10" SelectedIndex="0" telerik:StyleManager.Theme="{StaticResource theme}">

I hope this works for you.

Greetings,
Panayot
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.

[Oleg]

Hi All,

I've created custom theme based on Windows7 theme and use it with the telerik (Vista, Office_*, ...) themes to load one of them at run time by selecting appropriate theme in combobox. I've noticed that my custom theme loads too slow compare to telerik themes.

Do you know any ways to improve performance?

[steve]

Hi Tihomir Petkov,

Thanks for your post it was very helpful.

Following your instructions I have set up a custom theme project. I have also followed another post to create a custom content control at CustomContentControl . In creating this project a generic xaml file is created in a theme folder. My question is how can I reformat that control using my custom theme project. I have tried creating a new resource dictionary with a copy of generic.xaml in a CustomControls folder it in the custom them project and added that file to the merged resource dictionary with

<ResourceDictionary Source="MyCustomTheme;Component/Themes/CustomControls/Container.xaml" />

However when runing the custom theme project with a custom content control added i get the following error message

"{System.Windows.Markup.XamlParseException: Attribute MyCustomTheme;Component/Themes/CustomControls/Container.xaml value is out of range. [Line: 20 Position: 36]
at System.Windows.Application.LoadComponent(Object component, Uri resourceLocator)
at SilverlightApplication1.MainPage.InitializeComponent()
at SilverlightApplication1.MainPage..ctor()}"

Am I just pointing my merged resource folder at the wrong location or am i missing something else.

[Pana]

Hi Stephen and Oleg,

Stephen, you probably get the error because of that:

<ResourceDictionary Source="MyCustomTheme;Component/Themes/CustomControls/Container.xaml" />

Should be:

<ResourceDictionary Source="/MyCustomTheme;Component/Themes/CustomControls/Container.xaml" />

Tell me if it still fails.

Oleg, custom themes should load no slower than our themes. Also if you include just part of the controls in the custom theme it should be even smaller. Are you sure that you don't have big images in the theme, reference other resources that may be loaded with the theme or have xaml that throws exceptions and slows performance?

Kind regards,
Panayot
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.

[steve]

Thanks Panayot

That was the problem (my typing).

My sln builds now, but the theme file I have included in the custom theme project is ignored in favour of the generic theme file in the custom content user control project. How can i change this? 

Do I need to change the constructor on the custom content user control, at present it looks like this

public ContainerCtrl() : base()

{

this.DefaultStyleKey = typeof(ContainerCtrl);

}

Thanks for your help

[Pana]

Hi Steve,

Can you attach your solution in a support ticket so we can investigate the issue. It would be much more easier for us to find out the problem.

Kind regards,
Panayot
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.

[steve]

Hi Panayot

Thanks for your help. I will create a support ticket. Any light that you can shed on what i am doing wrong will be gratefully received.

Cheers Steve

[Nikolay]

Hello steve,

We believe that once we have your sample project we will be able to provide more to the point details.

All the best,
Nick
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.

[Martin Oostendorp]

Is this the prefered way of customizing a style for telerik controls for WPF?
We too are trying to customize the default theme, but based on the office black theme. 
Is there a CustomThemeBasedOfficeBlack for Telerik WPF?

[Pana]

Hi Martin Oostendorp,

The custom theme is required if you want to be able to change themes at runtime. There are several ways to customize our controls and all they have pros and cons. If you want to make some minor changes or you need just a small portion of our controls customized, especially when you don't want to change themes at runtime than in WPF may be better to use implicit styles to alter some templates here and there. Most of our controls are blend friendly and can easily be edited there without the requirement of the full XAML files. Some larger controls may have issues though. We don't keep the default theme (office black) XAML files separated in a theme file but we may provide XAML code for some controls if they fail to edit in expression blend.

Also this may be a little off-topic but there are some materials about styling and theming for WPF here: http://www.telerik.com/help/wpf/introduction.html

Sincerely yours,
Panayot
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.

[Martin Oostendorp]

Minor changes won't do in our situation. We need to make drastic changes in any of the provided templates to match the theme we currently use.  
The Office black theme seems to come closest.
I've noticed in a previous post (http://www.telerik.com/community/forums/wpf/gridview/custom-theme-for-the-gridview.aspx) an attached 'customtheme-wpf-officeblack.zip' file created for 'RadControls for WPF Q2 2009 SP2'? Just wondering if i can use that one for Q3 2009 SP2 or if there is a specific one for Q3 (Method 1). Is this the best way to change to theme for all rad controls?

We're using expression blend to edit our theme and i've looked at the suggested method to change a theme in blend described here (http://www.telerik.com/help/wpf/common-styling-appearance-edit-control-templates-blend.html). This does not seem like a good method change the overall theme for all rad controls. This would mean replacing all radcontrols with standard wpf when possible then use the above method to match the rad controls to the theme we already have (Still tedious using this method). This does not seem right to me.

[Pana]

Hello Martin Oostendorp,

The link is for our WPF controls while we have such help for our Silverlight suite: http://www.telerik.com/help/silverlight/introduction.html

I'm sorry I measled you. Try to edit the controls you need and if some of them fail we will provide xaml.

All the best,
Panayot
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Sail Sain]

Hello I have used your example of custom theme  for the Charting control.All the Chart controls (Legend,Chart Area )are loaded but Actual chart is not loaded as in figure ,

Can you please help on this problem

Sail  

[Sia]

Hello Sail Sain,

You need to remove the following transformation from the Bars' Template in the "Chart.xaml" file:

<Canvas.RenderTransform>
    <ScaleTransform x:Name="PART_AnimationTransform" ScaleY="0" />
</Canvas.RenderTransform>

and your bars will appear.

Hope this helps.

Regards,
Sia
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.