title: Wrong hover effect on the child elements of a WPF TreeView
body: <p>I would like to ask you an issue that I cannot solve. I have templated a WPF TreeView as follows:</p>
  
  <pre><code> &lt;Style x:Key="TreeViewItemStyle" TargetType="{x:Type TreeViewItem}"&gt;
              &lt;Setter Property="Focusable"
                      Value="True" /&gt;
              &lt;Setter Property="IsExpanded"
                      Value="True" /&gt;
              &lt;Setter Property="Background"
                      Value="Transparent" /&gt;
              &lt;Setter Property="HorizontalContentAlignment" 
                      Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/&gt;
              &lt;Setter Property="VerticalContentAlignment" 
                      Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/&gt;
              &lt;Setter Property="HorizontalAlignment"
                      Value="Stretch" /&gt;
              &lt;Setter Property="Width"
                      Value="{Binding Path=ActualWidth, RelativeSource={RelativeSource AncestorType={x:Type TreeView}}}" /&gt;
              &lt;Setter Property="Foreground"
                      Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" /&gt;
              &lt;Setter Property="Template"&gt;
                  &lt;Setter.Value&gt;
                      &lt;ControlTemplate TargetType="{x:Type TreeViewItem}"&gt;
                          &lt;Grid Name="PART_grid"&gt;
                              &lt;Grid.ColumnDefinitions&gt;
                                  &lt;ColumnDefinition MinWidth="19" Width="Auto"/&gt;
                                  &lt;ColumnDefinition Width="*"/&gt;
                              &lt;/Grid.ColumnDefinitions&gt;
                              &lt;Grid.RowDefinitions&gt;
                                  &lt;RowDefinition Height="Auto"/&gt;
                                  &lt;RowDefinition/&gt;
                              &lt;/Grid.RowDefinitions&gt;
                              &lt;ToggleButton x:Name="Expander" 
                                            ClickMode="Press" 
                                            IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}}" 
                                            Style="{StaticResource ExpandCollapseToggleStyle}"/&gt;
                              &lt;Border x:Name="Bd" 
                                      Grid.Column="1" 
                                      BorderBrush="{TemplateBinding BorderBrush}"
                                      BorderThickness="{TemplateBinding BorderThickness}"
                                      Background="{TemplateBinding Background}" 
                                      Padding="{TemplateBinding Padding}" 
                                      SnapsToDevicePixels="true"&gt;
                                  &lt;ContentPresenter x:Name="PART_Header" 
                                                    ContentSource="Header" 
                                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/&gt;
                              &lt;/Border&gt;
                              &lt;ItemsPresenter x:Name="ItemsHost" Grid.Row="1" Grid.Column="1" /&gt;
                          &lt;/Grid&gt;
                          &lt;ControlTemplate.Triggers&gt;
                              &lt;Trigger Property="IsExpanded" Value="false"&gt;
                                  &lt;Setter Property="Visibility" TargetName="ItemsHost" Value="Collapsed"/&gt;
                              &lt;/Trigger&gt;
                              &lt;Trigger Property="HasItems" Value="false"&gt;
                                  &lt;Setter Property="Visibility" TargetName="Expander" Value="Hidden"/&gt;
                              &lt;/Trigger&gt;
                              &lt;Trigger Property="IsMouseOver" Value="true"&gt;
                                  &lt;Setter Property="Cursor" Value="Hand" /&gt;
                                  &lt;Setter TargetName="PART_grid"
                                          Property="Background"
                                          Value="#e6f2fa" /&gt;
                              &lt;/Trigger&gt;
                          &lt;/ControlTemplate.Triggers&gt;
                      &lt;/ControlTemplate&gt;                  
                  &lt;/Setter.Value&gt;                    
              &lt;/Setter&gt;
          &lt;/Style&gt;
  </code></pre>
  
  <p>The problem is that the hover effect is really terrible. In fact, if the user goes on the TreeviewItem the effect should affect only the relative children and not the whole wrapper.</p>
  
  <p><img src="https://i.stack.imgur.com/79DX3.png" alt="screenshot"></p>
  
  <p>How can I solve this problem and make the hover effect fall only on the single element, parent or child?</p>
  
  <p>Thank you so much and have a good day everyone</p>