如何设置WPF ListView选择项目颜色？

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重新创建Mail 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 * Questions but none seem to work for me. e.g.

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

Selected item loses style when focus moved out in WPF ListBox

当焦点在WPF ListBox中移出时，所选项目会丢失样式

WPF ListView Inactive Selection Color

WPF ListView非活动选择颜色

Here is the code I have for my listview:

这是我的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.

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

2 个解决方案

#1

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);
        }            
    }

#2

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