WPF TreeViewItem Background

2
votes

How can I change the Background of a selected TreeViewItem when the TreeView (or the Application) looses Focus. A selected item by default has in this situation a light grey background.

EDIT: A try after first answer: But element with TargetName="Bd" will not be found.

<TreeView>
        <TreeView.Resources>
            <Style x:Key="{x:Type TreeViewItem}" TargetType="{x:Type TreeViewItem}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type TreeViewItem}">
                            <ControlTemplate.Triggers>
                                <MultiTrigger>
                                    <MultiTrigger.Conditions>
                                        <Condition Property="IsSelected" Value="True"/>
                                        <Condition Property="IsSelectionActive" Value="False"/>
                                    </MultiTrigger.Conditions>
                                    <Setter TargetName="Bd" Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
                                    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
                                </MultiTrigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </TreeView.Resources>

        <TreeViewItem Header="Test1" IsExpanded="True">
            <TreeViewItem Header="Test2" />
            <TreeViewItem Header="Test3" />
            <TreeViewItem Header="Test4" />
            <TreeViewItem Header="Test5" />
        </TreeViewItem>
    </TreeView>
3
wpfbackgroundfocustreeviewitem

3 Answers

5
votes

You need to modify the default style for TreeViewItem. Particularly, you need to modify the following trigger:

<Style x:Key="{x:Type TreeViewItem}"
       TargetType="{x:Type TreeViewItem}">
    ...
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TreeViewItem}">
                ...
                <ControlTemplate.Triggers>
                    ...
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsSelected"
                                       Value="true"/>
                            <Condition Property="IsSelectionActive"
                                       Value="false"/>
                        </MultiTrigger.Conditions>
                        <Setter TargetName="Bd"
                                Property="Background"
                                Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
                        <Setter Property="Foreground"
                                Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
                    </MultiTrigger>
                    ...
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    ...
</Style>

As you can see the trigger sets the background to {DynamicResource {x:Static SystemColors.ControlBrushKey}} if the item is focused and the selection is not active (focus is somewhere else).

Update:

The full style of TreeViewItem for Aero theme looks like this:

<Style x:Key="{x:Type TreeViewItem}"
       TargetType="{x:Type TreeViewItem}">
    <Setter Property="Background"
            Value="Transparent"/>
    <Setter Property="HorizontalContentAlignment"
            Value="{Binding Path=HorizontalContentAlignment,RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
    <Setter Property="VerticalContentAlignment"
            Value="{Binding Path=VerticalContentAlignment,RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
    <Setter Property="Padding"
            Value="1,0,0,0"/>
    <Setter Property="Foreground"
            Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
    <Setter Property="FocusVisualStyle"
            Value="{StaticResource TreeViewItemFocusVisual}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TreeViewItem}">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition MinWidth="19"
                                          Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <ToggleButton x:Name="Expander"
                                  Style="{StaticResource ExpandCollapseToggleStyle}"
                                  IsChecked="{Binding Path=IsExpanded,RelativeSource={RelativeSource TemplatedParent}}"
                                  ClickMode="Press"/>
                    <Border Name="Bd"
                            Grid.Column="1"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Padding="{TemplateBinding Padding}"
                            SnapsToDevicePixels="true">
                        <ContentPresenter x:Name="PART_Header"
                                          ContentSource="Header"
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </Border>
                    <ItemsPresenter x:Name="ItemsHost"
                                    Grid.Row="1"
                                    Grid.Column="1"
                                    Grid.ColumnSpan="2"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsExpanded"
                             Value="false">
                        <Setter TargetName="ItemsHost"
                                Property="Visibility"
                                Value="Collapsed"/>
                    </Trigger>
                    <Trigger Property="HasItems"
                             Value="false">
                        <Setter TargetName="Expander"
                                Property="Visibility"
                                Value="Hidden"/>
                    </Trigger>
                    <Trigger Property="IsSelected"
                             Value="true">
                        <Setter TargetName="Bd"
                                Property="Background"
                                Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                        <Setter Property="Foreground"
                                Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
                    </Trigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsSelected"
                                       Value="true"/>
                            <Condition Property="IsSelectionActive"
                                       Value="false"/>
                        </MultiTrigger.Conditions>
                        <Setter TargetName="Bd"
                                Property="Background"
                                Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
                        <Setter Property="Foreground"
                                Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
                    </MultiTrigger>
                    <Trigger Property="IsEnabled"
                             Value="false">
                        <Setter Property="Foreground"
                                Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
  <Style.Triggers>
    <Trigger Property="VirtualizingStackPanel.IsVirtualizing"
             Value="true">
      <Setter Property="ItemsPanel">
        <Setter.Value>
          <ItemsPanelTemplate>
            <VirtualizingStackPanel/>
          </ItemsPanelTemplate>
        </Setter.Value>
      </Setter>
    </Trigger>
  </Style.Triggers>
