Question

我正在使用WinRTXamlToolkit，而我目前正在尝试使用TreeView控件。它工作正常，但只要我将鼠标放在它上面或选择它，项目就会突出显示。它涵盖了整个文本，我想改变它的前景/背景颜色，或者理想情况下，完全删除选择颜色背景。知道怎么开始吗？

Answer 1

我们可以修改Template TreeViewItem来实现这一目标。我们可以在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" />

VisualState Button中的“按下”VisualStateGroup：

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

VisualState的“SelectionStates”TreeViewItem中的“已选定”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">

然后通过设置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>

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

1 个答案: