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

4uqofj5v  于 2022-12-14  发布在  其他
关注(0)|答案(4)|浏览(316)

我在这里需要一些帮助。我不明白为什么我找到的解决方案都不适用于我的案例。让我们考虑一个包含以下项目的列表视图:

<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的高亮显示是默认的浅蓝色,它只在文本区域加了下划线:

我不想要高亮显示,我想要整行高亮显示,我想要决定颜色。我还想要在选择时整行高亮显示:

我一直在玩Styles、Triggers或者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>

为:

然后我添加另一个样式来尝试摆脱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>

但这一点效果都没有。
尝试用以下方式突出显示整行是行不通的:

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

几个小时后,我又尝试了其他几个建议。Remove the mouse over effect on a ListView in WPF避免了文本框和ListViewItem在悬停时高亮显示,但我不知道如何更改整行的背景。有人能提供一个例子来说明我正在尝试做什么吗?

pwuypxnk

pwuypxnk1#

查看和更改给定元素的所有样式选项的最简单方法是导出控件的默认模板。
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...'输出:

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

zc0qhyus

zc0qhyus2#

试试这个:

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

ndasle7k3#

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

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

x3naxklr4#

下面的样式允许您在鼠标悬停时更改ListViewItem的背景颜色。
查看和编辑给定控件的所有样式选项的最简单方法是导出控件的默认模板。依次单击控件、“属性”、“杂项”、“ItemContainerStyle”、向下箭头、“转换为新资源”。
不过,问题是这不适用于ListView,但适用于共享相同样式的ListBox。要解决此问题,请将ListBox添加到xaml并使用它生成样式。您可以将ListBox的所有示例更改为导出样式中的ListView,但这不会有任何区别。

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

相关问题