CODEWITHSUNDEEP
.netxamlwindows-runtimewindows-store-appswinrt-xaml
Carlos P
Carlos P

Reputation: 3988

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

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.

Upvotes: 8

Views: 5626

Answers (4)

TeJ
TeJ

Reputation: 450

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.

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

Upvotes: 0

Mina Wissa
Mina Wissa

Reputation: 10971

I believe the code sample here is useful https://msdn.microsoft.com/en-us/library/ms750769(v=vs.85).aspx

Upvotes: 3

Filip Skakun
Filip Skakun

Reputation: 31724

You can use a converter - grab a row index from an item and convert it to a brush. Also - if ItemTemplate does not give you enough control - use ItemContainerStyle to modify 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 an item. You would still need to generate row indices though or somehow enable the selector to determine if the item is at an even or odd position.

Upvotes: 5

Oleg
Oleg

Reputation: 422

Never tried to do styling like this but what if:

you bind a background color to some property and that property will be set via IValueConverter according to maybe index of current item in listview.

If I make any sense.

Edit:

Funny thing, while i was writing my answer, Filip Skakun came with exactly same idea.

Upvotes: 1

Related Questions