2013-02-12 133 views
12

我试图重新从Windows 8在WPF应用程序在Windows 7上运行的邮件UI这是我想达到的目标:如何设置WPF ListView Selected Item颜色?

Target UI

特别是,我不知道如何改变选定项目的背景颜色,例如第一列中的收件箱项目和第二列中的Twitter邮件。我已经尝试了其他类似的Stackoverflow问题的几个解决方案,但似乎没有为我工作。例如

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> 

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

回答

14

我做类似这样的事情最近:

<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的命令参数的标签属性绑定,然后在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); 
     }    
    } 
+0

感谢@TrueEddie

<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。我的机器正在发挥作用,我无法测试您的解决方案。我将尽快恢复我的机器。 – Yasir 2013-02-12 19:36:30

+0

这显示正确的选择。但是现在我们正在使用TextBlock而不是我正在使用的超链接,我不再能够提供我需要调用的Command。我如何提供命令和相关参数?当我用超链接替换你的Border元素时,它允许我在超链接之外单击时改变颜色,但不让我调用该命令。当我点击超链接时,它允许我使用命令,但颜色不会改变。 – Yasir 2013-02-13 20:25:52

+0

我编辑了我上面的答案。 – TrueEddie 2013-02-13 21:05:57

7

只需添加到“TrueEddie”点。

另一个选项是ListView中的“ItemContainerStyle”。在Style.xml

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

+4

我相信你的** ItemContainerStyle **和** ItemTemplate **绑定是相反的,应该读取ItemContainerStyle =“{StaticResource ListViewItemOptionStyle}”',否则你会得到一个转换例外。另外,它可能只是我,如果涉及到多列,我会推荐使用''来使用''。 – famousKaneis 2015-06-22 14:39:00