Htykuut

I would like to ask you an issue that I cannot solve. I have templated a WPF TreeView as follows:

 <Style x:Key="TreeViewItemStyle" TargetType="{x:Type TreeViewItem}">

            <Setter Property="Focusable"

                    Value="True" />

            <Setter Property="IsExpanded"

                    Value="True" />

            <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="HorizontalAlignment"

                    Value="Stretch" />

            <Setter Property="Width"

                    Value="{Binding Path=ActualWidth, RelativeSource={RelativeSource AncestorType={x:Type TreeView}}}" />

            <Setter Property="Foreground"

                    Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="{x:Type TreeViewItem}">

                        <Grid Name="PART_grid">

                            <Grid.ColumnDefinitions>

                                <ColumnDefinition MinWidth="19" Width="Auto"/>

                                <ColumnDefinition Width="*"/>

                            </Grid.ColumnDefinitions>

                            <Grid.RowDefinitions>

                                <RowDefinition Height="Auto"/>

                                <RowDefinition/>

                            </Grid.RowDefinitions>

                            <ToggleButton x:Name="Expander" 

                                          ClickMode="Press" 

                                          IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}}" 

                                          Style="{StaticResource ExpandCollapseToggleStyle}"/>

                            <Border x:Name="Bd" 

                                    Grid.Column="1" 

                                    BorderBrush="{TemplateBinding BorderBrush}"

                                    BorderThickness="{TemplateBinding BorderThickness}"

                                    Background="{TemplateBinding Background}" 

                                    Padding="{TemplateBinding Padding}" 

                                    SnapsToDevicePixels="true">

                                <ContentPresenter x:Name="PART_Header" 

                                                  ContentSource="Header" 

                                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

                                                  SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>

                            </Border>

                            <ItemsPresenter x:Name="ItemsHost" Grid.Row="1" Grid.Column="1" />

                        </Grid>

                        <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="IsMouseOver" Value="true">

                                <Setter Property="Cursor" Value="Hand" />

                                <Setter TargetName="PART_grid"

                                        Property="Background"

                                        Value="#e6f2fa" />

                            </Trigger>

                        </ControlTemplate.Triggers>

                    </ControlTemplate>                  

                </Setter.Value>                    

            </Setter>

        </Style>

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.

How can I solve this problem and make the hover effect fall only on the single element, parent or child?

Thank you so much and have a good day everyone

I suppose you are using the HierarchicalDataTemplate for your items.

In that case, the 'terrible' hover effect is actually working exactly as you specify it. E.g. the Sergio item will contain other sub-items. When you hover on Alessandro, the Sergio item actually contains the mouse too, because this Sergio item is that large and contains all the other sub-items, including Alessandro.

You have two options now.

Either do it in your data template, something like:

<HierarchicalDataTemplate ItemsSource="{Binding SubItems}">

    <TextBlock x:Name="HeaderText" Text="{Binding Name}"/>

     <HierarchicalDataTemplate.Triggers>

        <Trigger Property="IsMouseOver" Value="True">

            <Setter TargetName="HeaderText" Property="Background" Value="Red"/>

        </Trigger>

    </HierarchicalDataTemplate.Triggers>          

</HierarchicalDataTemplate>

Or set the color not on the grid, but on the header only:

<Trigger Property="IsMouseOver" Value="true" SourceName="Bd">

    <Setter Property="Cursor" Value="Hand" />

    <Setter TargetName="Bd" Property="Background" Value="#e6f2fa" />

</Trigger>

Note that I added SourceName="Bd" to the trigger: we only want to change the color when the corresponding header contains the mouse cursor.