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:

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

L'ajout de @Sheridan réponse

Ce n'est pas précis à 100%, mais devrait vous obtenir assez proche (c'est en utilisant les couleurs de GridView qui est assez proche de l'Explorateur Windows)

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

<TreeView ...>
<TreeView.Resources>
<LinearGradientBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFD9F4FF" Offset="0"/>
<GradientStop Color="#FF9BDDFB" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="{x:Static SystemColors.ControlBrushKey}" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFEEEDED" Offset="0"/>
<GradientStop Color="#FFDDDDDD" Offset="1"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Black" />
<SolidColorBrush x:Key="{x:Static SystemColors.ControlTextBrushKey}" Color="Black" />
</TreeView.Resources>
<TreeView.ItemContainerStyle>
<Style TargetType="{x:Type TreeViewItem}">
<Setter Property="BorderThickness" Value="1.5"/>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="BorderBrush" Value="#adc6e5"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="True"/>
<Condition Property="IsSelectionActive" Value="False"/>
</MultiTrigger.Conditions>
<Setter Property="BorderBrush" Value="LightGray"/>
</MultiTrigger>
</Style.Triggers>
<Style.Resources>
<Style TargetType="Border">
<Setter Property="CornerRadius" Value="2"/>
</Style>
</Style.Resources>                    
</Style>
</TreeView.ItemContainerStyle>
</TreeView>

Pourquoi les coins arrondis de travail sur le code xaml ci-dessus?
Je ne comprends pas comment TreeView.Ressources substance est utilisée ou appliquée dans votre exemple. Voulez-vous nous expliquer? Êtes-vous en quelque sorte primordial du comportement du système? Merci, un très grand travail.

InformationsquelleAutor Fredrik Hedblad

25

Ajouter ceci dans votre TreeView.ContainerStyle pour supprimer la valeur par défaut blue arrière-plan.
```
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent" />
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent" />
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Black" />
<SolidColorBrush x:Key="{x:Static SystemColors.ControlTextBrushKey}" Color="Black" />
</Style.Resources>
```
Vous pouvez remplacer le Black avec quelle que soit la couleur que vous voulez que votre texte d'un élément et l'élément sélectionné de texte.

D'avoir un fond gris, quand elle n'est pas centrée, vous pourriez mettre en place un "porté" Style avec un gris backgorund et l'utilisation EventTriggers sur le TreeViewItem.GotFocus et LostFocus événements pour basculer entre les Styles.

EDIT>>>

Si vous souhaitez flash, vous pouvez utiliser des animations pour changer entre les couleurs d'arrière-plan par l'ajout d'éléments déclencheurs pour votre ItemBorder Border directement dans votre HierarchicalDataTemplate comme suit:
```
<Border.Triggers>
<EventTrigger RoutedEvent="Border.GotFocus">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="YourColour" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Border.LostFocus">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="LightGray" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Border.Triggers>
```
Noter que cela ne fonctionne que si le ColorAnimation a un From couleur. Comme ce code est, le runtime recherchez un SolidColorBrush ensemble sur le Border.Background de la propriété, de sorte que vous devez définir un. Vous pouvez définir la ColorAnimation.From propriété directement à la place.
- C'est génial! Il supprime le vilain fond bleu foncé, et définit la couleur du texte noir. Avez-vous un conseil pour changer la couleur d'arrière-plan de bleu, de gris lorsque le focus est déplacé à un autre élément ou d'une Fenêtre, comme indiqué dans ma capture d'écran ci-dessus?
- Merci pour l'ajout. Connaissez-vous un exemple montrant quelque chose de similaire (commutation entre les styles avec EventTriggers)?
- Soins de commentaire en bas de l'électeur? En bas à droit de vote sans commentaire est inutile.
InformationsquelleAutor Sheridan

Windows 10 TreeView (et ListView) Style

J'ai été à l'origine la recherche d'un moyen pour appliquer le Windows 10 schéma de couleur pour un TreeViewItem, y compris

IsMouseOver sur l'élément en cours seulement
Windows 10 couleurs qui WPF s'applique déjà à ListBox (pas de l'Explorateur Windows)

Si vous êtes à la recherche d'exactement cela, n'hésitez pas à prendre le code ci-dessous. J'ai utilisé Helge Klein solution pour la IsMouseOver question et a appliqué le Windows 10 couleurs pour le XAML. Donc je propose cela comme un ajout à la accepté de répondre.

Aussi, voir ci-dessous pour un mot sur ListView et ComboBox ainsi.

Capture d'écran

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

App.xaml

