在鼠标悬停时更改 ListViewItem 背景颜色 [英] Change ListViewItem background colour on mouse over

问题描述

我需要一些帮助.我不明白为什么我找到的解决方案都不适用于我的案例.让我们考虑一个包含这些项目的 Listview:

I need some help here. I can't understand why none of the solutions I found work for my case. Let's consider a Listview with these items:

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

最初悬停在每一行时，我看到 TextBlock 的突出显示为默认的浅蓝色.它只用文字强调了该区域:

Initially on hover each row I saw the highlight of the TextBlock in its default light blue. It only underlined the area with text:

我不想要那个突出显示我想要整个行中的一个，并且我想决定颜色.选择时我还想要整行的突出显示:

I don't want that highlight I want the one of the whole row, and I want to decide the colour. I also want the highlight of the whole row when selecting:

我一直在玩样式、触发器或 ItemContainerStyle.我意识到我必须考虑文本框的背景，以及带有文本的区域的 ListViewItem 之一.而且整排的背景好像是ListView.ItemContainerStyle的业务.

I've been playing with Styles, Triggers or the ItemContainerStyle. I realized that I have to consider the background of the Textbox, and the one of the ListViewItem for the area with text. And the background of the whole row seems to be a business of the ListView.ItemContainerStyle.

为 TextBox 添加样式的结果:

The result of adding a style fot the TextBox:

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

是:

然后我添加另一种样式来尝试摆脱TextBox下的ListView背景:

Then I add another style to try to get rid of the ListView background under the TextBox:

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

但这根本没有效果.

试图用这个来突出显示整行是行不通的:

And trying to highlight the whole row with this doesn't work:

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

并尝试了几个小时的其他建议.这个:在 WPF 中删除 ListView 上的鼠标悬停效果 避免在悬停时突出显示文本，对于 TextBox 和 ListViewItem，但我不知道如何改变整行的背景.有人可以提供一个我正在尝试做的例子吗?

And tried several other suggestions for hours. This one: Remove the mouse over effect on a ListView in WPF avoids the highlight over the text on hover,both for the TextBox and the ListViewItem, but I don't know how to change then the background of the whole row. Could someone provide an example of what I'm trying to do?

推荐答案

查看和更改给定元素的所有样式选项的最简单方法是导出控件的默认模板.

The easiest way to see and change all styling-options for a given element is to export the default template for a control.

因此打开 Visual Studio 或 Blend 并在控件的设计视图中右键单击.将鼠标悬停在编辑模板"-> 并选择编辑副本..."输出:

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

现在您有一个很好的起点来定制您的 ItemContainerStyle.

Now you have a good starting point to get your ItemContainerStyle customized.

这篇关于在鼠标悬停时更改 ListViewItem 背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！