Question

我正在尝试更改ListView项的外观，当它的Selected和它的悬停时。我已经尝试过其他问题的答案，这些问题建议使用Style.Trigger但不知何故这对我不起作用。它目前看起来像这样： Image of what it looks like now

以下是我使用的代码：

<UserControl x:Class="PROShine.TeamView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:PROShine"
             xmlns:sys="clr-namespace:System;assembly=mscorlib"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <UserControl.Resources>
        <SolidColorBrush x:Key="NormalBorderBrush" Color="#FF111111" />
        <SolidColorBrush x:Key="HeaderBackgroundColor" Color="#FF111111" />
        <SolidColorBrush x:Key="HeaderBorderBrush" Color="#FF1e1e1e" />
        <SolidColorBrush x:Key="NormalBrush" Color="#FF111111" />
        <SolidColorBrush x:Key="PressedBrush" Color="#FF1e1e1e" />
        <SolidColorBrush x:Key="SeperatorBrush" Color="#FF1e1e1e" />
        <SolidColorBrush x:Key="ForegroundDefault" Color="White" />
        <SolidColorBrush x:Key="SolidBorderBrush" Color="#FF111111" />
        <SolidColorBrush x:Key="WindowBackgroundBrush" Color="#FF0d0d0d" />

        <Style x:Key="GridViewColumnHeaderGripper" TargetType="Thumb">
            <Setter Property="Width" Value="18"/>
            <Setter Property="Background" Value="{StaticResource SeperatorBrush}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Thumb}">
                        <Border Padding="{TemplateBinding Padding}" Background="Transparent">
                            <Rectangle HorizontalAlignment="Center" Width="1" Fill="{TemplateBinding Background}"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="{x:Type GridViewColumnHeader}" TargetType="GridViewColumnHeader">
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Foreground" Value="{StaticResource ForegroundDefault}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="GridViewColumnHeader">
                        <Grid>
                            <Border Name="HeaderBorder" BorderThickness="0,0,0,1" BorderBrush="{StaticResource HeaderBorderBrush}" Background="{StaticResource HeaderBackgroundColor}" Padding="2,0,2,0">
                                <ContentPresenter Name="HeaderContent" Margin="0,0,0,1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                            </Border>
                            <Thumb x:Name="PART_HeaderGripper" HorizontalAlignment="Right" Margin="0,0,-9,0" Style="{StaticResource GridViewColumnHeaderGripper}"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter TargetName="HeaderBorder" Property="Background" Value="{StaticResource NormalBrush}"/>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="true">
                                <Setter TargetName="HeaderBorder" Property="Background" Value="{StaticResource PressedBrush}"/>
                                <Setter TargetName="HeaderContent" Property="Margin" Value="1,1,0,0"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Foreground" Value="White"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="Role" Value="Floating">
                    <Setter Property="Opacity" Value="0.7"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="GridViewColumnHeader">
                                <Canvas Name="PART_FloatingHeaderCanvas">
                                    <Rectangle Fill="#60000000" Width="{TemplateBinding ActualWidth}" Height="{TemplateBinding ActualHeight}"/>
                                </Canvas>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Trigger>
                <Trigger Property="Role" Value="Padding">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="GridViewColumnHeader">
                                <Border Name="HeaderBorder" BorderThickness="0,1,0,1" BorderBrush="{StaticResource NormalBorderBrush}" Background="{StaticResource HeaderBackgroundColor}"/>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>

        <Style x:Key="{x:Type ListView}" TargetType="{x:Type ListView}">
            <Setter Property="SnapsToDevicePixels" Value="true"/>
            <Setter Property="OverridesDefaultStyle" Value="true"/>
            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
            <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
            <Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Foreground" Value="{StaticResource ForegroundDefault}" />

            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListView}">
                        <Border Name="Border" BorderThickness="1" BorderBrush="{StaticResource SolidBorderBrush}" Background="{StaticResource WindowBackgroundBrush}">
                            <ScrollViewer Style="{DynamicResource {x:Static GridView.GridViewScrollViewerStyleKey}}">
                                <ItemsPresenter />
                            </ScrollViewer>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsGrouping" Value="true">
                                <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter TargetName="Border" Property="Background" Value="{StaticResource SolidBorderBrush}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="ListViewItem" TargetType="{x:Type ListViewItem}">
            <Setter Property="Foreground" Value="{StaticResource ForegroundDefault}"/>
            <Style.Triggers>
                <Trigger Property="IsSelected" Value="true">
                    <Setter Property="Background" Value="#FF111111" />
                </Trigger>
            </Style.Triggers>
        </Style>

    </UserControl.Resources>
    <Grid>
        <ListView Name="PokemonsListView" PreviewMouseLeftButtonDown="List_PreviewMouseLeftButtonDown" 
                        PreviewMouseMove="List_MouseMove"
                        Drop="List_Drop" 
                        DragEnter="List_DragEnter" 
                        AllowDrop="True" >
            <ListView.View>
                <GridView>
                    <GridViewColumn Header="Id" DisplayMemberBinding="{Binding Id}"/>
                    <GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}"/>
                    <GridViewColumn Header="Level" DisplayMemberBinding="{Binding Experience.CurrentLevel}"/>
                    <GridViewColumn Header="Status" DisplayMemberBinding="{Binding Status}"/>
                    <GridViewColumn Header="HP" DisplayMemberBinding="{Binding Health}"/>
                    <GridViewColumn Header="Remaining Exp" DisplayMemberBinding="{Binding Experience.RemainingExperience}"/>
                    <GridViewColumn Header="Item" DisplayMemberBinding="{Binding ItemHeld}"/>
                </GridView>
            </ListView.View>
        </ListView>
    </Grid>
