I don't really know how to ask this, but I have a specific style that I want to implement on my TreeView.
So as I understand the TreeView control, when you expand a TreeViewItem
node to view it's children, it creates a new ItemsPresenter
that's a container for the new child node's TreeViewItem. That means that all the child nodes are connected to each of their parents.
What I want to achieve is, when a child is expanded into view and the parent node is selected, the user hovers over one of the child nodes, that the parent node still has the default selected style activated. Instead of having the IsMouseOver style activated from hovering over one of it's children nodes.
Here is an example:
Selected parent color
What is happening when parent is selected and hovering over child node
What I want it to look like when parent node is selected and when hovering over one of it's children (excuse my amazing paint skills with this one)
Here is my coding for reference
TreeView
<TreeView Background="{x:Null}" BorderThickness="0" Margin="0,3,0,0">
<TreeViewItem Header="Root Node" IsExpanded="True">
<TreeViewItem Header="Parent Node" IsExpanded="True">
<TreeViewItem Header="Child Node" IsExpanded="True">
<TreeViewItem Header="Child Node" IsExpanded="True">
<TreeViewItem Header="Child Node" IsExpanded="True" IsSelected="True"/>
</TreeViewItem>
</TreeViewItem>
</TreeViewItem>
...
<TreeViewItem Header="Child Node">
<TreeViewItem Header="Child Node"/>
<TreeViewItem Header="Child Node"/>
</TreeViewItem>
<TreeViewItem Header="Child Node"/>
</TreeViewItem>
</TreeView>
Style
<Style x:Key="{x:Type TreeViewItem}" TargetType="{x:Type TreeViewItem}">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="Padding" Value="1,0,0,0"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="FocusVisualStyle" Value="{StaticResource TreeViewItemFocusVisual}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TreeViewItem}">
<StackPanel>
<Border x:Name="Bd" Grid.ColumnSpan="3" BorderThickness="1" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true" Margin="3,0,3,-1" MinHeight="20">
<Border.Style>
<Style TargetType="{x:Type Border}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="Red"/>
<Setter Property="BorderBrush" Value="Black"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="false">
<Setter Property="Background" Value="Transparent"/>
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="19" Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ToggleButton x:Name="Expander" ClickMode="Press" IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}}" Style="{StaticResource ExpandCollapseToggleStyle}"/>
<ContentPresenter x:Name="PART_Header" ContentSource="Header" Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Grid>
</Border>
<ItemsPresenter x:Name="ItemsHost" Grid.ColumnSpan="2" Grid.Column="1" Grid.Row="1"/>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded" Value="false">
<Setter Property="Visibility" TargetName="ItemsHost" Value="Collapsed"/>
</Trigger>
<Trigger Property="HasItems" Value="false">
<Setter Property="Visibility" TargetName="Expander" Value="Hidden"/>
</Trigger>
<Trigger Property="IsSelected" Value="true">
<Setter Property="Background" TargetName="Bd" Value="Green"/>
<Setter Property="BorderBrush" TargetName="Bd" Value="Black"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="true"/>
<Condition Property="IsMouseOver" Value="true"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="Red"/>
</MultiTrigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
If anyone has any tips that could help me achieve this, I would appreciate it a lot. Also if I'm trying to do most of this in XAML and not in C#, but if it can't be done, I would be happy to do it in C#. Thanks.