Search code examples
wpfxamlresourcedictionaryskinskinning

How to merge custom TreeViewItem style and skin?


I would like to make my custom TreeViewItem style skinable. I tried to follow tutorials on the matter, but I have problems abstracting from the simple case to the one I have with multiple resource dictionaries in multiple files.

I defined a custom style for my TreeViewItem in the file:

<ResourceDictionary  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="*****namespace omitted******">

    <Style x:Key="GroupedTreeViewItemStyle" TargetType="{x:Type TreeViewItem}">

        <!-- Most of the content omitted, see below as an example of skin reference -->

        <ControlTemplate TargetType="{x:Type TreeViewItem}">
            <ControlTemplate.Triggers>
                <Trigger Property="IsSelected" Value="true">
                    <Setter Property="Background" TargetName="Bd" Value="{DynamicResource BackgroundHighlightBrush}"/>
                    <Setter Property="Foreground" Value="{DynamicResource TextHighlightBrush}"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Style>
</ResourceDictionary>

Then we have our default skin, defining the two brushes we need:

<ResourceDictionary  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="*****namespace omitted*****">

    <!-- Text Color brushes -->
    <SolidColorBrush x:Key="TextHighlightBrush" Color="White"/>


    <!-- Box Color Brushes -->
    <SolidColorBrush x:Key="BackgroundHighlightBrush" Color="Black"/>

</ResourceDictionary>

Lastly I try to add the two resource dictionaries to the tree view item resources like follows:

<TreeView Name="treeView" ItemsSource="{Binding}" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
    <TreeView.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary>
                    <Style TargetType="TreeViewItem">
                        <Setter Property="IsExpanded"  Value="{Binding Expanded, Mode=TwoWay}"/>
                    </Style>
                </ResourceDictionary>
                <ResourceDictionary  Source="../../Skins/Default.xaml"/>
                <ResourceDictionary  Source="GroupedTreeViewItemStyle.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </TreeView.Resources>
</TreeView>

But none of the resource dictionaries gets applied. Do you know why?

Thanks in advance for your help!


Solution

  • GroupedTreeViewItemStyle exists but not applied anywhere. You can derive default TreeViewItem style from that style using BasedOn property:

    <TreeView.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary  Source="../../Skins/Default.xaml"/>
                <ResourceDictionary  Source="GroupedTreeViewItemStyle.xaml"/>
            </ResourceDictionary.MergedDictionaries>
    
            <Style TargetType="TreeViewItem" BasedOn="{StaticResource GroupedTreeViewItemStyle}">
                <Setter Property="IsExpanded"  Value="{Binding Expanded, Mode=TwoWay}"/>
            </Style>
        </ResourceDictionary>
    </TreeView.Resources>