question

JoergDebus avatar image
0 Votes"
JoergDebus asked AbdulrahmanHASANATO-7628 edited

How to change the Background property of a selected TreeViewItem using Styles/Triggers

Hi all,
I would like to change the Background color of selected items of ListViewItems. Many tries but no result. Only replacing the whole ControlTemplate works. This is brute force, which I want to avoid.

Any hint or a solution?

TIA
JD

windows-wpf
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

PeterFleischer-3316 avatar image
1 Vote"
PeterFleischer-3316 answered AbdulrahmanHASANATO-7628 edited

Hi Uwe,
you can set another colors for HighlightTextBrushKey and HighlightBrushKey in my previous demo:

 <TreeView ItemsSource="{Binding View}">
   <TreeView.ItemContainerStyle>
     <Style TargetType="{x:Type TreeViewItem}">
       <Style.Resources>
         <SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="White" />
         <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Red" />
       </Style.Resources>
       <Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" />
       <Setter Property="Background" Value="Transparent"/>
       <Style.Triggers>
         <DataTrigger Binding="{Binding IsSelected}" Value="True">
           <Setter Property="Background" Value="Yellow"/>
         </DataTrigger>
       </Style.Triggers>
     </Style>
   </TreeView.ItemContainerStyle>
   <TreeView.ItemTemplate>
     <HierarchicalDataTemplate ItemsSource="{Binding Children}">
       <StackPanel Orientation="Horizontal">
         <TextBlock VerticalAlignment="Center" Text="{Binding Name}" />
       </StackPanel>
     </HierarchicalDataTemplate>
   </TreeView.ItemTemplate>
 </TreeView>

82652-x.png



x.png (14.8 KiB)
· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi Peter,
awesome solution. 👌😉. I was not aware that we can supersede a StaticResource addressed with a x:Static XAML-extension.

Thanx again and best regards
Uwe

0 Votes 0 ·

Hi,
I already set the background perfectly but I have a question which is how to set it from right to left, I mean how to stretch the background to fit all the space from right to left, not only the text.
Here's an example picture.
Thanks for the help in advance.

I want to apply the same thing for all children of the TreeView not only the first

176062-1.png


0 Votes 0 ·
1.png (4.2 KiB)
PeterFleischer-3316 avatar image
0 Votes"
PeterFleischer-3316 answered JoergDebus commented

Hi,
you can use Trigger in ItemContainerStyle like in following demo:

 <Window x:Class="Window085"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:local="clr-namespace:WpfApp1.WpfApp085"
         mc:Ignorable="d"
         Title="Window085" Height="450" Width="800">
   <Window.DataContext>
     <local:ViewModel/>
   </Window.DataContext>
   <Grid>
     <TreeView ItemsSource="{Binding View}">
       <TreeView.ItemContainerStyle>
         <Style TargetType="{x:Type TreeViewItem}">
           <Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" />
           <Setter Property="Background" Value="Transparent"/>
           <Style.Triggers>
             <DataTrigger Binding="{Binding IsSelected}" Value="True">
               <Setter Property="Background" Value="Yellow"/>
             </DataTrigger>
           </Style.Triggers>
         </Style>
       </TreeView.ItemContainerStyle>
       <TreeView.ItemTemplate>
         <HierarchicalDataTemplate ItemsSource="{Binding Children}">
           <StackPanel Orientation="Horizontal">
             <TextBlock VerticalAlignment="Center" Text="{Binding Name}" />
           </StackPanel>
         </HierarchicalDataTemplate>
       </TreeView.ItemTemplate>
     </TreeView>
   </Grid>
 </Window>

And ViewModel:

 Imports System.Collections.ObjectModel
 Imports System.ComponentModel
    
 Namespace WpfApp085
   Public Class ViewModel
    
     Private ReadOnly col As New ObservableCollection(Of Data)
     Private ReadOnly cvs As New CollectionViewSource
    
     Public ReadOnly Property View As ICollectionView
       Get
         If cvs.Source Is Nothing Then GetData()
         Return cvs.View
       End Get
     End Property
    
     Private Sub GetData()
       Dim rnd As New Random
       For i = 1 To 100
         Dim d As New Data With {.Name = $"Node {i}", .IsSelected = rnd.NextDouble > 0.5}
         For k = 1 To 10
           d.Children.Add(New Data With {.Name = $"Node {i} {k}", .IsSelected = rnd.NextDouble > 0.5})
         Next
         col.Add(d)
       Next
       cvs.Source = col
     End Sub
   End Class
    
   Public Class Data
     Public Property Name As String
     Public Property IsExpanded As Boolean = True
     Public Property IsSelected As Boolean
     Public Property Children As New ObservableCollection(Of Data)
   End Class
    
 End Namespace

Result:

82126-x.png





x.png (12.3 KiB)
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi Peter,
thanx for your informative answer.

Unfortunately it does not solve my problem:

  • Your solution sets the background of the Stackpanel defined in the DataTemplate using a flag IsSelected from the items in ViewModel.

  • I'm looking for a solution to change this background when an item is selected by the user. This is handled by the default ControlTemplate showing a blue background until a new item is selected after a click by the user.

Attached pls. find the XAML source of the MS ControlTemplate used with TreeViewItem. The second part has the code to set the background. I have no idea how to change the background-property from outside the ControlTemplate. But this great Q/A tool seems to be coded with artificial unintelligence. So upload does not acknowledges its task.

Thanx again for your help.
JD


[1]: /answers/storage/attachments/82452-treeviewitemtest.txt

[2]: /answers/storage/attachments/82396-capture.jpg

0 Votes 0 ·
capture.jpg (22.7 KiB)