WinRTXamlToolkit.Controls TreeView - マウスオーバーハイライトの削除

Question

私はWinRTXamlToolkitを使用していますが、現在TreeViewコントロールを使用しようとしています。それはうまく動作しますが、マウスを上に置いたり選択するたびに、項目が強調表示されます。これはテキスト全体をカバーしています。フォアグラウンド/バックグラウンドの色を変更したり、選択色の背景を完全に削除するのが理想的です。どのように私が始めることができる任意のアイデア？

Answer 1

私たちは、これを達成するためにTreeViewItemのTemplateを編集することができます。 GitHubにはstyle and template of TreeViewItemがあります。

ツリービュー内の項目のマウスオーバー効果は "ホバー" という名前Rectangleによって設定されます。

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

そしてVisualStateVisualStateGroupさんButtonに "プレスト"：

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

我々はできますDoubleAnimation.Toプロパティを設定して、Fillプロパティと不透明度を設定して色を変更します。

選択効果は、マウスオーバー効果のようなもので、 "選択" という名前Rectangleによって設定されます。

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

： VisualState TreeViewItemさんの "SelectionStates" VisualStateGroupを "選択"

<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のアニメーションを削除すると、選択効果が削除されます：

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

だからあなたはあなたの条件に応じてTreeViewItemのスタイルとテンプレートを編集して与えることができ、新たなStylex: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>