</UserControl>

任何人都可以告诉我我做错了什么？

Answer 1

将您的风格绑定到ListView的ItemContainerStyle属性，如下所示：

<强> XAML：

<Window
    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"
    xmlns:local="clr-namespace:WpfApplication266"
    xmlns:Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero2" 
    x:Class="WpfApplication266.MainWindow"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">

<Window.Resources>

    <Style x:Key="ListViewItemStyle1" TargetType="{x:Type ListViewItem}">
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="true">
                <Setter Property="Background" Value="LightGreen" />
                <Setter Property="Foreground" Value="Blue" />
            </Trigger>
            <Trigger Property="IsSelected" Value="true">
                <Setter Property="Background" Value="LightCoral" />
                <Setter Property="Foreground" Value="White" />
            </Trigger>
        </Style.Triggers>
    </Style>

</Window.Resources>

<Window.DataContext>
    <local:MyViewModel/>
</Window.DataContext>

<Grid>
    <ListView x:Name="listView" Margin="0" 
              ItemsSource="{Binding Data}" 
              ItemContainerStyle="{StaticResource ListViewItemStyle1}">
        <ListView.View>
            <GridView>
                <GridViewColumn Header="ID" DisplayMemberBinding="{Binding ID}"/>
                <GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}"/>
            </GridView>
        </ListView.View>
    </ListView>
</Grid>

<强>视图模型：

public class MyViewModel
{
    public ObservableCollection<MyData> Data { get; set; }

    public MyViewModel()
    {
        Data = new ObservableCollection<MyData>
        {
            new MyData {ID = 1, Name = "Name 1" },
            new MyData {ID = 2, Name = "Name 2" },
            new MyData {ID = 3, Name = "Name 3" },
            new MyData {ID = 4, Name = "Name 4" },
            new MyData {ID = 5, Name = "Name 5" },
        };
    }
}

编辑：白色叠加是由于ColorAnimation与控件的VisualState相关联。为了摆脱这种情况，你必须覆盖相应的状态，如下面的样式所示：

    <Style x:Key="ListViewItemStyle2" TargetType="{x:Type ListViewItem}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListViewItem}">
                    <Border x:Name="ListBoxItemRoot" 
                            BorderBrush="{TemplateBinding BorderBrush}" 
                            BorderThickness="1,0" 
                            Background="{TemplateBinding Background}" 
                            CornerRadius="2" 
                            Uid="Border_57">
                        <GridViewRowPresenter Columns="{TemplateBinding GridView.ColumnCollection}" 
                                              Content="{TemplateBinding Content}" 
                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                              Margin="{TemplateBinding Padding}" 
                                              Uid="GridViewRowPresenter_1" 
                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"></VisualState>
                                <VisualState x:Name="Disabled"></VisualState>
                                <VisualState x:Name="MouseOver"></VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Selected"></VisualState>
                                <VisualState x:Name="Unselected"></VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="true">
                <Setter Property="Background" Value="LightGreen" />
                <Setter Property="Foreground" Value="Orange" />
            </Trigger>
            <Trigger Property="IsSelected" Value="true">
                <Setter Property="Background" Value="LightCoral" />
                <Setter Property="Foreground" Value="White" />
            </Trigger>
        </Style.Triggers>
    </Style>

如何在ListView中为Selected和MouseOver项设置样式

1 个答案: