WPF TreeView: Comment le style des éléments sélectionnés, avec des coins arrondis comme dans l'Explorateur

L'élément sélectionné dans une WPF TreeView a un fond bleu foncé, avec "sharp" coins. Qui ressemble un peu daté aujourd'hui:

WPF TreeView: Comment le style des éléments sélectionnés, avec des coins arrondis comme dans l'Explorateur

Je voudrais changer l'arrière-plan ressembler dans l'Explorateur de Windows 7 (avec/sans accent):

WPF TreeView: Comment le style des éléments sélectionnés, avec des coins arrondis comme dans l'Explorateur

Ce que j'ai essayé jusqu'à présent n'a pas de supprimer l'original sur fond bleu foncé, mais les peintures d'une bordure arrondie sur le dessus de sorte que vous voyez la couleur bleu foncé sur les bords et sur le côté gauche moche.

WPF TreeView: Comment le style des éléments sélectionnés, avec des coins arrondis comme dans l'Explorateur

Fait intéressant, lorsque ma version n'a pas le focus, il semble assez OK:

WPF TreeView: Comment le style des éléments sélectionnés, avec des coins arrondis comme dans l'Explorateur

Je tiens à s'abstenir de redéfinir le modèle de contrôle comme illustré ici ou ici. Je veux mettre le minimum propriétés requises pour faire de l'élément sélectionné ressembler à Explorer.

Alternative: je serais également heureux d'avoir l'concentre l'élément sélectionné ressembler à la mienne maintenant, quand il n'a pas le focus. Quand il perd le focus, doit changer de couleur du bleu au gris.

Voici mon code:

<TreeView 
x:Name="TreeView"
ItemsSource="{Binding TopLevelNodes}" 
VirtualizingStackPanel.IsVirtualizing="True"
VirtualizingStackPanel.VirtualizationMode="Recycling">
<TreeView.ItemContainerStyle>
<Style TargetType="{x:Type TreeViewItem}">
<Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" />
<Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="BorderBrush" Value="#FF7DA2CE" />
<Setter Property="Background" Value="#FFCCE2FC" />
</Trigger>
</Style.Triggers>
</Style>
</TreeView.ItemContainerStyle>
<TreeView.Resources>
<HierarchicalDataTemplate DataType="{x:Type viewmodels:ObjectBaseViewModel}" ItemsSource="{Binding Children}">
<Border Name="ItemBorder" CornerRadius="2" Background="{Binding Background, RelativeSource={RelativeSource AncestorType=TreeViewItem}}"
BorderBrush="{Binding BorderBrush, RelativeSource={RelativeSource AncestorType=TreeViewItem}}" BorderThickness="1">
<StackPanel Orientation="Horizontal" Margin="2">
<Image Name="icon" Source="/ExplorerTreeView/Images/folder.png"/>
<TextBlock Text="{Binding Name}"/>
</StackPanel>
</Border>
</HierarchicalDataTemplate>
</TreeView.Resources>
</TreeView>

Solution

Avec les excellentes réponses de Sheridan et Meleak mon TreeView ressemble maintenant à ceci dans le code (en conséquence, je suis très heureux avec et qui est assez proche de l'Explorateur de style):

<TreeView 
...
<TreeView.ItemContainerStyle>
<Style TargetType="{x:Type TreeViewItem}">
<!-- Style for the selected item -->
<Setter Property="BorderThickness" Value="1"/>
<Style.Triggers>
<!-- Selected and has focus -->
<Trigger Property="IsSelected" Value="True">
<Setter Property="BorderBrush" Value="#7DA2CE"/>
</Trigger>
<!-- Mouse over -->
<Trigger Property="helpers:TreeView_IsMouseDirectlyOverItem.IsMouseDirectlyOverItem" Value="True">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFFAFBFD" Offset="0"/>
<GradientStop Color="#FFEBF3FD" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" Value="#B8D6FB"/>
</Trigger>
<!-- Selected but does not have the focus -->
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="True"/>
<Condition Property="IsSelectionActive" Value="False"/>
</MultiTrigger.Conditions>
<Setter Property="BorderBrush" Value="#D9D9D9"/>
</MultiTrigger>
</Style.Triggers>
<Style.Resources>
<Style TargetType="Border">
<Setter Property="CornerRadius" Value="2"/>
</Style>
</Style.Resources>
</Style>
</TreeView.ItemContainerStyle>
<TreeView.Resources>
<HierarchicalDataTemplate DataType="{x:Type viewmodels:ObjectBaseViewModel}" ItemsSource="{Binding Children}">
<StackPanel Orientation="Horizontal" Margin="2,1,5,2">
<Grid Margin="0,0,3,0">
<Image Name="icon" Source="/ExplorerTreeView/Images/folder.png"/>
</Grid>
<TextBlock Text="{Binding Name}" />
</StackPanel>
</HierarchicalDataTemplate>
<!-- Brushes for the selected item -->
<LinearGradientBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFDCEBFC" Offset="0"/>
<GradientStop Color="#FFC1DBFC" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="{x:Static SystemColors.ControlBrushKey}" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFF8F8F8" Offset="0"/>
<GradientStop Color="#FFE5E5E5" Offset="1"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Black" />
<SolidColorBrush x:Key="{x:Static SystemColors.ControlTextBrushKey}" Color="Black" />
</TreeView.Resources>
</TreeView>
  • pouvez-vous montrer le code pour TreeView_IsMouseDirectlyOverItem.IsMouseDirectlyOverItem ?
  • blogs.msdn.com/b/mikehillberg/archive/2006/09/21/...
  • merci, j'ai réussi à trouver moi-même un certain temps après avoir demandé - mais apprécie tout de même
  • En Quelque Sorte SystemColors.ControlTextBrushKey inactif, la sélection ne fonctionne pas pour moi. J'utilise SystemColors.InactiveSelectionHighlightTextBrushkey à la place. J'ai windows 7 SP1.
InformationsquelleAutor Helge Klein | 2011-02-18