9/13/10

ListView SelectedItem color and Alternate row background

Lots of examples on how to change ListView SelectedItem color will overwrite the System.Colors.HighlightBrushKey and SystemColors.ControlBrushKey:
<Style x:Key="myListboxStyle">
    <Style.Resources>
        <!-- Background of selected item when focussed -->
        <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Red" />                
        <!-- Background of selected item when not focussed -->
        <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Green" />
    </Style.Resources>
</Style>
You can argue whether that's elegant or not, I just didn't want to do that, so below is a slightly different aproach: I create my own element (Border in this case) and change it's color. Also jammed into here alternate background triggers.
<ListView ItemContainerStyle="{StaticResource ListViewItemStyle}"
          AlternationCount="2" />

<Style x:Key="ListViewItemStyle" TargetType="ListViewItem">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="ListBoxItem">
        <Border x:Name="Border" SnapsToDevicePixels="true">
          <GridViewRowPresenter VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
        </Border>
        <ControlTemplate.Triggers>
        
          <Trigger Property="IsSelected" Value="true">
            <Setter TargetName="Border" Property="Background" Value="Blue"/>
          </Trigger>
          
          <MultiTrigger>
            <MultiTrigger.Conditions>
              <Condition Property="IsSelected" Value="false"/>
              <Condition Property="ItemsControl.AlternationIndex" Value="1"/>
            </MultiTrigger.Conditions>
            <Setter TargetName="Border" Property="Background" Value="WhiteSmoke"/>
          </MultiTrigger>
    
      <MultiTrigger>
        <MultiTrigger.Conditions>
          <Condition Property="IsSelected" Value="false"/>
          <Condition Property="ItemsControl.AlternationIndex" Value="2"/>
        </MultiTrigger.Conditions>
        <Setter TargetName="Border" Property="Background" Value="White"/>
      </MultiTrigger>
    
    </ControlTemplate.Triggers>
     </ControlTemplate>
   </Setter.Value>
  </Setter>
</Style>

MSDN shows example:

<Trigger Property="ItemsControl.AlternationIndex" Value="1">
  <Setter Property="Background" Value="WhiteSmoke"></Setter>
</Trigger>
<Trigger Property="ItemsControl.AlternationIndex" Value="2">
  <Setter Property="Background" Value="White"></Setter>
</Trigger>

Which will not work for my trigger (since I am using a Border the ControlTemplate). So instead of operating directly on ItemControl.AlternationIndex, I change the background of a different element - Border.

 

1 comment:

  1. Anonymous5/16/2014

    Thanks u saved my time..

    ReplyDelete