How to Add an Alternating Row Style to WhistlerBlue ListView

Question

I have a ListView styled using the WhistlerBlue.xaml resource dictionary, as downlaoded from Codeplex: WPF DataGrid Themes from Silverlight.

I want alternating (odd & even) rows to have a different background colour.

I have added the following code to the default WhistlerBlue ListViewItem style (within the ControlTemplate.Triggers section):

     <Trigger Property="ItemsControl.AlternationIndex" Value="0">
          <Setter Property="Background" Value="White"></Setter>
     </Trigger>
     <Trigger Property="ItemsControl.AlternationIndex" Value="1">
          <Setter Property="Background" Value="AliceBlue"></Setter>
     </Trigger>

I have also set the ListView style's AlternatingCount property to 2, but the alternating style triggers are still not working.

Any pointers would be greatly appreciated.

I've pasted the complete ListViewItemStyle below.

<Style TargetType="{x:Type ListViewItem}">
    <Setter Property="FocusVisualStyle" Value="{StaticResource ListViewItemFocusVisual}" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="Margin" Value="0,0,0,1" />
    <Setter Property="Padding" Value="5,2,5,2" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="Foreground" Value="{StaticResource OutsideFontColor}"/>
    <Setter Property="Padding" Value="3" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListViewItem}">
                <ControlTemplate.Resources>
                    <Storyboard x:Key="HoverOn">
                        <DoubleAnimation Duration="00:00:00.00" Storyboard.TargetName="BackgroundGradientOver" Storyboard.TargetProperty="Opacity" To="0.73"/>
                    </Storyboard>
                    <Storyboard x:Key="HoverOff">
                        <DoubleAnimation Duration="00:00:00.00" Storyboard.TargetName="BackgroundGradientOver" Storyboard.TargetProperty="Opacity" To="0"/>
                    </Storyboard>
                    <Storyboard x:Key="SelectedOn">
                        <DoubleAnimation Duration="00:00:00.00" Storyboard.TargetName="BackgroundGradientSelected" Storyboard.TargetProperty="Opacity" To="0.84"/>
                        <DoubleAnimation Duration="00:00:00.00" Storyboard.TargetName="BackgroundGradientSelectedDisabled" Storyboard.TargetProperty="Opacity" To="1"/>
                    </Storyboard>
                    <Storyboard x:Key="SelectedOff">
                        <DoubleAnimation Duration="00:00:00.00" Storyboard.TargetName="BackgroundGradientSelected" Storyboard.TargetProperty="Opacity" To="0"/>
                        <DoubleAnimation Duration="00:00:00.00" Storyboard.TargetName="BackgroundGradientSelectedDisabled" Storyboard.TargetProperty="Opacity" To="0"/>
                    </Storyboard>
                </ControlTemplate.Resources>
                <Border SnapsToDevicePixels="true" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2" x:Name="border">
                    <Grid Margin="0">
                        <Rectangle x:Name="BackgroundGradientOver" Fill="{StaticResource hoverGradient}" Stroke="{StaticResource hoverStroke}" RadiusX="2" RadiusY="2" Opacity="0"/>
                        <Rectangle x:Name="BackgroundGradientSelectedDisabled" Fill="{StaticResource grayGradient}" Stroke="#7F8E8F8F" RadiusX="2" RadiusY="2" Opacity="0"/>
                        <Rectangle x:Name="BackgroundGradientSelected" Fill="{StaticResource BtnOverFill}" Stroke="{StaticResource selectedStroke}" RadiusX="2" RadiusY="2" Opacity="0"/>
                        <Rectangle x:Name="BackgroundHighlight" Margin="1" Stroke="#A0FFFFFF" RadiusX="1" RadiusY="1"/>
                        <GridViewRowPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Margin="0,2,0,2" VerticalAlignment="Stretch" />
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="ItemsControl.AlternationIndex" Value="0">
                        <Setter Property="Background" Value="White"></Setter>
                    </Trigger>
                    <Trigger Property="ItemsControl.AlternationIndex" Value="1">
                        <Setter Property="Background" Value="AliceBlue"></Setter>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Trigger.ExitActions>
                            <BeginStoryboard Storyboard="{StaticResource HoverOff}" x:Name="HoverOff_BeginStoryboard"/>
                        </Trigger.ExitActions>
                        <Trigger.EnterActions>
                            <BeginStoryboard Storyboard="{StaticResource HoverOn}"/>
                        </Trigger.EnterActions>
                    </Trigger>
                    <Trigger Property="IsSelected" Value="true">
                        <Trigger.ExitActions>
                            <BeginStoryboard x:Name="SelectedOff_BeginStoryboard" Storyboard="{StaticResource SelectedOff}"/>
                        </Trigger.ExitActions>
                        <Trigger.EnterActions>
                            <BeginStoryboard x:Name="SelectedOn_BeginStoryboard" Storyboard="{StaticResource SelectedOn}"/>
                        </Trigger.EnterActions>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="{DynamicResource DisabledForegroundBrush}" />
                        <Setter Property="Visibility" TargetName="BackgroundGradientSelected" Value="Hidden"/>
                    </Trigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsSelected" Value="true" />
                            <Condition Property="Selector.IsSelectionActive" Value="false" />
                        </MultiTrigger.Conditions>
                    </MultiTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 1

Apparently the ListViewItem ControlTemplate was overriding the style triggers for alternate row colours.

Since I was not using the storyboards in the ControlTemplate (I had set their Duration to 0), I solved the problem by just using Style Triggers, without styling the Template, as shown below.

<Style TargetType="{x:Type ListViewItem}" x:Key="ListViewItemStyle">
        <Setter Property="FocusVisualStyle" Value="{StaticResource ListViewItemFocusVisual}" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="Padding" Value="5,2,5,2" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="Height" Value="23px" />
        <Setter Property="Foreground" Value="{StaticResource OutsideFontColor}"/>
        <Style.Triggers>
            <Trigger Property="ItemsControl.AlternationIndex" Value="0">
                <Setter Property="Background" Value="White" />
            </Trigger>
            <Trigger Property="ItemsControl.AlternationIndex" Value="1">
                <Setter Property="Background" Value="AliceBlue" />
                <Setter Property="BorderBrush" Value="AliceBlue" />
            </Trigger>
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="Background" Value="{StaticResource BtnOverFill}" />
                <Setter Property="BorderBrush" Value="{StaticResource selectedStroke}" />
            </Trigger>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="BorderBrush" Value="#FFbbe9fd" />
            </Trigger>
        </Style.Triggers>
</Style>

I know this doesn't solve the problem if the ContolTemplate needs to be styled, but at least this was enough to satisfy my requirements.

Hope it helps somebody in the future.

Answer 2

At ExpressionDark.xaml for example:

find this: <Style TargetType="{x:Type ListViewItem}">

and find <Rectangle x:Name="Background"..

change the property value Fill to Fill="{TemplateBinding Background}"

and, inside the <ControlTemplate.Triggers> add this:

<Trigger Property="ItemsControl.AlternationIndex" Value="1">
    <Setter Property="Background" Value="#FF474A51"></Setter>
</Trigger>

Hope this helps anyone, else as beginner for wpf i am having hard time finding things specially i am on vb.net, very hard to get direct sample codes using mvvm, etc. :( cruel world.