[Solved] How to apply themes on custom-component?

[kervin fye]

Hi:

I use themes mechanism of Q2 in my silverlight project. It works fine between radcontrols component.  Follow the way:

StyleManager.ApplicationTheme = ThemeManager.FromName("Vista");

As of bussiness demand, i add some custom components in my project. Some of them are totally new while others extend radcontrols component. Such as:

EFRegion:  a similar component to Expandar ( new  )

EFGrid:  extends RadGridView  (extends)

public class EFRegion : AnimatedExpander
{
    ......
    public EFRegion()
    {
        ......
        DefaultStyleKey = typeof( EFRegion );
        ......
    }
    ......
}

public class EFGrid : RadGridView
{
    ......
    public EFGrid()
    {
        ......
        DefaultStyleKey = typeof(EFGrid);
        ......
    }
    ......
}

I also create a theme project DeepBlue, like Vista/Summer/Office_Blue themes project in Q2. In DeepBlue project, i have the following style resources:

Generic.xaml

EFRegion.xaml

EFGrid.xaml

The contents of the above resources are:

Generic.xaml:

......
<ResourceDictionary.MergedDictionaries>
    ......
    <ResourceDictionary Source="/MyAssemblyName;component/Themes/EFGrid.xaml" />
    ......
</ResourceDictionary.MergedDictionaries>
......

EFRegion.xaml:
......
    <Style TargetType="local:EFRegion">
    </Style>
......

EFGrid.xaml:( the content is similar to RadGridView.xaml, the key difference is TargetType  )
......
<ControlTemplate x:Key="RadGridViewTemplate" TargetType="local:EFGrid">
......
<Style TargetType="local:EFGrid">
......

The DeepBlue class is :

[SuppressMessage("Microsoft.Naming", "CA1707:IdentifiersShouldNotContainUnderscores"), ThemeLocation(ThemeLocation.External)]
public class DeepBlue : Theme
{
    public DeepBlue()
    {
        base.Source = new Uri("/MyAssemblyName;component/Themes/Generic.xaml", UriKind.RelativeOrAbsolute);
    }
}

When I changed theme to Deepblue, I found that EFRegion and EFGrid didnot load the new style.

StyleManager.ApplicationTheme = ThemeManager.FromName("DeepBlue");

What is the correct way to apply theme to custom component? 

Please help!

Thanks

fye

[Valeri Hristov]

Hello fye,

The application themes in Telerik RadControls for Silverlight work slightly differently in Silverlight 3 than in Silverlight 2. We did slight adjustments because we wanted to split the XAML of the controls in separate files and in addition, simplify our code-behind of the theming mechanism. That's why there is an additional requirement for application themes: the XAML of each control should be accessible from a xaml file named after the assembly where the control is defined. If the XAML of the control is in a file, named after the control, in the theme assembly should be a xaml file, named after the control assembly, that references the control xaml via ResourceDictionary.MergedDictionaries.

This is simpler than it sounds, for example in your case, let's say that the custom controls are compiled in EF.Controls.dll. In the theme assembly you need to add a xaml file with build action Resource, named EF.Controls.xaml, that should contain the styles of EFGrid and EFRegion. If the styles of EFGrid and EFRegion are in separate files, the EF.Controls.xaml content should be something like this:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <ResourceDictionary.MergedDictionaries>
      <ResourceDictionary Source="/EF.Themes;Component/Themes/EFGrid.xaml" />
      <ResourceDictionary Source="/EF.Themes;Component/Themes/EFRegion.xaml" />
    </ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

Please, let me know if you need additional information.

Greetings,
Valeri Hristov
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.

[kervin fye]

Thanks teleric!

After I saw your post, I fonud that I didnot describe clearly in my question.

In fact, the DeepBlue theme project includes serveral style files:
Generic.xaml: the content is like EF.Controls.xaml suggested by you.

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<ResourceDictionary.MergedDictionaries>        ......

<ResourceDictionary Source="/DeepBlue.Themes;Component/Themes/EFGrid.xaml" />

<ResourceDictionary Source="/DeepBlue.Themes;Component/Themes/EFRegion.xaml" />        ......

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

and some other style files: EFGrid.xaml 、EFRegion.xaml and so on。

But it didnot work in this way.

[Valeri Hristov]

Hi,

In application theme mode, the theming engine ignores the xaml file name in the Source property and looks for xaml resources, named after the assembly, that contains the corresponding control, that's why the application theme does not work for your project. You need to create another xaml file with name equal to the name of the assembly, that holds the custom controls and add the merged dictionary references in that file.

Regards,
Valeri Hristov
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.