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

Question

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

Answer 1

我们可以通过编辑Template来TreeViewItem实现这一点。我们可以在 GitHub 上找到TreeViewItem 的样式和模板。

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

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

而'sVisualState中的“Pressed” ：ButtonVisualStateGroup

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

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

选择效果类似于鼠标悬停效果，由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>

和"SelectionStates"VisualState中的 "Selected " ：TreeViewItemVisualStateGroup

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

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

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