Runtime Theme Changing and Keyed Styles

[Audreyn Justus]

Based on the example on http://www.telerik.com/help/wpf/styling-apperance-themes-runtime.html

When using styles based on Telerik ones (these styles are merged with the app resources every time the theme changes):

Content of MyStyles.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Style TargetType="{x:Type telerik:RadButton}" x:Key="BT" BasedOn="{StaticResource RadButtonStyle}">
        <Setter Property="Height" Value="40"/>
    </Style>

    <Style TargetType="{x:Type telerik:RadButton}" BasedOn="{StaticResource RadButtonStyle}">
        <Setter Property="Margin" Value="5"/>
        <Setter Property="Height" Value="30"/>
    </Style>


</ResourceDictionary>

and code to change the theme 

private void Windows7_Click(object sender, RoutedEventArgs e)
        {
            Application.Current.Resources.MergedDictionaries.Clear();
            Application.Current.Resources.MergedDictionaries.Add(new ResourceDictionary()
            {
                Source = new Uri("/Telerik.Windows.Themes.Windows7;component/Themes/System.Windows.xaml", UriKind.RelativeOrAbsolute)
            });
            Application.Current.Resources.MergedDictionaries.Add(new ResourceDictionary()
            {
                Source = new Uri("/Telerik.Windows.Themes.Windows7;component/Themes/Telerik.Windows.Controls.xaml", UriKind.RelativeOrAbsolute)
            });
            Application.Current.Resources.MergedDictionaries.Add(new ResourceDictionary()
            {
                Source = new Uri("/Telerik.Windows.Themes.Windows7;component/Themes/Telerik.Windows.Controls.Input.xaml", UriKind.RelativeOrAbsolute)
            });

            Application.Current.Resources.MergedDictionaries.Add(new ResourceDictionary()
            {
                Source = new Uri("MyStyles.xaml", UriKind.RelativeOrAbsolute)
            });


        }

Main form XAML

<Window x:Class="WpfThemes.MainWindow"
                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"
                Title="MainWindow" Width="800" Height="600">
    <Window.Resources>

    </Window.Resources>
    <Grid x:Name="LayoutRoot" Background="White" >
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <StackPanel Orientation="Horizontal" Background="#FFE5E5E5" HorizontalAlignment="Stretch">
            <telerik:RadButton Content="Office Black" VerticalAlignment="Center" Width="110"  Margin="10" Click="OfficeBlack_Click" />
            <telerik:RadButton Content="Windows8" VerticalAlignment="Center" Width="110" Margin="10" Click="Windows8_Click" />
            <telerik:RadButton Content="Windows 7" VerticalAlignment="Center" Width="110"  Margin="10" Click="Windows7_Click" />
        </StackPanel>

        <StackPanel Orientation="Vertical" Grid.Row="1" Margin="20" HorizontalAlignment="Left">
            <telerik:RadComboBox Width="230" Margin="10">
                <telerik:RadComboBoxItem Content="Item 1" />
                <telerik:RadComboBoxItem Content="Item 2" />
                <telerik:RadComboBoxItem Content="Item 3" />
                <telerik:RadComboBoxItem Content="Item 4" />
                <telerik:RadComboBoxItem Content="Item 5" />
            </telerik:RadComboBox>

            <telerik:RadDateTimePicker Width="230" Margin="10" IsDropDownOpen="True" />

            <StackPanel Orientation="Horizontal">
                <telerik:RadButton>Button with Type Style</telerik:RadButton>
                <telerik:RadButton Style="{StaticResource BT}">Button With Keyed Style</telerik:RadButton>
            </StackPanel>
        </StackPanel>
    </Grid>
</Window>

Why the first style is corrected applied when the theme changes and the second one (Keyed) not?

 What is the reason to this behavior and is there an workaround ?


 

[Audreyn Justus]

I me[quote]Audreyn Justus said:Based on the example on http://www.telerik.com/help/wpf/styling-apperance-themes-runtime.html

When using styles based on Telerik ones (these styles are merged with the app resources every time the theme changes):

