web-dev-qa-db-fra.com

Changer la couleur d'arrière-plan de ListViewItem en survolant la souris

J'ai besoin d'un peu d'aide par ici. Je ne comprends pas pourquoi aucune des solutions que j'ai trouvées n'a fonctionné pour mon cas. Considérons une liste avec ces éléments:

<ListView.Items>
    <ListViewItem>
          <TextBlock xml:space="preserve">  1 <Bold>I'm bold</Bold>   </TextBlock>
    </ListViewItem>
    <ListViewItem>
          <TextBlock  xml:space="preserve"> 2 Im not </TextBlock>
    </ListViewItem>
</ListView.Items>

Au début, en survolant chaque ligne, j'ai vu le point culminant du TextBlock dans son bleu clair par défaut. Il a seulement souligné la zone avec du texte:
 

Je ne veux pas de ce surlignage, je veux celui de la rangée entière et je veux décider de la couleur. Je souhaite également la surbrillance de toute la ligne lors de la sélection de:  enter image description here

J'ai joué avec Styles, Triggers ou ItemContainerStyle. J'ai réalisé que je devais prendre en compte l'arrière-plan de la zone de texte et celui de ListViewItem pour la zone avec du texte. Et l'arrière-plan de toute la ligne semble être une activité de ListView.ItemContainerStyle. 

Résultat de l’ajout d’un style à la zone de texte:

    <Style x:Key="TextBlockStyle" TargetType="{x:Type TextBlock}">
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
               <Setter Property="Foreground" Value="Black" />
                <Setter Property="Background" Value="White"/> 
            </Trigger>
        </Style.Triggers>
    </Style>

<ListView Grid.Column="1" Margin="0" HorizontalContentAlignment="Stretch" BorderThickness="0" >
        <ListView.Resources>
                <Style BasedOn="{StaticResource TextBlockStyle}" TargetType="{x:Type TextBlock}" />   
          </ListView.Resources>

est:  enter image description here

Ensuite, j'ajoute un autre style pour essayer de supprimer l'arrière-plan de ListView sous la zone de texte:

    <Style x:Key="ListViewItemStyle" TargetType="{x:Type ListViewItem}">
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" Value="Gold" />
                        </Trigger>
                    </Style.Triggers>
     </Style>

 <ListView Grid.Column="1" Margin="0" HorizontalContentAlignment="Stretch" BorderThickness="0" >
        <ListView.Resources>
                <Style BasedOn="{StaticResource TextBlockStyle}" TargetType="{x:Type TextBlock}" />
                 <Style BasedOn="{StaticResource ListViewItemStyle}" TargetType="{x:Type ListViewItem}" />    
          </ListView.Resources>

Mais cela n'a aucun effet. 

Et essayer de mettre en évidence toute la ligne avec cela ne fonctionne pas:

<ItemsControl.ItemContainerStyle>
    <Style>
        <Style.Triggers>
               <Trigger Property="Control.IsMouseOver" Value="True">
                    <Setter Property="Control.Background" Value="Gold" />
                        </Trigger>
         </Style.Triggers>
    </Style>
</ItemsControl.ItemContainerStyle>

Et essayé plusieurs autres suggestions pendant des heures. Celui-ci: Supprimer l'effet de survol de la souris sur un ListView dans WPF évite la surbrillance sur le texte en survol, à la fois pour la zone de texte et pour le ListViewItem, mais je ne sais pas comment changer le contexte de toute la ligne. Quelqu'un pourrait-il donner un exemple de ce que je tente de faire? 

wpfxamllistviewbackgroundmouseover
6
Miguel Angel Fas

Le moyen le plus simple de voir et de modifier toutes les options de style pour un élément donné consiste à exporter le modèle par défaut d'un contrôle.

Par conséquent, ouvrez Visual Studio ou Blend et clic droit dans la vue Conception d'un contrôle. Passez sur "Modifier le modèle" -> et sélectionnez "Modifier une copie ..." Sortie: 

        <SolidColorBrush x:Key="Item.MouseOver.Background" Color="Gold"/>
        <SolidColorBrush x:Key="Item.MouseOver.Border" Color="#a826A0Da"/>
        <SolidColorBrush x:Key="Item.SelectedInactive.Background" Color="#3DDADADA"/>
        <SolidColorBrush x:Key="Item.SelectedInactive.Border" Color="#FFDADADA"/>
        <SolidColorBrush x:Key="Item.SelectedActive.Background" Color="#3D26A0DA"/>
        <SolidColorBrush x:Key="Item.SelectedActive.Border" Color="#FF26A0DA"/>

        <Style x:Key="ListViewContainerStyle" TargetType="{x:Type ListViewItem}">
            <Setter Property="SnapsToDevicePixels" Value="True"/>
            <Setter Property="Padding" Value="4,1"/>
            <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
            <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListViewItem}">
                        <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsMouseOver" Value="True"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="Background" TargetName="Bd" Value="{StaticResource Item.MouseOver.Background}"/>
                                <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource Item.MouseOver.Border}"/>
                            </MultiTrigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="Selector.IsSelectionActive" Value="False"/>
                                    <Condition Property="IsSelected" Value="True"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="Background" TargetName="Bd" Value="{StaticResource Item.SelectedInactive.Background}"/>
                                <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource Item.SelectedInactive.Border}"/>
                            </MultiTrigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="Selector.IsSelectionActive" Value="True"/>
                                    <Condition Property="IsSelected" Value="True"/>
                                </MultiTrigger.Conditions>
                                <Setter Property="Background" TargetName="Bd" Value="{StaticResource Item.SelectedActive.Background}"/>
                                <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource Item.SelectedActive.Border}"/>
                            </MultiTrigger>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter Property="TextElement.Foreground" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Vous avez maintenant un bon point de départ pour personnaliser votre ItemContainerStyle.

12
mathayk

Essaye ça:

        <ListView.ItemContainerStyle>
            <Style TargetType="{x:Type ListViewItem}">
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="Gold" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </ListView.ItemContainerStyle>
12
mechanic

Eh bien, j'ai abandonné et j'ai essayé un autre chemin. Je me suis rendu compte que changer les ListViewItems pour les boutons, puis la ligne entière a été mise en surbrillance au passage de la souris. Je cherchais cela non seulement pour des raisons esthétiques. Dans la situation d'origine, l'utilisateur doit déplacer le pointeur juste au-dessus du texte pour le sélectionner. Mais maintenant, ils peuvent sélectionner simplement le pointeur dans cette rangée. Vous n'avez pas besoin de déplacer la souris au-dessus du texte. Je trouve cela plus confortable et rapide pour l'utilisateur, ce qui est très important pour le type d'interface que je fais, car il devra le faire assez souvent.

Ainsi, le code de @mathayk fonctionne pour moi avec des boutons au lieu de ListViewItems. 

Merci à tous pour votre temps.

0
Miguel Angel Fas