2013-02-12 6 views
12

Я пытаюсь воссоздать почту UI из Windows 8 в приложении WPF работает на Windows 7. Вот что я хочу добиться:Как установить цвет элемента списка ListView WPF?

Target UI

В частности, я не знаю, как изменить цвет фона для выбранных элементов, например элемент «Входящие» в первом столбце и почта из Twitter во втором столбце. Я попробовал несколько решений от других подобных вопросов Stackoverflow, но ни один из них не работает для меня. например

Selected item loses style when focus moved out in WPF ListBox

WPF ListView Inactive Selection Color

Вот код, у меня есть для моей 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> 

Как я могу изменить цвет фона выбранного элемента? И как сохранить изменение цвета при изменении фокуса.

ответ

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

позволит вам сохранить цвет фона после фокус теряется.

EDIT:

В ответ на ваш вопрос ниже:

Вы можете связать свойство тега в TextBlock в параметре команды, а затем выполнить команду на событие MouseUp в TextBlock:

<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. Моя машина действует, и я не могу проверить ваше решение. Я вернусь, как только смогу исправить свою машину. – Yasir

+0

Это показывает выбор правильно. Но теперь, когда мы используем TextBlock вместо используемой гиперссылки, я больше не могу предоставить команду, которую мне нужно вызвать. Как я могу предоставить команду и связанный с ней параметр? Когда я заменяю элемент Border на гиперссылку, это позволяет мне изменять цвет при нажатии за пределами гиперссылки, но не позволяет мне вызвать команду. Когда я нажимаю гиперссылку, она позволяет мне выполнить команду, но цвет не изменяется. – Yasir

+0

Я отредактировал свой ответ выше. – TrueEddie

7

Просто добавьте точку «TrueEddie».

Другой вариант: «ItemContainerStyle» в ListView.

<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 определено в 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> 

Fore подробнее

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

+4

Я считаю, что ваши ** ItemContainerStyle ** и ** ItemTemplate ** привязки перевернуты и должны читать 'ItemContainerStyle =" {StaticResource ListViewItemOptionStyle} "', иначе вы получите преобразование исключение. Кроме того, это может быть только я, я бы рекомендовал использовать '' over using '', если задействовано несколько столбцов. – famousKaneis

Смежные вопросы