Different styles for single element using the same theme

[Tom Kenny]

I am currently putting together a custom theme for telerik items and I am wondering if there is a way to apply different styles to the same object, but having the style being pulled from the same custom theme.

An example of what I'm trying to do would be I have two radbuttons on a page which are both pulling from a custom theme. Within that custom theme there are two separate definitions of buttonchrome, one blue one red. I am wondering if there is any way to set a unique idenfier that would apply the different buttonchrome to the radbutton. Something along the lines of using a css class, is there anything like that I can use?

Thanks in advance

[Miroslav]

Hi Tom Kenny,

No, unfortunately there is no css-like selection logic for the themes.

I can suggest two things:
- Inherit the Telerik button and create separate classes for the different styles, like BlueButton / GreenButton.

- OR create the different styles and give them keys, then you can merge them in the place where you need them and use the Style={StaticResource key}

Best wishes,
Miroslav
the Telerik team

[Tom Kenny]

Thanks for the help.

In regards to the sub classing is there a way I can contain that within the theme, say within the button.xaml just copy an exsiting section of code and paste it to target the specific subclass? If so, what would I set the target type to?

[Miroslav]

Hi Tom Kenny,

If I understand your question correctly -

You need to have a style with just a TargetType="my:ButtonRed" for example . The style can have be BasedOn another style. If you want to change just a single element from the control template, the whole control template needs to be copied.

Did I understand your question correctly?

All the best,
Miroslav
the Telerik team

[Tom Kenny]

Mirosla,

It might be possible but just to make sure that we are on the same page I'll try to explain as clearly as possible what I'm trying to do. I would attach the sample project but it is currently too big.

I have a project where there are two buttons, one normal RadButton and another subclass of the RabButton called MyRadButton. Also there are two defined buttonchromes Red.xaml and Blue.xaml. What I am trying to achive is the normal RadButton to use the Red buttonchrome applied to it while the MyRadButton use the Blue buttonchrome. So I am wondering if there is a way that the theme can determine what verion of RadButton it is looking at, be it the subclass or normal, then apply the proper buttonchrome.

The reason I asked about the TargetType was because this seemed like the most likely way to differentiate what verion to apply which buttonchrome to.

If there is any way I can send you the example project I've made let me know and I'll get it to you.

Thanks alot

[Miroslav]

Hello Tom Kenny,

Yes, the TargetType is the way to go.

Once you have created a control, you can place its styles in themes/generic.xaml within the same assembly.

Using the Telerik's application theme mechanism is a bit more involved. I created a project for you where it is used, hopefully it will get you on the right track.

Kind regards,
Miroslav
the Telerik team

[Tom Kenny]

Thanks!
I've got something working because of that example but I just have one more thing to solve regarding this. When using the .dll in an external project how would I access the custom versions of the components that I created. This is currently what I have and while it works within the sample project it currently isn't working in my external project:

<UserControl x:Class="CustomThemeTest.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
    xmlns:telerikInput="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"
    xmlns:my="clr-namespace:CustomTheme;assembly=CustomTheme"
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
    <Grid x:Name="LayoutRoot">
        <telerik:RadButton  Tag="test" Content="RadButton" Margin="8,8,557,0" RenderTransformOrigin="0.516,0.455" Height="25" Width="75" VerticalAlignment="Top" HorizontalAlignment="Left"/>
        <my:MyButton Content="MySplitButton" Height="25" Width="110" Margin="258,8,272,0" VerticalAlignment="Top" d:LayoutOverrides="Height" />
        <my:MySpitButton Content="MySplitButton" Height="25" Width="110" Margin="258,8,272,0" VerticalAlignment="Top" d:LayoutOverrides="Height"/>
    </Grid>
</UserControl>

It continues to throw the error that 'MyButton' and 'MySplitButton' does not exist in XML namespace 'clr-namespace:CustomTheme;assembly=CustomTheme'

And this is how my assebly for my custom theme currently looks like at the moment, and this works within the sample testing project that I've built:

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Telerik.Windows.Controls;

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

    [Themable]
    public class MyButton : RadButton
    {
        public MyButton()
        {
            DefaultStyleKey = typeof(MyButton);
        }
    }

    [Themable]
    public class MySplitButton:RadSplitButton
    {
        public MySplitButton()
        {
            DefaultStyleKey = typeof(MySplitButton);
        }
    }
}

[Miroslav]

Hello Tom Kenny,

I am not sure if you made this error when pasting the code but in Xaml you are referring to

MySpitButton

While in code it is defined as

MySplitButton

This will not explain why the MyButton is not recognized though.

I will be happy to look at your test project and see why it does not work as expected. Can you open a support ticket and attach it there?

Greetings,
Miroslav
the Telerik team