Change WPF treeViewItem Background color when selected but lost focus

Question

I am trying to change a TreeViewItem background color when it selected but lost focus. I saw some similar questions like: WPF TreeViewItem Background , but I couldn\'t use it...

Answer 1

In reference to this other post, the ControlBrushKey did not work for me. The InactiveSelectionHighlightBrushKey did, however. Also setting the InactiveSelectionHighlightTextBrushKey got around the changing text color.

My complete solution:

<TreeView.Resources>
    <!-- Style the inactive selection the same as active -->
    <SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}"
                     Color="{DynamicResource {x:Static SystemColors.HighlightColorKey}}" />
    <SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightTextBrushKey}"
                     Color="{DynamicResource {x:Static SystemColors.HighlightTextColorKey}}"/>
</TreeView.Resources>

Answer 2

In default template of TreeViewItem, there is MultiDataTrigger which set the color to ControlBrushKey when item is not in focus which you can override in your TreeView resources like this:

<TreeView.ItemContainerStyle>
   <Style TargetType="{x:Type TreeViewItem}">
      <Style.Resources>
         <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}"
                       Color="#FF3399FF"/>
      </Style.Resources>
      ...
   </Style>
<TreeView.ItemContainerStyle>

then there is no need to override ControlTemplate of TreeViewItem.

But, however it also set text of treeViewItem to ControlTextBrushKey which by default is black. So, with only ControlBrushKey overriden, you will get it work like this:

Without Focus:

With Focus

As you can see brush is over-ridden properly but if you override ControlTextBrushKey and set it to white than treeView Item's won't be visible since controlTextBrush will be set to white.

---

However, in case you want exact same look of TreeViewItem like it has with focus, you have to override control template and remove that MultiDataTrigger from the default template.

