Metro app - ListView - how to alternate background colour of ListViewItems

Viewed 5571

In my Metro style app for Windows 8, I'm binding a Listview to an ObservableCollection and I would like the background color of each ListViewItem to alternate (white, gray, white, etc)

   <ListView x:Name="stopsListView" ItemsSource="{Binding}" >
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid Height="66" >
                    <TextBlock Text="{Binding Title}" />
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>

In WPF, this is done using a Style with Triggers - see this page.

How do you accomplish this in a Metro app?

Update:

After the correct answer was given below, I went away and actually coded it. Here's some code for anyone who needs it:

Code for value converter class:

public class AltBackgroundConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        if (!(value is int)) return null;
        int index = (int)value;

        if (index % 2 == 0)
            return Colors.White;
        else
            return Colors.LightGray;
    }

    // No need to implement converting back on a one-way binding
    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

Code for XAML listview:

    <ListView x:Name="stopsListView" ItemsSource="{Binding}">

        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid Width="250" Height="66" Margin="5">
                    <Grid.Background>
                        <SolidColorBrush Color="{Binding IndexWithinParentCollection, Mode=OneWay, Converter={StaticResource AltBGConverter}}" />
                    </Grid.Background>

...and, when adding items to the collection, or modifying the collection, remember to set their Index within the collection:

myCollection.add(item);
item.IndexWithinParentCollection = myCollection.Count;

Of course, if your collection changes often this approach will be costly to maintain, since you'll have to re-index your items, so I found it easier to store a reference to the parent collection within each item, then calculate the Index on-the-fly using .IndexOf() to avoid having to constantly update the index values every time the collection changes.

4 Answers
Related