CODEWITHSUNDEEP
c#wpfxamltreeview
Philipp Nies
Philipp Nies

Reputation: 969

WPF TreeView with Icon remove selected on the left of the icon

I have a WPF TreeView and I want to remove the blue "selected" hover on the left side of the icon. I hope you understand what I want :D

Heres a picture of the problem

enter image description here

The TreeView is populated by code behind and I build the Item programmatically.

The TreeViewItem.Header XAML would look like this:

<StackPanel Orientation="Horizontal" ...>
    <Image ... />
    <TextBlock .../>
</StackPanel>

Upvotes: 1

Views: 656

Answers (3)

StepUp
StepUp

Reputation: 38144

It is like a workaround and it is not good solution:

<StackPanel Orientation="Horizontal" Margin="-1,0,0,0">  
   <Image Source="/Images/yourImage.jpg" Height="30" Width="30"/>
   <TextBlock Text="Hey"/>
</StackPanel>

However, it is better to use HierarchicalDataTemplate:

<TreeView  ItemsSource="{Binding Leafs}">                                
  <TreeView.Resources>                    
    <HierarchicalDataTemplate DataType="{x:Type vm:LeafViewModel}" ItemsSource="{Binding Children}">
       <ContentControl Content="{Binding }">
         <ContentControl.Style>
           <Style TargetType="{x:Type ContentControl}">
              <Setter Property="ContentTemplate" Value="{StaticResource DefaultTemplate}"/>
           </Style>
         </ContentControl.Style>
       </ContentControl>                        
   </HierarchicalDataTemplate>
 </TreeView.Resources>            
</TreeView>

and its HierarchicalDataTemplate:

<HierarchicalDataTemplate x:Key="DefaultTemplate" DataType="{x:Type vm:LeafViewModel}" ItemsSource="{Binding Children}">
  <Border Tag="{Binding DataContext, RelativeSource={RelativeSource Self}}" Background="Transparent">
     <StackPanel Orientation="Horizontal">
        <Label VerticalAlignment="Center" FontFamily="WingDings" Content="1"/>
        <CheckBox IsChecked="{Binding IsCheckedFoo}"/>
        <TextBlock Name="leafTxtBox" Text="{Binding LeafName}" Tag="{Binding DataContext, RelativeSource={RelativeSource Self}}" Background="Transparent"/>
     </StackPanel>
  </Border>
</HierarchicalDataTemplate>

The best article about how to use TreeView without violating MVVM rules is by Josh Smith.

Upvotes: 1

TsunamiCoder
TsunamiCoder

Reputation: 120

There are 4 brushes that generally correspond to this and are used by the default Template for TreeViewItem

keys:

HighlightBrushKey - Background with focus.

HighlightTextBrushKey - Foreground with focus.

InactiveSelectionHighlightBrushKey - Background without focus.

InactiveSelectionHighlightTextBrushKey - Foreground without focus.

Just override them as you see fit, for your requirement something like this would do fine:

<TreeView>
  <TreeView.Resources>
    <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}"
                      Color="Transparent" />
    <SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}"
                      Color="Black" />
    <SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}"
                      Color="Transparent" />
    <SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightTextBrushKey}"
                      Color="Black" />
  </TreeView.Resources>
</TreeView>

Upvotes: 0

ASh
ASh

Reputation: 35713

TreeView wraps items into TreeViewItem container. TreeViewItem has Padding 1,0,0,0 which can be removed via Style

<TreeView.Resources>
    <Style TargetType="TreeViewItem">
        <Setter Property="Padding" Value="0"/>
    </Style>
</TreeView.Resources>

Upvotes: 0

Related Questions