如何设置 WPF ListView Selected Item 颜色？

How to set a WPF ListView Selected Item color?

提问by Yasir

I am trying to recreate the Mail UI from Windows 8 in a WPF application running on Windows 7. Here's what I want to achieve:

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

In particular, I don't know how to change the background color for selected items e.g. the Inbox item in the first column and the mail from Twitter in the second column. I have tried several solutions from other similar Stackoverflow Questions but none seem to work for me. e.g.

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

Selected item loses style when focus moved out in WPF ListBox

当焦点在 WPF 列表框中移出时，所选项目失去样式

WPF ListView Inactive Selection Color

WPF ListView 非活动选择颜色

Here is the code I have for my listview:

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

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

How can I change the background color of the selected item? And how do I retain the color change when the focus changes.

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

回答by TrueEddie

I did something similar to this recently:

我最近做了类似的事情：

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

I believe removing:

我相信删除：

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

will allow you to keep the background color after focus is lost.

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

EDIT:

编辑：

In response to your question below:

在下面回答您的问题：

You can bind the tag property of the TextBlock to the command parameter, and then execute the command on the MouseUp event of the TextBlock:

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

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

And in the code behind:

在后面的代码中：

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

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

回答by Boobalan

Just adding to "TrueEddie" point.

只是添加到“TrueEddie”点。

The other option would be "ItemContainerStyle" in ListView.

另一个选项是 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>

ListViewItemOptionStyle defined in Style.xml

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

Fore more details

了解更多详情

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

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