如何设置 WPF ListView 选定项颜色？

Posted 2023-02-21

【中文标题】如何设置 WPF ListView 选定项颜色？

【英文标题】：How to set a WPF ListView Selected Item color?

【发布时间】：2013-01-28 02:41:20

【问题描述】：

我正在尝试在 Windows 7 上运行的 WPF 应用程序中从 Windows 8 重新创建邮件 UI。这是我想要实现的目标：

特别是，我不知道如何更改所选项目的背景颜色，例如第一列中的收件箱项目和第二列中来自 Twitter 的邮件。我已经尝试了其他类似 *** Questions 的几种解决方案，但似乎没有一个对我有用。例如

Selected item loses style when focus moved out in WPF ListBox

WPF ListView Inactive Selection Color

这是我的列表视图的代码：

<ListView Grid.Row="0" SelectedItem="Binding Path=SelectedArea" ItemsSource="Binding Path=Areas" Background="#DCE3E5" >

                    <ListView.Resources>

                        <!-- Template that is used upon selection of an Area -->
                        <ControlTemplate x:Key="SelectedTemplate" TargetType="ListViewItem">
                            <Border Background="#388095" Cursor="Hand" >
                                <TextBlock Text="Binding Name" Margin="5" />
                            </Border>                                
                        </ControlTemplate>

                        <Style TargetType="ListViewItem">
                            <Setter Property="Template">
                                <Setter.Value>                                        
                                    <!-- Base Template that is replaced upon selection -->
                                    <ControlTemplate TargetType="ListViewItem">
                                        <Border Background="#DCE3E5" Cursor="Hand"  >
                                            <TextBlock Text="Binding Name" Margin="5" />
                                        </Border>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                            <Style.Triggers>
                                <MultiTrigger>
                                    <MultiTrigger.Conditions>
                                        <Condition Property="IsSelected" Value="true" />
                                    </MultiTrigger.Conditions>
                                    <Setter Property="Template" Value="StaticResource SelectedTemplate" />
                                </MultiTrigger>
                            </Style.Triggers>
                        </Style>

                    </ListView.Resources>                        

                </ListView>

如何更改所选项目的背景颜色？以及如何在焦点变化时保留颜色变化。

【参考方案1】：

我最近做了类似的事情：

<ListView.Resources>                
    <ControlTemplate x:Key="SelectedTemplate" TargetType="ListViewItem">
        <Border CornerRadius="5" BorderThickness="1" BorderBrush="DarkGray" Background="#FF92C6F9" Padding="2" HorizontalAlignment="Left" Margin="5" Tag="Binding Value" Cursor="Hand" MouseUp="Border_MouseUp_1">                        
            <TextBlock Text="Binding Name" Margin="5" />
        </Border>
    </ControlTemplate>
    <Style TargetType="ListViewItem">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListViewItem">
                    <Border CornerRadius="5" BorderThickness="1" BorderBrush="DarkGray" Background="WhiteSmoke" Padding="2" HorizontalAlignment="Left" Margin="5" Tag="Binding Value" Cursor="Hand" MouseUp="Border_MouseUp_1" >                                    
                        <TextBlock Text="Binding Name" Margin="5" />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="IsSelected" Value="true" />
                    <Condition Property="Selector.IsSelectionActive" Value="true" />
                </MultiTrigger.Conditions>                            
                <Setter Property="Template" Value="StaticResource SelectedTemplate" />                            
            </MultiTrigger>
        </Style.Triggers>
    </Style>
</ListView.Resources>

我相信删除：

<Condition Property="Selector.IsSelectionActive" Value="true" />

将允许您在失去焦点后保持背景颜色。

编辑：

在下面回答您的问题：

可以将TextBlock的tag属性绑定到command参数，然后在TextBlock的MouseUp事件上执行命令：

<TextBlock x:Name="MyTextBlock" Text="Click Me!" Tag="Binding MyCommandParameter" MouseUp="MyTextBlock_MouseUp" />

在后面的代码中：

    private void MyTextBlock_MouseUp(object sender, MouseButtonEventArgs e)
    
        TextBlock tb = sender as TextBlock;

        if (tb != null && tb.Tag != null)
        
            ViewModel.MyCommand.Execute(tb.Tag);
                    
    

【讨论】：

谢谢@TrueEddie。我的机器正在运行，我无法测试您的解决方案。我会尽快修复我的机器。

这显示了正确的选择。但是现在我们使用 TextBlock 而不是我使用的超链接，我不再能够提供我需要调用的命令。如何提供命令和相关参数？当我用超链接替换您的 Border 元素时，它允许我在超链接外部单击时更​​改颜色，但不允许我调用该命令。当我单击超链接时，它允许我调用命令，但颜色没有改变。

编辑对我不起作用，但我能够将 ListView SelectedItem 绑定到我在 MVVM 模型中创建的依赖属性，并在更改此属性时加载下一个列表视图。这消除了对超链接的需要，并且我已经从您的代码中获得了背景颜色。所以，现在我有了完整的解决方案。非常感谢你的帮助。几分钟后，我将在我的问题中发布最终的 ListView。

谢谢，很高兴能帮上忙；）

【参考方案2】：

只是添加到“TrueEddie”点。

另一个选项是 ListView 中的“ItemContainerStyle”。

  <ListView Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" 


                  BorderThickness="0" 
                     ItemContainerStyle="StaticResource ListViewSmartNotes"
                  SelectedItem="Binding SelectedSmartNotes, Mode=TwoWay"
                  ItemsSource="Binding LstSmartNotes, Mode=TwoWay" 
                  ItemTemplate="DynamicResource ListViewItemOptionStyle">


        </ListView>

在 Style.xml 中定义的 ListViewItemOptionStyle

<Style x:Key="ListViewItemOptionStyle" TargetType="ListViewItem">
        <Setter Property="Template">
            <Setter.Value>
                <!-- Trun off default selection-->
                <ControlTemplate TargetType="x:Type ListViewItem">
                    <Border x:Name="Bd" BorderBrush="Gray" BorderThickness="0,1,0,1" 
                            Background="TemplateBinding Background" 
                            Padding="TemplateBinding Padding" 
                            SnapsToDevicePixels="true">
                        <ContentPresenter 
                            HorizontalAlignment="TemplateBinding HorizontalContentAlignment" 
                            SnapsToDevicePixels="TemplateBinding SnapsToDevicePixels" 
                            VerticalAlignment="TemplateBinding VerticalContentAlignment"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground"
                                    Value="DynamicResource x:Static SystemColors.GrayTextBrushKey"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
        </Setter.Value>
        </Setter>
    <Style.Triggers>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsSelected" Value="True" />
            </MultiTrigger.Conditions>
            <MultiTrigger.Setters>
                <Setter Property="Background" Value="Green" />
                <Setter Property="BorderBrush" Value="Green" />
                <Setter Property="Foreground" Value="White"/>
            </MultiTrigger.Setters>
        </MultiTrigger>
    </Style.Triggers>
</Style>

更多详情

https://sites.google.com/site/greateindiaclub/mobil-apps/windows8/wpfimportantbindings

【讨论】：

我相信你的 ItemContainerStyle 和 ItemTemplate 绑定是相反的，应该是ItemContainerStyle="StaticResource ListViewItemOptionStyle"，否则你会得到一个转换异常。另外，可能只有我一个人，如果涉及多个列，我建议使用<GridViewRowPresenter Content="TemplateBinding Content" /> 而不是使用<ContentPresenter />。