Applying Telerik Themes to Custom Controls based off Standard WPF Controls

3 posts, 1 answers
  1. David
    David avatar
    57 posts
    Member since:
    Apr 2011

    Posted 03 Aug 2011 Link to this post

    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. Answer
    Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 04 Aug 2011 Link to this post

    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 >>

  3. David
    David avatar
    57 posts
    Member since:
    Apr 2011

    Posted 09 Aug 2011 Link to this post

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