如何在WPF ListViewItem的样式中删除IsMouseOver出现的渐变效果？

Question

在以下Window中，我为IsMouseOver定义了一个触发器。背景颜色正确更改，但它具有渐变效果。见下图。如何摆脱这种影响？

仅将Theme.DataGrid.Row.Background.Hover从单独的样式文件移至下面的代码摘录。

<Window x:Class="MyCompany.Application.Shared.UI.Dialogs.SomeWindow
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525" Background="#FFF3F3F7">
    <Window.Resources>
        <SolidColorBrush x:Key="Theme.DataGrid.Row.BorderBrush" Color="#FFF3F3F7" options:Freeze="True" />
        <SolidColorBrush x:Key="Theme.DataGrid.Row.Background" Color="White" options:Freeze="True" />
        <SolidColorBrush x:Key="Theme.DataGrid.Row.Background.Hover" Color="#FFAEAEB6" options:Freeze="True" />
        <SolidColorBrush x:Key="Theme.DataGrid.Row.Background.Active" Color="#FF0D6AA8" options:Freeze="True" />
        <SolidColorBrush x:Key="Theme.DataGrid.Row.Background.HoverSelected" Color="#FF009AD9" options:Freeze="True" />
        <SolidColorBrush x:Key="Theme.DataGrid.Row.Background.Disabled" Color="#FFAEAEB6" options:Freeze="True" />
        <SolidColorBrush x:Key="Theme.DataGrid.Row.Foreground.Selected" Color="White" options:Freeze="True" />

        <Style x:Key="GridView.ColumnHeader.Gripper.Style" TargetType="{x:Type Thumb}">
            <Setter Property="Width" Value="8" />
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="Cursor" Value="SizeWE" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Thumb}">
                        <Border Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style TargetType="{x:Type GridViewColumnHeader}" >
            <EventSetter Event="FrameworkElement.Loaded" Handler="GridViewColumnHeader_Loaded"/>
            <Setter Property="FontWeight" Value="Bold"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="Background" Value="{StaticResource Theme.DataGrid.ColumnHeader.Background}"/>
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type GridViewColumnHeader}">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="1" />
                            </Grid.ColumnDefinitions>
                            <Border Grid.Column="0"  x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                            Background="{TemplateBinding Background}">
                                <ContentPresenter Margin="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                            </Border>
                            <Thumb Grid.Column="1" x:Name="PART_HeaderGripper" HorizontalAlignment="Right" Style="{DynamicResource Theme.DataGrid.ColumnHeader.Gripper.Style}"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style TargetType="{x:Type ListView}" >
            <Setter Property="BorderThickness" Value="{DynamicResource Theme.DataGrid.BorderThickness}"/>
            <Setter Property="Background" Value="{StaticResource Theme.TreeView.Background}"/>
        </Style>

        <Style TargetType="{x:Type ListViewItem}" >
            <Setter Property="Background" Value="White" />
            <Setter Property="Foreground" Value="{DynamicResource Theme.DataGrid.Row.Foreground}" />
            <Setter Property="VerticalAlignment" Value="Stretch"/>
            <Setter Property="HorizontalAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="Padding" Value="{DynamicResource Theme.DataGrid.Cell.Padding}"/>
            <Setter Property="Margin" Value="1"/>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="{DynamicResource Theme.DataGrid.Row.Background.Hover}" />
                </Trigger>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="Background" Value="{DynamicResource Theme.DataGrid.Row.Background.Active}" 
                    <Setter Property="Foreground" Value="{DynamicResource Theme.DataGrid.Row.Background.Selected}" />
                </Trigger>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter Property="Background" Value="{DynamicResource Theme.DataGrid.Row.Background.Disabled}" />
                </Trigger>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="IsMouseOver" Value="True" />
                        <Condition Property="IsSelected" Value="True" />
                    </MultiTrigger.Conditions>
                    <Setter Property="Background" Value="{DynamicResource Theme.DataGrid.Row.Background.HoverSelected}" />
                </MultiTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>

    <StackPanel>
        <CheckBox Content="IsGrouped"  IsChecked="{Binding IsGrouped}"/>
        <ListView Margin="10" ItemsSource="{Binding Users}">    
            <ListView.View>
                <GridView AllowsColumnReorder="False">
                    <GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}" />
                    <GridViewColumn Header="Age"  DisplayMemberBinding="{Binding Age}" />
                    <GridViewColumn Header="Mail"  DisplayMemberBinding="{Binding Mail}" />
                    <GridViewColumn Header="Group"  DisplayMemberBinding="{Binding Group}" />
        </ListView>
    </StackPanel>
</Window>

ViewModel（请注意，这使用我们自己的ViewModel类，即引发PropertyChanged个事件）

namespace MyCompany.Application.Shared.UI.Dialogs
{
    public class User
    {
        public string Name { get; set; }

        public int Age { get; set; }

        public string Mail { get; set; }

        public string Group { get; set; }
    }

    public class SomeWindowViewModel : ViewModel
    {
        List<User> items = new List<User>();

        IEnumerable<User> GetUsers()
        {
            foreach (var item in items)
            {
                yield return item;
            }
        }
        public ICollectionView Users { get; }

        private bool _isGrouped = false;
        public bool IsGrouped
        {
            get { return _isGrouped; }
            set
            {
                _isGrouped = value;
                if (value)
                {
                    Users.GroupDescriptions.Add(new PropertyGroupDescription("Group"));
                }
                else
                {
                    Users.GroupDescriptions.Clear();
                }
            }
        }

        public SomeWindowViewModel()
        {
            items.Add(new User() { Name = "John Doe", Age = 42, Mail = "john@doe-family.com", Group = "OneGroup1" });
            items.Add(new User() { Name = "Jane Doe", Age = 39, Mail = "jane@doe-family.com", Group = "OneGroup1" });
            items.Add(new User() { Name = "Sammy Doe", Age = 7, Mail = "sammy.doe@gmail.com", Group = "TwoGroup2" });
            items.Add(new User() { Name = "Pentti Doe", Age = 7, Mail = "pena.doe@gmail.com", Group = "TwoGroup2" });
            Users = CollectionViewSource.GetDefaultView(GetUsers());
        }
    }
}

Answer 1

我在给定的代码示例中遇到了一些问题，例如：缺少资源或无法解决的其他options:Freeze="true"，因此我的解决方案可能看起来有点不同，但我认为它可以满足您的需求：它会消除渐变效果。

问题是默认的ListViewItem模板具有更改背景的触发器（正如您已经发现的那样），并且方法是使用简化的ControlTemplate而没有任何触发器。

此example of a simplified template有效，您可以将其放在{x:Type ListViewItem}中，以获得如下图所示的效果。

<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type ListViewItem}">
            <Border Padding="{TemplateBinding Padding}"
                    Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    SnapsToDevicePixels="true">
                <GridViewRowPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                      SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
            </Border>
        </ControlTemplate>
    </Setter.Value>
</Setter>

使用该模板，如果您首先选择"Sammy Doe 7"然后将鼠标悬停在"Jane Doe 39"上，则会出现这种情况，

这就是您选择（例如点击）"Jane Doe 39"时的外观：

我不完全确定你的意思

  

因为jsanalytics指出行中的控件模板结果是类名而不是数据

但据我所知，上面的代码不应该导致这种行为。如果确实如此，请告诉我，我会找到另一种解决方案。