Load implicit theme runtime with RadTreeViewItem

[luc]

Hi,

I try to change the telerik theme at runtime following the thread about implicit theme. It's work well but for the treeView control I lost the background color of selected item when switching from one theme to another. This behavior occurs only if i set a ItemContainerStyle.

My style is declared like this :

<Style x:Key="FolderItemStyle" TargetType="{x:Type telerik:RadTreeViewItem}" BasedOn="{StaticResource RadTreeViewItemStyle}">

<Setter Property="Foreground" Value="Blue"/>

<Setter Property="FontStyle" Value="Normal"/>

</Style>

and my treeview is declare to use this style

<telerik:RadTreeView Grid.Row="1" Grid.Column="0" ItemContainerStyle="{StaticResource FolderItemStyle}">

The first time, when the MergedDictionaries is built, all work fine but when i clear and load new theme at runtime the background color of selected item disappear, if i re-switch to original theme it's working again.

A sample project can be foundhere : https://drive.google.com/file/d/0B6ihaOKSuZdBeVdNVnlqVFVXWkk/edit?usp=sharing.

Thanks

[Tina Stancheva]

Hello Luc,

When you're changing the theme, you will also have to make sure and update the custom RadTreeViewItem style as well. Basically it will have to be based on the new theme RadTreeViewItemStyle.

In order to do that, it is better to place the custom style in the Windows8.xaml and Office2013.xaml ResourceDictionaries and make sure to clear the entire _resourceDictionary content in the SharedDictionaryManager.LoadTheme() method:

private static void LoadTheme(Uri theme)
{
    if (_sharedDictionary != null)
    {
        _sharedDictionary.Clear();
        _sharedDictionary.MergedDictionaries.Clear();
        _sharedDictionary.MergedDictionaries.Add((ResourceDictionary)Application.LoadComponent(theme));
    }
}

I modified your solution and I attached it here. Please have a look at it and let us know if you have more questions.

Regards,
Tina Stancheva
Telerik

[luc]

Hi Tina,

Hi Tina,

I saw in your sample that you define the tree view item style in the office2013 and windows8.xaml file (like that it's work). But my goal is to be able to do that in the mainwindow.xaml file, because i need a style with some model bindings and i think that right place is in the mainwindow.xaml file.

If you try to apply a style to the RadTreeViewItem in mainwindow.xaml, you will fall in same issue than me. For sample, i want modify the color of the foreground item, so i define a new style based on telerik style :

    <Window.Resources>
        <Style x:Key="Style1" TargetType="{x:Type telerik:RadTreeViewItem}" BasedOn="{StaticResource RadTreeViewItemStyle}">
            <Setter Property="Foreground" Value="Blue"/>
        </Style>
    </Window.Resources>

I use this style in the RadTreeView definition :
<telerik:RadTreeView Grid.Row="1" Grid.Column="0" ItemContainerStyle="{StaticResource Style1}">

With this modification when i switch from office2013 to windows8, I lost the background color of tree view item in windows8 style.

FYI my complete style is :

<Style x:Key="FolderItemStyle" TargetType="{x:Type telerik:RadTreeViewItem}" BasedOn="{StaticResource RadTreeViewItemStyle}">
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="FontStyle" Value="Normal"/>
            <Setter Property="IsExpanded" Value="{Binding Path=Expanded, Mode=TwoWay}"/>
            
            <Setter Property="DefaultImageSrc" Value="pack://application:,,,/Redky.Modules.Navigation;component/Images/folder.png"/>
            <Setter Property="ExpandedImageSrc" Value="pack://application:,,,/Redky.Modules.Navigation;component/Images/folderopen.png"/>
            
            <Setter Property="IsEditable" Value="{Binding Path=IsEditable}"/>
            <Setter Property="IsInEditMode" Value="{Binding IsInEditMode,Mode=TwoWay}"/>
            <Setter Property="IsSelected" Value="{Binding Selected,Mode=TwoWay}"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="telerik:RadContextMenu.ContextMenu">
                <Setter.Value>
                    <telerik:RadContextMenu InheritDataContext="False"  DataContext="{Binding UIElement.ParentTreeView.DataContext, RelativeSource={RelativeSource Self}}">
                        <!-- Binding sur une commande de l'item -->
                        <telerik:RadMenuItem Header="New" Command="{Binding Path=NewCommand}" CommandParameter="{Binding Path=Menu.UIElement.Item, RelativeSource={RelativeSource Self}}"/>
                        <telerik:RadMenuItem Header="Edit" Command="{Binding Path=EditCommand}" CommandParameter="{Binding Path=Menu.UIElement.Item, RelativeSource={RelativeSource Self}}"/>
                        <telerik:RadMenuItem Header="Delete" Command="{Binding Path=DeleteCommand}" CommandParameter="{Binding Path=Menu.UIElement.Item, RelativeSource={RelativeSource Self}}"/>
                    </telerik:RadContextMenu>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsExpanded" Value="True">
                    <Trigger.Setters>
                        <!--<Setter Property="Foreground" Value="Blue"/>-->
                        <Setter Property="FontStyle" Value="Italic"/>
                    </Trigger.Setters>
                </Trigger>
            </Style.Triggers>
        </Style>

Regards
Luc

[Tina Stancheva]

Hi Luc,

Thank you for getting back to us and elaborating on your requirements. I can understand why you'd rather have the style defined in MainWindow.xaml however you will still have to make sure and update this style when you dynamically change the themes.

This means that you will have to clear the MainWindow Resources and the RadTreeView ItemContainerStyle properties before changing the theme and you will then have to reapply them to make sure the custom style is based on the proper new theme style.

This is why it might be better to not use an ItemContainerStyle and make your custom style implicit. It would also be easier to move the style in a separate ResourceDictionary as it's easier to clear the MergedDictionaries collection in the MainWindow.Resources and then add the resource dictionary back as soon as the theme changes.

I demonstrated this approach in the attached sample. As the TreeViewItemStyle.xaml contains the custom RadTreeViewItem style and is defined within the MainWindow Resources, you can use bindings as you need to. The DataContext of the MainWindow component will be properly propagated to the style setters and properties.

Regards,
Tina Stancheva
Telerik

[luc]

Hi Tina,

Thank you, it's a little bit more complicated but it's worked.
Regards
Luc