20

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...

Here is my tree view Xaml code:

> <UserControl x:Class="Ednfi.Setup.Presentation.Views.TreeViewViews.StationTree" > xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" > xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > xmlns:behaviour="clr-namespace:Ednfi.Setup.Presentation.Extensions;assembly=Ednfi.Setup.Presentation" > xmlns:nodes="clr-namespace:Ednfi.Setup.Presentation.ViewModels.TreeViewViewModels.Nodes" > mc:Ignorable="d" > xmlns:d="http://schemas.microsoft.com/expression/blend/2008" > xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" > d:DesignHeight="226" d:DesignWidth="227" > xmlns:ml="clr-namespace:Ednfi.Setup.Presentation.ml_resources"> > <TreeView Margin="10 0 10 20" ItemsSource="{Binding Path=Root.Children}" VirtualizingStackPanel.IsVirtualizing="True" > VirtualizingStackPanel.VirtualizationMode="Recycling"> > > > <TreeView.ItemContainerStyle> > <Style TargetType="{x:Type TreeViewItem}"> > <Setter Property="IsSelected" Value="{Binding Path=IsSelected, Mode=TwoWay}"/> > <Setter Property="IsExpanded" Value="{Binding Path=IsExpanded, Mode=TwoWay}" /> > </Style> > </TreeView.ItemContainerStyle> > <TreeView.Resources> > <Style 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="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" /> > <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" /> > <Setter Property="behaviour:TreeViewItemBehavior.IsBroughtIntoViewWhenSelected" > Value="True" /> > <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" IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource > TemplatedParent}}" ClickMode="Press" /> > <Border Grid.Column="1" x:Name="Selection_Border" Background="{TemplateBinding Background}" > BorderBrush="{TemplateBinding BorderBrush}" > BorderThickness="{TemplateBinding BorderThickness}" > Padding="{TemplateBinding Padding}"> > <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" > x:Name="PART_Header" ContentSource="Header" /> > </Border> > <ItemsPresenter Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1" x:Name="ItemsHost" /> > </Grid> > <ControlTemplate.Triggers> > <Trigger Property="IsExpanded" Value="false"> > <Setter Property="Visibility" Value="Collapsed" TargetName="ItemsHost" /> > </Trigger> > <Trigger Property="HasItems" Value="false"> > <Setter Property="Visibility" Value="Hidden" TargetName="Expander" /> > </Trigger> > <Trigger Property="IsSelected" Value="true"> > <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" > TargetName="Selection_Border" /> > <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 Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" > TargetName="Selection_Border" /> > <Setter Property="Foreground" Value="{DynamicResource {x:Static > SystemColors.HighlightTextBrushKey}}" /> > </MultiTrigger> > <Trigger Property="IsEnabled" Value="false"> > <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" /> > </Trigger> > </ControlTemplate.Triggers> > </ControlTemplate> > </Setter.Value> > </Setter> > </Style> > <!-- Style for the ToggleButton control used to expand/collapse a TreeViewItem control --> > <Style TargetType="{x:Type ToggleButton}"> > <Setter Property="Focusable" Value="False" /> > <Setter Property="Width" Value="19" /> > <Setter Property="Height" Value="13" /> > <Setter Property="Template"> > <Setter.Value> > <ControlTemplate TargetType="{x:Type ToggleButton}"> > <Border Width="19" Height="13" Background="#00FFFFFF" x:Name="Border"> > <Border Width="9" Height="9" x:Name="Border1" SnapsToDevicePixels="True" BorderBrush="#FF9495A2" > BorderThickness="1,1,1,1" CornerRadius="1,1,1,1"> > <Border.Background> > <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> > <GradientStop Color="#FFFFFFFF" Offset="0.4" /> > <GradientStop Color="#FFC6CEDA" Offset="1" /> > </LinearGradientBrush> > </Border.Background> > <Path Fill="#FF000000" Margin="1,1,1,1" x:Name="ExpandPath" Data="M0,2L0,3 2,3 2,5 3,5 3,3 > 5,3 5,2 3,2 3,0 2,0 2,2z" /> > </Border> > </Border> > <ControlTemplate.Triggers> > <Trigger Property="IsChecked" Value="True"> > <Setter Property="Data" Value="M0,2L0,3 5,3 5,2z" TargetName="ExpandPath" /> > </Trigger> > </ControlTemplate.Triggers> > </ControlTemplate> > </Setter.Value> > </Setter> > </Style> > <DataTemplate DataType="{x:Type nodes:MonitorNode}"> > <StackPanel Orientation="Horizontal" Margin="0 2 0 0"> > <Image Source="{Binding ImageSource}" Width="16" Height="16" Margin="0 0 3 0" /> > <TextBlock Text="{x:Static ml:MultiLang._157}" x:Name="ML_0048" /> > <TextBlock Text="{Binding ID}" /> > <TextBlock Text="{x:Static ml:MultiLang._158}" x:Name="ML_0050" /> > <TextBlock Text="{Binding Name}" /> > </StackPanel> > </DataTemplate> > <HierarchicalDataTemplate DataType="{x:Type nodes:StationNode}" ItemsSource="{Binding Children}"> > <StackPanel Orientation="Horizontal" Margin="0 2 0 0"> > <StackPanel.ContextMenu> > <ContextMenu HasDropShadow="True"> > <MenuItem Header="{x:Static ml:MultiLang._160}" Command="{Binding CopyMonitorsCommand}" > x:Name="ML_0055" /> > <MenuItem Header="{x:Static ml:MultiLang._159}" Command="{Binding PasteMonitorsCommand}" > x:Name="ML_0056" /> > <MenuItem Header="{x:Static ml:MultiLang._162}" Command="{Binding CopyStationsCommand}" > x:Name="ML_0057" /> > <MenuItem Header="{x:Static ml:MultiLang._161}" Command="{Binding PasteStationsCommand}" > x:Name="ML_0058" /> > </ContextMenu> > </StackPanel.ContextMenu> > <Image Source="{Binding ImageSource}" Width="16" Height="16" Margin="0 0 3 0" /> > <TextBlock Text="{x:Static ml:MultiLang._157}" x:Name="ML_0060" /> > <TextBlock Text="{Binding ID}" /> > <TextBlock Text="{x:Static ml:MultiLang._158}" x:Name="ML_0062" /> > <TextBlock Text="{Binding Name}" /> > </StackPanel> > </HierarchicalDataTemplate> > <HierarchicalDataTemplate DataType="{x:Type nodes:FilteringNode}" ItemsSource="{Binding Children}"> > <StackPanel Orientation="Horizontal" Margin="0 2 0 0"> > <Image Source="{Binding ImageSource}" Width="16" Height="16" Margin="0 0 3 0" /> > <TextBlock Text="{Binding Name}" /> > </StackPanel> > </HierarchicalDataTemplate> > </TreeView.Resources> > </TreeView> > </UserControl>

The current background color looks blue when selected.

But when still selected, but lost focus the background color is gray.

I just want it to stay blue !!! Thank you for your help.

Improve this question

2 Answers 2

Reset to default
41

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>
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

23

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:

enter image description here

With Focus

enter image description here

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>
Improve this answer

5 Comments

It worked !!!!!! Thank you very much !!! I don't have enough reputation to vote up for you. Sorry....
No problem S.K. Glad to help..!!
P.S, I got over the foregroud color issue by painting it black when selected.
this works for me (as far a the color goes) except the toggle button won't open the item anymore. :-(
So I changed the IsChecked on the ToggleButton to IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}}" and now it's working.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.