WinRTXamlToolkit.Controls TreeView-刪除鼠標懸停突出顯示

Question

我正在使用WinRTXamlToolkit，目前正在嘗試使用TreeView控件。 它可以正常工作，但是每當我將鼠標懸停或選中它時，該項目就會突出顯示。 它涵蓋了整個文本，我想更改其前景色/背景色，或者理想情況下，完全刪除選擇的顏色背景。 知道如何開始嗎？

Answer 1

我們可以編輯TreeViewItem的Template來實現此目的。 我們可以在GitHub上找到TreeViewItem的樣式和模板 。

TreeView中該項目的鼠標懸停效果由名為“懸停”的Rectangle設置：

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

以及Button的VisualState中的“ Pressed” 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在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>