</Style>

For that you'll also need this:

<PathGeometry x:Key="TreeArrow">
    <PathGeometry.Figures>
        <PathFigureCollection>
            <PathFigure IsFilled="True"
                        StartPoint="0 0"
                        IsClosed="True">
                <PathFigure.Segments>
                    <PathSegmentCollection>
                        <LineSegment Point="0 6"/>
                        <LineSegment Point="6 0"/>
                    </PathSegmentCollection>
                </PathFigure.Segments>
            </PathFigure>
        </PathFigureCollection>
    </PathGeometry.Figures>
</PathGeometry>

<Style x:Key="ExpandCollapseToggleStyle"
       TargetType="{x:Type ToggleButton}">
    <Setter Property="Focusable"
            Value="False"/>
    <Setter Property="Width"
            Value="16"/>
    <Setter Property="Height"
            Value="16"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToggleButton}">
                <Border Width="16"
                        Height="16"
                        Background="Transparent"
                        Padding="5,5,5,5">
                    <Path x:Name="ExpandPath"
                          Fill="Transparent"
                          Stroke="#FF989898"
                          Data="{StaticResource TreeArrow}">
                        <Path.RenderTransform>
                            <RotateTransform Angle="135"
                                             CenterX="3"
                                             CenterY="3"/>
                        </Path.RenderTransform>
                    </Path>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver"
                             Value="True">
                        <Setter TargetName="ExpandPath"
                                Property="Stroke"
                                Value="#FF1BBBFA"/>
                        <Setter TargetName="ExpandPath"
                                Property="Fill"
                                Value="Transparent"/>
                    </Trigger>

                    <Trigger Property="IsChecked"
                             Value="True">
                        <Setter TargetName="ExpandPath"
                                Property="RenderTransform">
                            <Setter.Value>
                                <RotateTransform Angle="180"
                                                 CenterX="3"
                                                 CenterY="3"/>
                            </Setter.Value>
                        </Setter>
                        <Setter TargetName="ExpandPath"
                                Property="Fill"
                                Value="#FF595959"/>
                        <Setter TargetName="ExpandPath"
                                Property="Stroke"
                                Value="#FF262626"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

In all of this you need to modify only the part you are interested in (the background color if selection is inactive) and place those styles in the resources section in App.xaml in your main window.

3
votes

More easy way for your particular case exists. Like in ListBox, you can replace ControlBrush resource for TreeViewItem's using style:

<Style TargetType="TreeViewItem">
    <Style.Resources>
        <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="{x:Static SystemColors.HighlightColor}" Opacity=".4" />
    </Style.Resources>
</Style>

You can specify any other color. Opacity is suggested because if your have several TreeView/ListBox you can determine which one is focused. But of course, editing full style can bring you much more flexibility for future customizations.

Sample with gradients:

<Style TargetType="TreeViewItem">
    <Style.Resources>
        <LinearGradientBrush x:Key="{x:Static SystemColors.ControlBrushKey}" EndPoint='0 1'>
            <GradientStop Color='#AA00FF00' />
            <GradientStop Offset='1' Color='#AA007700' />
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" EndPoint='0 1'>
            <GradientStop Color='#AA00FF00' />
            <GradientStop Offset='1' Color='#AA007700' />
        </LinearGradientBrush>
    </Style.Resources>
</Style>
1
votes

If you don't want to override the default contol template, you can define your own template for the headers using textblock and apply the style in that template to the textblock itself (there's a small padding in the default control template of TreeViewItem, so you should also set it to zero to achieve pixel-perfection).

<TreeView.Resources>
    <Style TargetType="TreeViewItem">
        <Setter Property="Padding" Value="0"/>
        <Setter Property="HeaderTemplate">
            <Setter.Value>
                <DataTemplate>
                    <DataTemplate.Resources>
                        <Style TargetType="TextBlock">
                            <Style.Triggers>
                                <MultiDataTrigger>
                                    <MultiDataTrigger.Conditions>
                                        <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=TreeViewItem}}" Value="True"/>
                                        <Condition Binding="{Binding IsSelectionActive, RelativeSource={RelativeSource AncestorType=TreeViewItem}}" Value="False"/>
                                    </MultiDataTrigger.Conditions>
                                    <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
                                    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" />
                                </MultiDataTrigger>
                            </Style.Triggers>
                        </Style>
                    </DataTemplate.Resources>
                    <TextBlock Text="{Binding}"></TextBlock>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</TreeView.Resources>

<TreeViewItem Header="Test1" IsExpanded="True">
    <TreeViewItem Header="Test2" />
    <TreeViewItem Header="Test3" />
    <TreeViewItem Header="Test4" />
    <TreeViewItem Header="Test5" />
</TreeViewItem>