<Style TargetType="{x:Type TreeView}">
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#CBE8F6" />
<SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}" Color="#F6F6F6" />
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Black" />
<SolidColorBrush x:Key="{x:Static SystemColors.ControlTextBrushKey}" Color="Black" />
</Style.Resources>
</Style>
<Style TargetType="{x:Type TreeViewItem}">
<Setter Property="BorderThickness" Value="1" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="BorderBrush" Value="#26A0DA" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="local:TreeViewItemHelper.IsMouseDirectlyOverItem" Value="True" />
<Condition Property="IsSelected" Value="False" />
</MultiTrigger.Conditions>
<Setter Property="Background" Value="#E5F3FB" />
<Setter Property="BorderBrush" Value="#70C0E7" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="True" />
<Condition Property="IsSelectionActive" Value="False" />
</MultiTrigger.Conditions>
<Setter Property="BorderBrush" Value="#DADADA" />
</MultiTrigger>
</Style.Triggers>
</Style>

TreeViewItemHelper (Source posté par Helge Klein, des modifications mineures /simplification)

public static class TreeViewItemHelper
{
private static TreeViewItem CurrentItem;
private static readonly RoutedEvent UpdateOverItemEvent = EventManager.RegisterRoutedEvent("UpdateOverItem", RoutingStrategy.Bubble, typeof(RoutedEventHandler), typeof(TreeViewItemHelper));
private static readonly DependencyPropertyKey IsMouseDirectlyOverItemKey = DependencyProperty.RegisterAttachedReadOnly("IsMouseDirectlyOverItem", typeof(bool), typeof(TreeViewItemHelper), new FrameworkPropertyMetadata(null, new CoerceValueCallback(CalculateIsMouseDirectlyOverItem)));
public static readonly DependencyProperty IsMouseDirectlyOverItemProperty = IsMouseDirectlyOverItemKey.DependencyProperty;
static TreeViewItemHelper()
{
EventManager.RegisterClassHandler(typeof(TreeViewItem), UIElement.MouseEnterEvent, new MouseEventHandler(OnMouseTransition), true);
EventManager.RegisterClassHandler(typeof(TreeViewItem), UIElement.MouseLeaveEvent, new MouseEventHandler(OnMouseTransition), true);
EventManager.RegisterClassHandler(typeof(TreeViewItem), UpdateOverItemEvent, new RoutedEventHandler(OnUpdateOverItem));
}
public static bool GetIsMouseDirectlyOverItem(DependencyObject obj)
{
return (bool)obj.GetValue(IsMouseDirectlyOverItemProperty);
}
private static object CalculateIsMouseDirectlyOverItem(DependencyObject item, object value)
{
return item == CurrentItem;
}
private static void OnUpdateOverItem(object sender, RoutedEventArgs e)
{
CurrentItem = sender as TreeViewItem;
CurrentItem.InvalidateProperty(IsMouseDirectlyOverItemProperty);
e.Handled = true;
}
private static void OnMouseTransition(object sender, MouseEventArgs e)
{
lock (IsMouseDirectlyOverItemProperty)
{
if (CurrentItem != null)
{
DependencyObject oldItem = CurrentItem;
CurrentItem = null;
oldItem.InvalidateProperty(IsMouseDirectlyOverItemProperty);
}
Mouse.DirectlyOver?.RaiseEvent(new RoutedEventArgs(UpdateOverItemEvent));
}
}
}

ListBox/ListView et de la zone de liste déroulante: Dans Windows 7 (et 8?), ce sera la cause de la conception de TreeView à ListBox/ListView et ComboBox diffèrent. Par conséquent, si vous souhaitez appliquer ce schéma de couleur pour ces types de contrôle aussi bien, aussi, utiliser ceci:

<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border Name="Border" BorderThickness="1" Background="Transparent">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Border" Property="Background" Value="#E5F3FB" />
<Setter TargetName="Border" Property="BorderBrush" Value="#70C0E7" />
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Border" Property="Background" Value="#CBE8F6" />
<Setter TargetName="Border" Property="BorderBrush" Value="#26A0DA" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="True" />
<Condition Property="Selector.IsSelectionActive" Value="False" />
</MultiTrigger.Conditions>
<Setter TargetName="Border" Property="Background" Value="#F6F6F6" />
<Setter TargetName="Border" Property="BorderBrush" Value="#DADADA" />
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type ListViewItem}" BasedOn="{StaticResource {x:Type ListBoxItem}}" />
<Style TargetType="{x:Type ComboBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBoxItem}">
<Border Name="Border" BorderThickness="1" Padding="1" Background="Transparent">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Border" Property="Background" Value="#E5F3FB" />
<Setter TargetName="Border" Property="BorderBrush" Value="#70C0E7" />
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Border" Property="Background" Value="#CBE8F6" />
<Setter TargetName="Border" Property="BorderBrush" Value="#26A0DA" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

InformationsquelleAutor bytecode77

Vous devez vous connecter pour publier un commentaire.