Category / Section
How to disable MouseOver highlight when hovering over items in WPF Treeview?
3 mins read
By default, SfTreeView does not provide the direct support to disable the MouseOver highlight when hovering over items in the SfTreeView. You can disable the MouseOver highlight by overriding the TreeViewItem Template and change the Background property as Transparent in PART_HoverBorder of TreeViewItem Template in SfTreeView.
<BooleanToVisibilityConverter x:Key="boolToVisibilityConverter"/>
<DataTemplate x:Key="busyIndicatorTemplate">
<syncfusion:SfBusyIndicator x:Name="PART_BusyIndicator"
IsBusy="True"
AnimationType="DotCircle"
ViewboxWidth="{TemplateBinding Width}"
VerticalContentAlignment="Center"
VerticalAlignment="Center">
</syncfusion:SfBusyIndicator>
</DataTemplate>
<Style TargetType="syncfusion:TreeViewItem">
<Setter Property="Background" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type syncfusion:TreeViewItem}">
<Grid x:Name="ROOT" Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="DropStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="DropAsChild">
<Storyboard>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00"
Duration="00:00:00"
Storyboard.TargetName="BorderContent"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="#D2DFF2" />
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00"
Duration="00:00:00"
Storyboard.TargetName="BorderContent"
Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="#2B579A"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00"
Duration="00:00:00"
Storyboard.TargetName="BorderContent"
Storyboard.TargetProperty="BorderThickness">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Thickness>1</Thickness>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00"
Duration="00:00:00"
Storyboard.TargetName="PART_ExpanderView"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="#D2DFF2" />
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.ColumnDefinitions>
<ColumnDefinition MaxWidth="{TemplateBinding IndentationWidth}"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Border x:Name="BorderContent"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"/>
<Border x:Name="PART_HoverBorder"
Visibility="Collapsed"
Margin="1"
Background="Transparent"/>
<StackPanel x:Name="PART_IndentContainer"
Panel.ZIndex="0"
Orientation="Horizontal"
Grid.Column="0">
<Rectangle x:Name="PART_IndentLine"
StrokeDashArray="2,2"
HorizontalAlignment="Stretch"
Visibility="Hidden">
</Rectangle>
</StackPanel>
<Grid x:Name="PART_LineGrid"
Grid.Column="1"
Panel.ZIndex="0"
Width="{TemplateBinding ExpanderWidth}"
Visibility="Hidden">
<Rectangle x:Name="PART_HorizontalLine"
StrokeDashArray="2,2"
Margin="10,0,0,0"
Width="10"
VerticalAlignment="Center" />
<Rectangle x:Name="PART_VerticalLine"
StrokeDashArray="2,2"
HorizontalAlignment="Stretch"/>
</Grid>
<ContentControl x:Name="PART_ExpanderView"
Focusable="False"
Width="{TemplateBinding ExpanderWidth}"
Visibility="{Binding HasChildNodes, Converter={StaticResource boolToVisibilityConverter}}"
ContentTemplate="{TemplateBinding ExpanderTemplate}">
</ContentControl>
<syncfusion:TreeNodeView x:Name="PART_ContentView" Grid.Column="2"
Margin="4,0,4,0"
VerticalAlignment="Center"
Focusable="False"
ContentTemplate="{TemplateBinding ItemTemplate}">
</syncfusion:TreeNodeView>
<Border x:Name="PART_DragLine" Grid.ColumnSpan="3" Visibility="Collapsed" BorderBrush="#2B579A" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="FullRowSelect" Value="True">
<Setter Property="Grid.Column" TargetName="BorderContent" Value="0"/>
<Setter Property="Grid.ColumnSpan" TargetName="BorderContent" Value="4"/>
<Setter Property="Grid.Column" TargetName="PART_HoverBorder" Value="0"/>
<Setter Property="Grid.ColumnSpan" TargetName="PART_HoverBorder" Value="4"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="FullRowSelect" Value="False"/>
<Condition Property="ExpanderPosition" Value="Start"/>
</MultiTrigger.Conditions>
<Setter Property="Grid.Column" TargetName="BorderContent" Value="2"/>
<Setter Property="Grid.ColumnSpan" TargetName="BorderContent" Value="1"/>
<Setter Property="Grid.Column" TargetName="PART_HoverBorder" Value="2"/>
<Setter Property="Grid.ColumnSpan" TargetName="PART_HoverBorder" Value="1"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="FullRowSelect" Value="False"/>
<Condition Property="ExpanderPosition" Value="End"/>
</MultiTrigger.Conditions>
<Setter Property="Grid.Column" TargetName="BorderContent" Value="0"/>
<Setter Property="Grid.ColumnSpan" TargetName="BorderContent" Value="3"/>
<Setter Property="Grid.Column" TargetName="PART_HoverBorder" Value="0"/>
<Setter Property="Grid.ColumnSpan" TargetName="PART_HoverBorder" Value="3"/>
</MultiTrigger>
<Trigger Property="ExpanderPosition" Value="Start">
<Setter Property="Grid.Column" TargetName="PART_ExpanderView" Value="1"/>
</Trigger>
<Trigger Property="ExpanderPosition" Value="End">
<Setter Property="Grid.Column" TargetName="PART_ExpanderView" Value="3"/>
</Trigger>
<Trigger Property="ShowLines" Value="True">
<Setter Property="Visibility" TargetName="PART_LineGrid" Value="Visible"/>
</Trigger>
<DataTrigger Binding="{Binding ShowExpanderAnimation}" Value="True">
<Setter Property="ContentTemplate" TargetName="PART_ExpanderView" Value="{StaticResource busyIndicatorTemplate}"/>
</DataTrigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.3"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Conclusion
I hope
you enjoyed how to disable MouseOver highlight in WPF TreeView items.
You
can refer to our WPF TreeView feature tour page
to know about its other groundbreaking feature representations and documentation, and
how to quickly get started for configuration specifications. You can also
explore our WPF TreeView example to
understand how to create and manipulate data.
For
current customers, you can check out our components from the License and Downloads page. If
you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any
queries or require clarifications, please let us know in the comments section
below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We
are always happy to assist you!
