WinRTXamlToolkit.Controls TreeView - Remove Mouseover highlight

Question

I'm using WinRTXamlToolkit and I'm currently trying to use the TreeView control. It works fine, but whenever I hold my mouse over it or select it, the item is highlighted. It covers the whole text and I would like to change the foreground/background colors it or, ideally, remove the selection color background altogether. Any idea how I can start?

Answer 1

We can edit the Template of TreeViewItem to achieve this. And we can find the style and template of TreeViewItem at GitHub.

The mouseover effect of the item in TreeView is set by the Rectangle named "Hover":

<Rectangle x:Name="Hover"
           Fill="#FFBADDE9"
           IsHitTestVisible="False"
           Opacity="0"
           RadiusX="2"
           RadiusY="2"
           Stroke="#FF6DBDD1"
           StrokeThickness="1" />

And the "Pressed" VisualState in Button's VisualStateGroup:

<VisualState x:Name="Pressed">
    <Storyboard>
        <DoubleAnimation Duration="0"
                         Storyboard.TargetName="Hover"
                         Storyboard.TargetProperty="Opacity"
                         To=".5" />
    </Storyboard>
</VisualState>

We can change its color by setting Fill property and the opacity by setting DoubleAnimation.To property.

The selection effect is like the mouseover effect and is set by the Rectangle named "Selection":

<Rectangle x:Name="Selection"
           Grid.Column="1"
           IsHitTestVisible="False"
           Opacity="0"
           RadiusX="2"
           RadiusY="2"
           StrokeThickness="1">
    <Rectangle.Fill>
        <SolidColorBrush x:Name="SelectionFill" Color="#FFBADDE9" />
    </Rectangle.Fill>
    <Rectangle.Stroke>
        <SolidColorBrush x:Name="SelectionStroke" Color="#FF6DBDD1" />
    </Rectangle.Stroke>
</Rectangle>

And the "Selected" VisualState in TreeViewItem's "SelectionStates" VisualStateGroup:

<VisualState x:Name="Selected">
    <Storyboard>
        <DoubleAnimation Duration="0"
                         Storyboard.TargetName="Selection"
                         Storyboard.TargetProperty="Opacity"
                         To=".75" />
    </Storyboard>
</VisualState>

We can remove the selection effect by deleting the animation in this VisualState like:

<VisualState x:Name="Selected">
    <!--<Storyboard>
        <DoubleAnimation Duration="0"
                         Storyboard.TargetName="Selection"
                         Storyboard.TargetProperty="Opacity"
                         To=".75" />
    </Storyboard>-->
</VisualState>

So you can edit TreeViewItem's style and template according to your requirement and give the new Style a x:Key like

<Style x:Key="MyTreeViewItemStyle" TargetType="controls:TreeViewItem">

Then use the new style in your TreeView by setting ItemContainerStyle like following:

<controls:TreeView x:Name="treeView" ItemContainerStyle="{StaticResource MyTreeViewItemStyle}">
    <controls:TreeView.ItemTemplate>
        <DataTemplate>
            <data:DataTemplateExtensions.Hierarchy>
                <data:HierarchicalDataTemplate ItemsSource="{Binding Children}" />
            </data:DataTemplateExtensions.Hierarchy>
            <TextBlock Text="{Binding Text}" TextTrimming="CharacterEllipsis" />
        </DataTemplate>
    </controls:TreeView.ItemTemplate>
</controls:TreeView>