This is a migrated thread and some comments may be shown as answers.

Applying Telerik Themes to Custom Controls based off Standard WPF Controls

2 Answers 622 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 2
David asked on 03 Aug 2011, 10:33 AM
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
    <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.

2 Answers, 1 is accepted

Sort by
0
Accepted
Vanya Pavlova
Telerik team
answered on 04 Aug 2011, 09:55 AM
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:local="clr-namespace:WpfApplication21"
        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

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get now >>

0
David
Top achievements
Rank 2
answered on 09 Aug 2011, 10:51 AM
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.
Tags
General Discussions
Asked by
David
Top achievements
Rank 2
Answers by
Vanya Pavlova
Telerik team
David
Top achievements
Rank 2
Share this question
or