1

私は WinRTXamlToolkit を使用しており、現在 TreeView コントロールを使用しようとしています。正常に動作しますが、マウスをその上に置いたり選択したりするたびに、項目が強調表示されます。テキスト全体をカバーしており、前景/背景色を変更するか、理想的には選択色の背景を完全に削除したいと考えています。どうすれば始められますか？

ここに画像の説明を入力

4

1 に答える 1

2

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

そして、の「押さ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>

そしての "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>
于 2016-06-03T12:23:41.217 に答える