Metro app - ListView - how to alternate background color in ListViewItems

Question

In my Metro style app for Windows 8, I bind 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 trigger style - see this page .

How do you do this in the Metro app?

Update:

After the correct answer was given below, I left and actually encoded it. Here is the code for those who need it:

Code for the 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 the XAML list:

  <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, be sure to set their Index in 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 would have to reindex your elements, so it was easier for me to store the link to the parent collection in each element, and then calculate the Index on the fly using .IndexOf (), to avoid having to constantly update index values ​​every time the collection changes.

Answer 1

You can use a converter - grab the row index from an element and convert it to a brush. Also - if the ItemTemplate does not give you enough control - use ItemContainerStyle to change the brush at the ListViewItem template level.

Another option might be to specify an ItemTemplateSelector that gives you a different template with a different brush depending on the item. You still need to generate row indexes or somehow turn on the selector to determine if the element is in an even or odd position.

Answer 2

I find the code example useful https://msdn.microsoft.com/en-us/library/ms750769(v=vs.85).aspx

Answer 3

I have never tried to do such styles, but what if:

you bind the background color to some property, and this property will be set via IValueConverter according to, possibly, the index of the current element in the list.

If I understand.

Edit:

It's funny when I wrote my answer, Philip Skakun came up with the same idea.

Answer 4

I search the Internet and find a technique that involved adding an index property to the model in question, and then adding a converter to the DataTemplate. This is not ideal, because it only changed the contents of the list item, so depending on the addition and alignment of the content, you see spaces around the background of the line. I also did not like the smell of code for modifying data model objects using user interface code.

Try this, it will help, http://www.bendewey.com/index.php/523/alternating-row-color-in-windows-store-listview