【问题标题】:How to set a WPF ListView Selected Item color?如何设置 WPF ListView 选定项颜色?
【发布时间】:2013-01-28 02:41:20
【问题描述】:

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

特别是,我不知道如何更改所选项目的背景颜色,例如第一列中的收件箱项目和第二列中来自 Twitter 的邮件。我已经尝试了其他类似 Stackoverflow 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>

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

【问题讨论】:

    标签: wpf listview styles background-color listviewitem


    【解决方案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

    【讨论】:

    • 我相信你的 ItemContainerStyleItemTemplate 绑定是相反的,应该是ItemContainerStyle="{StaticResource ListViewItemOptionStyle}",否则你会得到一个转换异常。另外,可能只有我一个人,如果涉及多个列,我建议使用&lt;GridViewRowPresenter Content="{TemplateBinding Content}" /&gt; 而不是使用&lt;ContentPresenter /&gt;
    猜你喜欢
    • 2013-11-06
    • 2017-01-12
    • 1970-01-01
    • 2014-06-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-08-28
    相关资源
    最近更新 更多