2013-02-12 98 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