Content of MyStyles.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Style TargetType="{x:Type telerik:RadButton}" x:Key="BT" BasedOn="{StaticResource RadButtonStyle}">
        <Setter Property="Height" Value="40"/>
    </Style>

    <Style TargetType="{x:Type telerik:RadButton}" BasedOn="{StaticResource RadButtonStyle}">
        <Setter Property="Margin" Value="5"/>
        <Setter Property="Height" Value="30"/>
    </Style>


</ResourceDictionary>

and code to change the theme 

private void Windows7_Click(object sender, RoutedEventArgs e)
        {
            Application.Current.Resources.MergedDictionaries.Clear();
            Application.Current.Resources.MergedDictionaries.Add(new ResourceDictionary()
            {
                Source = new Uri("/Telerik.Windows.Themes.Windows7;component/Themes/System.Windows.xaml", UriKind.RelativeOrAbsolute)
            });
            Application.Current.Resources.MergedDictionaries.Add(new ResourceDictionary()
            {
                Source = new Uri("/Telerik.Windows.Themes.Windows7;component/Themes/Telerik.Windows.Controls.xaml", UriKind.RelativeOrAbsolute)
            });
            Application.Current.Resources.MergedDictionaries.Add(new ResourceDictionary()
            {
                Source = new Uri("/Telerik.Windows.Themes.Windows7;component/Themes/Telerik.Windows.Controls.Input.xaml", UriKind.RelativeOrAbsolute)
            });

            Application.Current.Resources.MergedDictionaries.Add(new ResourceDictionary()
            {
                Source = new Uri("MyStyles.xaml", UriKind.RelativeOrAbsolute)
            });


        }

Main form XAML

<Window x:Class="WpfThemes.MainWindow"
                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"
                Title="MainWindow" Width="800" Height="600">
    <Window.Resources>

    </Window.Resources>
    <Grid x:Name="LayoutRoot" Background="White" >
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <StackPanel Orientation="Horizontal" Background="#FFE5E5E5" HorizontalAlignment="Stretch">
            <telerik:RadButton Content="Office Black" VerticalAlignment="Center" Width="110"  Margin="10" Click="OfficeBlack_Click" />
            <telerik:RadButton Content="Windows8" VerticalAlignment="Center" Width="110" Margin="10" Click="Windows8_Click" />
            <telerik:RadButton Content="Windows 7" VerticalAlignment="Center" Width="110"  Margin="10" Click="Windows7_Click" />
        </StackPanel>

        <StackPanel Orientation="Vertical" Grid.Row="1" Margin="20" HorizontalAlignment="Left">
            <telerik:RadComboBox Width="230" Margin="10">
                <telerik:RadComboBoxItem Content="Item 1" />
                <telerik:RadComboBoxItem Content="Item 2" />
                <telerik:RadComboBoxItem Content="Item 3" />
                <telerik:RadComboBoxItem Content="Item 4" />
                <telerik:RadComboBoxItem Content="Item 5" />
            </telerik:RadComboBox>

            <telerik:RadDateTimePicker Width="230" Margin="10" IsDropDownOpen="True" />

            <StackPanel Orientation="Horizontal">
                <telerik:RadButton>Button with Type Style</telerik:RadButton>
                <telerik:RadButton Style="{StaticResource BT}">Button With Keyed Style</telerik:RadButton>
            </StackPanel>
        </StackPanel>
    </Grid>
</Window>

Why the second style is corrected applied when the theme changes and the first one (Keyed) not?

 What is the reason to this behavior and is there an workaround ?


 



[/quote]

[Masha]

Hi Audreyn ,

If you set the x:Key to your custom styles you need to call it like this

<telerik:RadButton Style="{DynamicResource BT}">Button With Keyed Style</telerik:RadButton>

in order your style to be applied with the theme. Simply remove StaticResource with DynamicResource and everything should work as expected.

I hope this information will be helpful.


Regards,
Masha
Telerik

 

 

[Audreyn Justus]

Thank you Masha

Perfect.