当鼠标悬停在ListViewItem上时更改背景颜色

14

我需要帮助。我不明白为什么我找到的所有解决方案都不能解决我的问题。让我们考虑一个带有这些项目的 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>

初始状态下,当我悬停在每一行时,看到的是TextBlock默认的浅蓝色高亮显示,只强调文本区域:

我不想要那种高亮显示,我想要整行的高亮显示,并且我想要决定颜色。当选择时,我也希望整行突出显示: enter image description here

我尝试使用样式、触发器或ItemContainerStyle。我意识到我必须考虑TextBox和ListViewItem文本区域的背景颜色,而整行的背景似乎是由ListView.ItemContainerStyle决定的。

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

是:enter image description here

然后我添加了另一个样式,试图消除文本框下的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>

但这毫无效果。

尝试使用此方法来突出显示整行是行不通的:

<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都是如此,但我不知道如何更改整行的背景。

有人能提供一个我正在尝试做的示例吗?


更改DataTemplate中容器的背景。 - AnjumSKhan
4个回答

27

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

因此,打开 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。


这段代码遵循我提供的链接中解决方案的思路。这里的结果与初始情况相同,但颜色是自定义的。如果我能将ListViewItem的宽度更改为与整行相同,那么它将解决我的问题。但是,如果我将HorizontalContentAlignment属性更改为Stretch而不是您代码中提供的值,则无法正常工作。 - Ángel Fas

21

试一下这个:

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

我尝试过这个,但它只是给文本区域加下划线,而不是整行。 - Ángel Fas
1
在这种情况下,TargetType="{x:Type ListViewItem}"非常重要。 - mechanic
1
那个方法不起作用,请参考上面@mathayk的帖子。列表视图是更复杂的控件,改变背景什么也不做。 - Brun
1
这对我有用,但我想摆脱渐变效果,不确定如何操作,如果我只设置背景颜色,它会改变颜色,但渐变效果仍然存在。 - IronHide

1
以下是一种样式,允许您在鼠标悬停时更改ListViewItem的背景颜色。
查看和编辑给定控件的所有样式选项的最简单方法是导出控件的默认模板。点击控件,选择属性,杂项,ItemContainerStyle,向下箭头,转换为新资源。这是一个相当长的模板,因此我只删除了我不需要的部分。
警告:属性列表中有两个非常相似的项目(ItemContainerStyle和ItemContainerStyleSelector),请挑选正确的一个。如果属性窗口不够宽,很容易错过。
    <Window.Resources>
        <Style x:Key="MIN_ListViewContainerStyle" TargetType="{x:Type ListViewItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBoxItem}">
                        <Border x:Name="Bd" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" TargetName="Bd" Value="Gold"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    
     <StackPanel>
        <ListView ItemContainerStyle="{DynamicResource MIN_ListViewContainerStyle}">
            <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>
        </ListView>
    </StackPanel>
</Window>

0

您可以参考我项目中使用的代码(DataGrid),我认为对于ListView也是适用的:

enter image description here

<Style TargetType="{x:Type DataGridCell}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type DataGridCell}">
                <Grid Background="{TemplateBinding Background}">
                    <ContentPresenter Margin="0,0,8,0" VerticalAlignment="Center" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="ToolTip" Value="点击查看详情" />
    <Setter Property="ToolTipService.InitialShowDelay" Value="3000" />
    <EventSetter Event="PreviewMouseLeftButtonDown" Handler="DataGrid_Cell_PreviewMouseLeftButtonDown" />
    <Style.Triggers>
        <Trigger Property="IsSelected" Value="True">
            <Setter Property="Background" Value="#AECBFA" />
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
        </Trigger>
    </Style.Triggers>
</Style>
<Style TargetType="{x:Type DataGridRow}">
    <Setter Property="Background" Value="White" />
    <Style.Triggers>
        <DataTrigger Binding="{Binding ItemType}" Value="Ok">
            <Setter Property="Background" Value="{StaticResource OkBrush}" />
        </DataTrigger>
        <DataTrigger Binding="{Binding ItemType}" Value="Error">
            <Setter Property="Background" Value="{StaticResource ErrorBrush}" />
        </DataTrigger>
        <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
                <Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="False" />
                <Condition Binding="{Binding AnalyzeStatus}" Value="Analyzing" />
            </MultiDataTrigger.Conditions>
            <MultiDataTrigger.EnterActions>
                <BeginStoryboard x:Name="bsbTwinkle">
                    <Storyboard>
                        <ColorAnimation AutoReverse="True"
                                        RepeatBehavior="Forever"
                                        Storyboard.TargetProperty="(DataGridRow.Background).(SolidColorBrush.Color)"
                                        From="Transparent"
                                        To="LightPink"
                                        Duration="0:0:1">
                            <ColorAnimation.EasingFunction>
                                <SineEase />
                            </ColorAnimation.EasingFunction>
                        </ColorAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </MultiDataTrigger.EnterActions>
            <MultiDataTrigger.ExitActions>
                <RemoveStoryboard BeginStoryboardName="bsbTwinkle" />
            </MultiDataTrigger.ExitActions>
        </MultiDataTrigger>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="#7FB5C8F9" />
        </Trigger>
    </Style.Triggers>
</Style>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接