Runtime Theme Changing and Keyed Styles

4 posts, 0 answers
  1. Audreyn Justus
    Audreyn Justus avatar
    9 posts
    Member since:
    Oct 2005

    Posted 23 Jun 2014 Link to this post

    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 ?


     



  2. Audreyn Justus
    Audreyn Justus avatar
    9 posts
    Member since:
    Oct 2005

    Posted 23 Jun 2014 in reply to Audreyn Justus Link to this post

    I me
    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 ?


     



  3. UI for WPF is Visual Studio 2017 Ready
  4. Masha
    Admin
    Masha avatar
    355 posts

    Posted 24 Jun 2014 Link to this post

    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.
     
  5. Audreyn Justus
    Audreyn Justus avatar
    9 posts
    Member since:
    Oct 2005

    Posted 24 Jun 2014 Link to this post

    Thank you Masha

    Perfect.
Back to Top