How to apply themes on custom-component?

4 posts, 0 answers
  1. kervin fye
    kervin fye avatar
    6 posts
    Member since:
    Sep 2009

    Posted 11 Sep 2009 Link to this post

    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

  2. Valeri Hristov
    Admin
    Valeri Hristov avatar
    2252 posts

    Posted 11 Sep 2009 Link to this post

    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.
  3. kervin fye
    kervin fye avatar
    6 posts
    Member since:
    Sep 2009

    Posted 13 Sep 2009 Link to this post

    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.
  4. Valeri Hristov
    Admin
    Valeri Hristov avatar
    2252 posts

    Posted 14 Sep 2009 Link to this post

    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.
Back to Top