WinRTXamlToolkit.Controls TreeView - 删除鼠标悬停突出显示

Question

我正在使用 WinRTXamlToolkit，目前正在尝试使用 TreeView 控件。它工作正常，但每当我将鼠标悬停在它上面或 select 它时，该项目就会突出显示。它涵盖了整个文本，我想更改它的 foreground/background 颜色，或者理想情况下，完全删除 selection 颜色背景。知道我该如何开始吗？

Answer 1

我们可以编辑 TreeViewItem 的 Template 来实现这一点。我们可以在 GitHub.

处找到 style and template of TreeViewItem

TreeView 中项目的鼠标悬停效果由名为"Hover" 的Rectangle 设置：

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

以及 Button 中的 "Pressed" VisualState VisualStateGroup:

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

我们可以通过设置 Fill 属性和不透明度来改变它的颜色 DoubleAnimation.To 属性.

选择效果类似于鼠标悬停效果，由名为"Selection"的Rectangle设置：

<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>

和 "Selected" VisualState 在 TreeViewItem 的 "SelectionStates" VisualStateGroup:

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

我们可以通过删除这个VisualState中的动画来去除选择效果，比如：

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

所以你可以根据自己的需要编辑TreeViewItem的样式和模板，给新的Style一个x:Key喜欢

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

然后通过如下设置 ItemContainerStyle 在您的 TreeView 中使用新样式：

<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>

WinRTXamlToolkit.Controls TreeView - 删除鼠标悬停突出显示

WinRTXamlToolkit.Controls TreeView - Remove Mouseover highlight

c#

treeview

winrt-xaml-toolkit

uwp

windows-10-universal