Applying Telerik Themes to Custom Controls based off Standard WPF Controls

[David]

Hi,

I have a custom control based off a standard WPF control:

Public Class SendButton
    Inherits System.Windows.Controls.Button

I have also themed standard WPF controls to adopt the current Telerik theme in the Application.Resources of the main app:

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation">
    <Style
        TargetType="{x:Type Button}">
        <Setter
            Property="telerik:StyleManager.Theme"
            Value="{x:Static telerik:StyleManager.ApplicationTheme}" />
    </Style>

Standard WPF controls successfully inherit the Telerik theme, however custom controls based off standard WPF controls do not inherit the Telerik theme.

How can I theme my custom controls to inherit the Telerik theme? I do not want to the change the inheritance of the custom control to a Telerik control to keep the controls as lightweight as possible (the custom controls do not require the additional features of the Telerik controls). I would like to maintain a consistent user experience over the entire solution and theme my custom controls with the Telerik theme.

Kind regards,
Dave.

[Vanya Pavlova]

Hello David,

 
You have created an implict style targeted at a Button control. In WPF this is considered as typed style, which only has an implict key. Indeed there is no difference between the appearance of the standard Button control and Telerik RadButton control in all themes. You may do the following:

CustomButton

Public Class CustomButton
    Inherits RadButton
    Public Sub New()
        Me.DefaultStyleKey = GetType(CustomButton)
    End Sub
End Class

MainWindow.xaml

<Window x:Class="WpfApplication21.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        xmlns:local="clr-namespace:WpfApplication21"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.Resources>
            <Style x:Key="ss" TargetType="telerik:RadButton">
                <Setter Property="telerik:StyleManager.Theme" Value="Metro"/>
            </Style>
        </Grid.Resources>
        <local:CustomButton Height="22" Style="{StaticResource ss}" Content="Button"/>
    </Grid>
</Window>

Then your button will inherit the theme by RadButton and you may use it in the way you need. If you mark this style as an implict this would not work, because the implict style is typed and can be applied only to a specific instance (in our case only to RadButton). The explicit style works, because is not a typed, it may be applied to the inherited types. Please keep in mind that the Telerik theming mechanism works with several Microsoft controls such as Button, CheckBox, TextBox etc. It would be better if you inherit our controls if you need to use a particular Telerik theme. In my opinion the best option is to create a style targeted directly at your custom button rather than to its parent type.   


Hope this helps!

Greetings,
Vanya Pavlova
the Telerik team

[David]

Hi,

For anyone else who is interested in doing something similar, here's what I ended up doing (using a style targeted directly at the custom control as suggested by Vanya):

1. I created a custom control "SendButton.vb" with the following:

Public Class SendButton
    Inherits System.Windows.Controls.Button

    Shared Sub New()
        DefaultStyleKeyProperty.OverrideMetadata(GetType(SendButton), New FrameworkPropertyMetadata(GetType(SendButton)))
    End Sub

2. I then created a resource dictionary "Themes/Generic.xaml" copied from %ProgramFiles%\Themes\%ThemeName%\Themes\%SubThemeName%\System.Windows.Button.xaml with the following changes:

2a. Add line:

xmlns:my="clr-namespace:MyProject"

2b. Delete line:

xmlns:external="clr-namespace:Telerik.Windows.Controls.External"

2c. Change line:

<Style TargetType="Button" x:Key="{telerik:ThemeResourceKey ThemeType=external:%ThemeName%ThemeExternal, ElementType=Button}">

to:

<Style TargetType="{x:Type my:SendButton}">

Disadvantages with this method is that a local copy of the theme is copied and edited from the base Telerik themes, and therefore are not automatically updated if a new version of the controls are used. This example also only converts one predetermined theme. I've not tried any fancy logic to allow for user-selectable themes (The control may also need to inherit RadButton instead of the system button for dynamic theme changes - I don't know because I'm not providing this functionality in my solution and therefore haven't tried).

The upside is that I can use the control in my solution and the theme automatically comes along with any implicit specification in the xaml.

I hope this helps anyone else.

Kind regards,
Dave.