Default template will go like this:

    <TreeView>
        <TreeView.ItemContainerStyle>
            <Style TargetType="TreeViewItem">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="TreeViewItem">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" MinWidth="19" />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition/>
                                </Grid.RowDefinitions>
                                <ToggleButton IsChecked="False"
                                              ClickMode="Press"
                                              Name="Expander">
                                    <ToggleButton.Style>
                                        <Style TargetType="ToggleButton">
                                            <Style.Resources>
                                                <ResourceDictionary />
                                            </Style.Resources>
                                            <Setter Property="UIElement.Focusable" Value="False"/>
                                            <Setter Property="FrameworkElement.Width" Value="16"/>
                                            <Setter Property="FrameworkElement.Height" Value="16"/>
                                            <Setter Property="Control.Template">
                                                <Setter.Value>
                                                    <ControlTemplate TargetType="ToggleButton">
                                                        <Border Padding="5,5,5,5"
                                                                Background="#00FFFFFF"
                                                                Width="16"
                                                                Height="16">
                                                            <Path Fill="#FFFFFFFF"
                                                                  Stroke="#FF818181"
                                                                  Name="ExpandPath">
                                                                <Path.Data>
                                                                    <PathGeometry Figures="M0,0L0,6L6,0z" />
                                                                </Path.Data>
                                                                <Path.RenderTransform>
                                                                    <RotateTransform Angle="135" CenterX="3" CenterY="3" />
                                                                </Path.RenderTransform>
                                                            </Path>
                                                        </Border>
                                                        <ControlTemplate.Triggers>
                                                            <Trigger Property="ToggleButton.IsChecked" Value="True">
                                                                <Setter Property="UIElement.RenderTransform" TargetName="ExpandPath">
                                                                    <Setter.Value>
                                                                        <RotateTransform Angle="180" CenterX="3" CenterY="3" />
                                                                    </Setter.Value>
                                                                </Setter>
                                                                <Setter Property="Shape.Fill" TargetName="ExpandPath">
                                                                    <Setter.Value>
                                                                        <SolidColorBrush>#FF595959</SolidColorBrush>
                                                                    </Setter.Value>
                                                                </Setter>
                                                                <Setter Property="Shape.Stroke" TargetName="ExpandPath">
                                                                    <Setter.Value>
                                                                        <SolidColorBrush>#FF262626</SolidColorBrush>
                                                                    </Setter.Value>
                                                                </Setter>
                                                            </Trigger>
                                                            <Trigger Property="UIElement.IsMouseOver" Value="True">
                                                                <Setter Property="Shape.Stroke" TargetName="ExpandPath">
                                                                    <Setter.Value>
                                                                        <SolidColorBrush>#FF27C7F7</SolidColorBrush>
                                                                    </Setter.Value>
                                                                </Setter>
                                                                <Setter Property="Shape.Fill" TargetName="ExpandPath">
                                                                    <Setter.Value>
                                                                        <SolidColorBrush>#FFCCEEFB</SolidColorBrush>
                                                                    </Setter.Value>
                                                                </Setter>
                                                            </Trigger>
                                                            <MultiTrigger>
                                                                <MultiTrigger.Conditions>
                                                                    <Condition Property="UIElement.IsMouseOver" Value="True"/>
                                                                    <Condition Property="ToggleButton.IsChecked" Value="True"/>
                                                                </MultiTrigger.Conditions>
                                                                <Setter Property="Shape.Stroke" TargetName="ExpandPath">
                                                                    <Setter.Value>
                                                                        <SolidColorBrush>#FF1CC4F7</SolidColorBrush>
                                                                    </Setter.Value>
                                                                </Setter>
                                                                <Setter Property="Shape.Fill" TargetName="ExpandPath">
                                                                    <Setter.Value>
                                                                        <SolidColorBrush>#FF82DFFB</SolidColorBrush>
                                                                    </Setter.Value>
                                                                </Setter>
                                                            </MultiTrigger>
                                                        </ControlTemplate.Triggers>
                                                    </ControlTemplate>
                                                </Setter.Value>
                                            </Setter>
                                        </Style>
                                    </ToggleButton.Style>
                                </ToggleButton>
                                <Border BorderThickness="{TemplateBinding Border.BorderThickness}"
                                        Padding="{TemplateBinding Control.Padding}"
                                        BorderBrush="{TemplateBinding Border.BorderBrush}"
                                        Background="{TemplateBinding Panel.Background}"
                                        Name="Bd"
                                        SnapsToDevicePixels="True"
                                        Grid.Column="1">
                                    <ContentPresenter Content="{TemplateBinding HeaderedContentControl.Header}"
                                                      ContentTemplate="{TemplateBinding HeaderedContentControl.HeaderTemplate}"
                                                      ContentStringFormat="{TemplateBinding HeaderedItemsControl.HeaderStringFormat}"
                                                      ContentSource="Header"
                                                      Name="PART_Header"
                                                      HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}"
                                                      SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
                                </Border>
                                <ItemsPresenter Name="ItemsHost"
                                                Grid.Column="1"
                                                Grid.Row="1"
                                                Grid.ColumnSpan="2" />
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="TreeViewItem.IsExpanded" Value="False">
                                    <Setter Property="UIElement.Visibility" TargetName="ItemsHost" Value="Collapsed"/>
                                </Trigger>
                                <Trigger Property="ItemsControl.HasItems" Value="False">
                                    <Setter Property="UIElement.Visibility" TargetName="Expander" Value="Hidden"/>
                                </Trigger>
                                <Trigger Property="TreeViewItem.IsSelected" Value="True">
                                    <Setter Property="Panel.Background" TargetName="Bd">
                                        <Setter.Value>
                                            <DynamicResource ResourceKey="{x:Static SystemColors.HighlightBrushKey}" />
                                        </Setter.Value>
                                    </Setter>
                                    <Setter Property="TextElement.Foreground">
                                        <Setter.Value>
                                            <DynamicResource ResourceKey="{x:Static SystemColors.HighlightTextBrushKey}" />
                                        </Setter.Value>
                                    </Setter>
                                </Trigger>
                                <Trigger Property="UIElement.IsEnabled" Value="False">
                                    <Setter Property="TextElement.Foreground">
                                        <Setter.Value>
                                            <DynamicResource ResourceKey="{x:Static SystemColors.GrayTextBrushKey}" />
                                        </Setter.Value>
                                    </Setter>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </TreeView.ItemContainerStyle>
        <TreeViewItem Header="Item1"/>
        <TreeViewItem Header="Item2"/>
    </TreeView>