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

Runtime Theme Changing and Keyed Styles

3 Answers 51 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Audreyn Justus
Top achievements
Rank 1
Audreyn Justus asked on 23 Jun 2014, 06:08 PM
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
                    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 ?


 



3 Answers, 1 is accepted

Sort by
0
Audreyn Justus
Top achievements
Rank 1
answered on 23 Jun 2014, 06:16 PM
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
                    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]
0
Masha
Telerik team
answered on 24 Jun 2014, 07:24 AM
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
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
0
Audreyn Justus
Top achievements
Rank 1
answered on 24 Jun 2014, 12:56 PM
Thank you Masha

Perfect.
Tags
General Discussions
Asked by
Audreyn Justus
Top achievements
Rank 1
Answers by
Audreyn Justus
Top achievements
Rank 1
Masha
Telerik team
Share this question
or