Triggers on TreeViewItems and escaping the routing

I wanted to give a highlight to a TreeViewItem in a tree like this:

<Style TargetType="{x:Type TreeViewItem}">
<Setter Property="IsExpanded" Value="True" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Cursor" Value="{x:Static Cursors.Hand}"
/>
<Setter Property="Background" Value="LightGray" />
</Trigger>
</Style.Triggers>
</Style>

But when I do this the TreeViewItem parent gets highlighted along with
the Item i've moused over. I tried IsMouseDirectlyOver, but that
didn't work as I'm sure the mouse was directly over a TextBlock or
something. Is there any way to use a trigger (eg. no c# code) and get
an individual TreeViewItem selected on MouseOver?

Thanks,
Martin

Hi Martin,

I struggled with this one as well. I came up with the solution, but it is a
long one since it is based on overriding the TreeViewItem control template in
order to achieve the proper mouseover effect. Notice, in particular, how the
"IsMouseOver" trigger is qualified with the SourceName property:


<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Paper3D"
Height="720" Width="800">
<Page.Resources>

<Style x:Key="Äž"
TargetType="{x:Type ToggleButton}">
<Setter Property="Focusable"
Value="False"/>
<Setter Property="Width"
Value="19"/>
<Setter Property="Height"
Value="13"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border Width="19"
Height="13"
Background="Transparent">
<Border Width="9"
Height="9"
BorderThickness="1"
BorderBrush="{DynamicResource {x:Static
SystemColors.GrayTextBrushKey}}"
Background="{DynamicResource {x:Static
SystemColors.WindowBrushKey}}"
SnapsToDevicePixels="true">
<Path x:Name="ExpandPath"
Margin="1,1,1,1"
Fill="{DynamicResource {x:Static
SystemColors.WindowTextBrushKey}}"
Data="M 0 2 L 0 3 L 2 3 L 2 5 L 3 5 L 3 3
L 5 3 L 5 2 L 3 2 L 3 0 L 2 0 L 2 2 Z"/>
</Border>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked"
Value="True">
<Setter Property="Data"
TargetName="ExpandPath"
Value="M 0 2 L 0 3 L 5 3 L 5 2 Z"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

<Style x:Key="{x:Type TreeViewItem}"
TargetType="{x:Type TreeViewItem}">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Padding" Value="1,0,0,0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TreeViewItem}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="19"
Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<ToggleButton x:Name="Expander"
Style="{StaticResource Äž}"
IsChecked="{Binding
Path=IsExpanded,RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press"/>
<Border Name="Bd"
Grid.Column="1"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding
BorderThickness}"
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.ColumnSpan="2"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger SourceName="PART_Header"
Property="IsMouseOver"
Value="True">
<Setter TargetName="Bd"
Property="Background"
Value="Red"/>
</Trigger>
<Trigger Property="IsExpanded"
Value="false">
<Setter TargetName="ItemsHost"
Property="Visibility"
Value="Collapsed"/>
</Trigger>
<Trigger Property="HasItems"
Value="false">
<Setter TargetName="Expander"
Property="Visibility"
Value="Hidden"/>
</Trigger>
<Trigger Property="IsSelected"
Value="true">
<Setter TargetName="Bd"
Property="Background"
Value="{DynamicResource {x:Static
SystemColors.HighlightBrushKey}}"/>
<Setter Property="Foreground"
Value="{DynamicResource {x:Static
SystemColors.HighlightTextBrushKey}}"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected"
Value="true"/>
<Condition Property="IsSelectionActive"
Value="false"/>
</MultiTrigger.Conditions>
<Setter TargetName="Bd"
Property="Background"
Value="{DynamicResource {x:Static
SystemColors.ControlBrushKey}}"/>
<Setter Property="Foreground"
Value="{DynamicResource {x:Static
SystemColors.ControlTextBrushKey}}"/>
</MultiTrigger>
<Trigger Property="IsEnabled"
Value="false">
<Setter Property="Foreground"
Value="{DynamicResource {x:Static
SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>



</Page.Resources>

<StackPanel>
<TreeView Width="200" Height="200">
<TreeViewItem Header="Node 1"/>
<TreeViewItem Header="Node 2">
<TreeViewItem Header="Node 2.1"/>
<TreeViewItem Header="Node 2.2">
<TreeViewItem Header="Node 2.2.1"/>
<TreeViewItem Header="Node 2.2.2"/>
</TreeViewItem>
<TreeViewItem Header="Node 2.3"/>
</TreeViewItem>
<TreeViewItem Header="Node 3"/>
</TreeView>
</StackPanel>
</Page>


Cheers,
Yuval




"Martin Smith" wrote:

> I wanted to give a highlight to a TreeViewItem in a tree like this:
>
> <Style TargetType="{x:Type TreeViewItem}">
> <Setter Property="IsExpanded" Value="True" />
> <Style.Triggers>
> <Trigger Property="IsMouseOver" Value="True">
> <Setter Property="Cursor" Value="{x:Static Cursors.Hand}"
> />
> <Setter Property="Background" Value="LightGray" />
> </Trigger>
> </Style.Triggers>
> </Style>
>
> But when I do this the TreeViewItem parent gets highlighted along with
> the Item i've moused over. I tried IsMouseDirectlyOver, but that
> didn't work as I'm sure the mouse was directly over a TextBlock or
> something. Is there any way to use a trigger (eg. no c# code) and get
> an individual TreeViewItem selected on MouseOver?
>
> Thanks,
> Martin
>
>