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>
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.