I search online and found a technique that included adding an index property to the model in question and then adding a converter to the DataTemplate. This wasn’t ideal because it only changed the contents of the list item, so depending on padding and content alignment you’d see gaps around the row background. I also didn’t like the code smell of modifying my data model objects with UI code.

What I wanted was to override the ListViewItem control’s Background property. You could use the ListView.ItemContainerStyle property and set the background using a style, but unfortunately the style’s context wouldn’t have any way of knowing the index of the item relative to the full source collection.

The option I used was to override a ListView control and create an AlternatingRowListView. Then by overriding the PrepareContainerForItemOverride, which is responsible for the setting up the ListViewItem control after it’s be created, you could modify the background color.

public class AlternatingRowListView : ListView
{

    protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
    {
        base.PrepareContainerForItemOverride(element, item);
        var listViewItem = element as ListViewItem;
        if (listViewItem != null)
        {
            var index = IndexFromContainer(element);

            if ((index + 1) % 2 == 1)
            {
                listViewItem.Background = new SolidColorBrush(Colors.White);
            }
            else
            {
                listViewItem.Background = new SolidColorBrush(Colors.Gray);
            }
        }
        
    }
}

This code uses a method on the ListView base class called ItemFromContainer(), which simply gives you the index of the item relative to the ListView’s source collection. With that index you can set the ListViewItem’s Background color based on a modulus of 2. Although, using hard coded colors for the background doesn’t make it very usable across other designs. This is where dependency properties come into play. They allow the control to expose properties to XAML, where you can set them to any Brush or Resource you’d like. To do this you have to specify them as they are below and update your overridden method from before with these new properties.

public class AlternatingRowListView : ListView
{
	public static readonly DependencyProperty OddRowBackgroundProperty =
		DependencyProperty.Register("OddRowBackground", typeof(Brush), typeof(AlternatingRowListView), null);
	public Brush OddRowBackground
	{
		get { return (Brush)GetValue(OddRowBackgroundProperty); }
		set { SetValue(OddRowBackgroundProperty, (Brush)value); }
	}
	
	public static readonly DependencyProperty EvenRowBackgroundProperty =
		DependencyProperty.Register("EvenRowBackground", typeof(Brush), typeof(AlternatingRowListView), null);
	public Brush EvenRowBackground
	{
		get { return (Brush)GetValue(EvenRowBackgroundProperty); }
		set { SetValue(EvenRowBackgroundProperty, (Brush)value); }
	}

    protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
    {
        base.PrepareContainerForItemOverride(element, item);
        var listViewItem = element as ListViewItem;
        if (listViewItem != null)
        {
            var index = IndexFromContainer(element);

            if ((index + 1) % 2 == 1)
            {
                listViewItem.Background = OddRowBackground;
            }
            else
            {
                listViewItem.Background = EvenRowBackground;
            }
        }
        
    }
}

After this, you can put it all together by using your new control in place of a ListView.

<Page
    x:Name="pageRoot"
    x:Class="ZebraStripedListView.ItemsPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:ZebraStripedListView.Controls">

	<controls:AlternatingRowListView 
			ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
			OddRowBackground="{ThemeResource GridOddRowBackgroundBrush}" EvenRowBackground="{ThemeResource GridEvenRowBackgroundBrush}">
		<controls:AlternatingRowListView.ItemTemplate>
			<DataTemplate>
				<Grid>
					<Grid.ColumnDefinitions>
						<ColumnDefinition Width="300" />
						<ColumnDefinition Width="*" />
					</Grid.ColumnDefinitions>
					<TextBlock Text="{Binding Title}" Grid.Column="0" />
					<TextBlock Text="{Binding Subtitle}" Grid.Column="1" />
				</Grid>
			</DataTemplate>
		</controls:AlternatingRowListView.ItemTemplate>
	</controls:AlternatingRowListView>
</Page>

This is what the final result looks like for my sample code.

I’ve uploaded the full code to my GitHub account at http://github.com/bendewey/ZebraStripedListView. I hope this is useful to other who encounter a similar scenario.

I keep trying to come up with a good way to pass the color in without creating a custom control. If anyone has any thought please feel free to share.

Enjoy

Usage

<Button Width=”60″ x:Name=”browse” Style=”{StaticResource SwooshButton}”>Browse</Button>

Code

http://www.bendewey.name/code/swooshButton.html