Treeview Item Background overriding Highlight Brush

Question

I'm trying to setup a treeview control with a rounded border and a background for every treeview item. However while I have also overridden the x:Static SystemColors.HighlightBrushKey with a linear gradient.

However while doing this I noticed that if I set a background to the treeview item, my highlightbrushkey does not get applied anymore. Can you please tell me how to achieve this?

Below is my code:

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

    <Page.Resources>  

        <LinearGradientBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFFFEF" Offset="0"/>
                <GradientStop Color="#FFF7D3" Offset="0.2580"/>
                <GradientStop Color="#FFEFB2" Offset="0.3870"/>
                <GradientStop Color="#FFEFB2" Offset="1"/>
            </LinearGradientBrush>

 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" x:Key="TreeViewItemBackground">
            <GradientStop Color="#FFFAFFFF" Offset="0"/>
            <GradientStop Color="#FFFAFAFA" Offset="0.2580"/>
            <GradientStop Color="#FFF7F7F7" Offset="0.3870"/>
            <GradientStop Color="#FFF4F4F4" Offset="1"/>
        </LinearGradientBrush>

            <LinearGradientBrush x:Key="{x:Static SystemColors.ControlBrushKey}" EndPoint="0,1" StartPoint="0,0">
                <GradientStop Color="#FFF8F8F8" Offset="0"/>
                <GradientStop Color="#FFE5E5E5" Offset="1"/>
            </LinearGradientBrush>
            <SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Black" />
            <SolidColorBrush x:Key="{x:Static SystemColors.ControlTextBrushKey}" Color="Black" />        
            <TreeView x:Name="GroupView" ItemsSource="{Binding}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" MinWidth="150"  Margin="3">
                        <TreeView.Resources>
                            <HierarchicalDataTemplate DataType="{x:Type GridSplitterTextTrim:Group}" ItemsSource="{Binding Items}">                                       
                                        <Border BorderBrush="#FFEAEEE8"   BorderThickness="1" CornerRadius="3" Margin="-1" Background="{StaticResource TreeViewItemBackground}" >
                                            <StackPanel Orientation="Horizontal"  Background="Transparent" Margin="1">
                                                <TextBlock Text="{Binding Path=Name}" TextTrimming="WordEllipsis" Margin="3" MaxWidth="150"  Width="{Binding ActualWidth, ElementName=GroupView, Converter={StaticResource TreeViewWidthConverter}}" ToolTip="{Binding Name}" />
                                            </StackPanel>
                                        </Border>                                           
                                </HierarchicalDataTemplate>
                            <DataTemplate DataType="{x:Type GridSplitterTextTrim:Entry}" >
                                <Border BorderBrush="#C0C0C0" BorderThickness="1" CornerRadius="3" Margin="-1">
                                    <StackPanel Orientation="Horizontal" Background="Transparent" Margin="1">
                                        <TextBlock Text="{Binding Path=Name}" TextTrimming="WordEllipsis" Margin="3" MaxWidth="132"  Width="{Binding ActualWidth, ElementName=GroupView, Converter={StaticResource TreeViewWidthConverter}}" ToolTip="{Binding Name}" />
                                    </StackPanel>
                                </Border>
                            </DataTemplate>
                        </TreeView.Resources>
                        <TreeView.ItemContainerStyle>
                            <Style TargetType="{x:Type TreeViewItem}">
                                <Setter Property="BorderThickness" Value="1"/>
                                <Setter Property="Margin" Value="2"/>
                                <Style.Triggers>
                                    <Trigger Property="IsSelected" Value="True">
                                       <!-- <Setter Property="BorderBrush" Value="#adc6e5"/>-->                                       
                                        </Trigger>
                                    <MultiTrigger>
                                        <MultiTrigger.Conditions>
                                            <Condition Property="IsSelected" Value="True"/>
                                            <Condition Property="IsSelectionActive" Value="False"/>
                                        </MultiTrigger.Conditions>
                                        <Setter Property="BorderBrush" Value="LightGray"/>
                                    </MultiTrigger>
                                </Style.Triggers>
                                <Style.Resources>
                                    <Style TargetType="Border">
                                        <Setter Property="CornerRadius" Value="3"/>                                      
                                    </Style>
                                </Style.Resources>
                            </Style>
                        </TreeView.ItemContainerStyle>
                    </TreeView>
     </Page.Resources>  
    </Page>  

Couple of things to note:

• I use a converter to set the width of the textblock. This is to achieve the text trimming.

• For the sake of this post, I have set one of my data templates without a background color and it just works fine with the highlighting, where in when I set the backgound in the first template it does't highlight with the highlight brush.

Thanks in advance, -Mike

Answer 1

You're DataTemplate's background is drawing on top of the container's selection. This is why it is hiding the selection color. You could add a DataTrigger to your DataTemplate to clear the background when the item is selected:

<DataTemplate>
    <Border x:Name="bg" Background="Red">
     ...
    </Border>
    <DataTemplate.Triggers>
        <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType={x:Type TreeViewItem}}}" 
                     Value="True">
            <Setter TargetName="bg" Property="Background" Value="{x:Null}" />
        </DataTrigger>
    </DataTemplate.Triggers>
</DataTemplate>