wpf 鼠标悬停时更改 ListViewItem 背景颜色

Change ListViewItem background colour on mouse over

提问by Miguel Angel Fas

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：

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

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

最初在悬停每一行时，我看到 TextBlock 的高亮显示为默认的浅蓝色。它只用文本在该区域下划线：

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:

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

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.

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

The result of adding a style fot the TextBox:

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

is:

是：

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

然后我添加了另一种样式，尝试去掉 TextBox 下的 ListView 背景：

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

But this has no effect at all.

但这根本没有效果。

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>

And tried several other suggestions for hours. This one: Remove the mouse over effect on a ListView in WPFavoids 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?

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

回答by a1300

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

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

Therefore open Visual Studio or Blend and Right Click in the Design View on a control. Hover to 'Edit Template' -> And select 'Edit a Copy...'Output:

因此，在控件的设计视图中打开 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>

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

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

回答by mechanic

Try this:

尝试这个：

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

回答by Miguel Angel Fas

Well, I gave up and tried another path. I realized that changing the ListViewItems for Buttons, then the whole row was highlighted on mouse over. I was searching this not only for aesthetic reasons. In the original situation the user must move the pointer just over the text to select it. But now they can select just having the pointer in that row, you don't need to go and move the mouse just over the text. I find it quite more comfortable and quick for the user, and that's very important for the kind of interface I'm doing, because they'll need to make that quite frequently.

好吧，我放弃了并尝试了另一条路。我意识到更改按钮的 ListViewItems，然后在鼠标悬停时突出显示整行。我搜索这个不仅是出于审美原因。在原始情况下，用户必须将指针移动到文本上方才能选择它。但是现在他们可以选择只在该行中放置指针，您无需将鼠标移到文本上方。我发现它对用户来说更加舒适和快捷，这对于我正在做的那种界面非常重要，因为他们需要经常制作。

So, the code of @mathayk works for me with Buttons instead of ListViewItems.

所以，@mathayk 的代码对我来说适用于 Buttons 而不是 ListViewItems。

Thanks all of you for your time.

感谢大家的时间。