Windows 10 UWP

Alternating Row Color in ListView

Alternating row colours are not there, by default, with the ListView. Here’s an easy way to to do it in UWP.

I originally found this page on MSDN but it was old – for .NET 3.0 – and didn’t work in UWP. I later found this article by Ben Dewey which worked. My post is a brief version of Ben’s post.

The easiest way to achieve alternating rows is by creating your own ListView class and adding dependency properties to specify the row colours. The dependency properties allow you to define the colours in XAML (i.e. you can set your ThemeResource). You could do without the dependency properties and just hard-code some colours but I wouldn’t suggest it.

    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;
                }
            }

        }
    }

The above code is relatively simple. Based on the index of the row it sets the colour of the row.

To implement this in your XAML, you would do something like this

<Page
    x:Class="MyApp.Views.SimpleView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:controls="using:MyApp.Controls"
    mc:Ignorable="d">

    <Grid>
        <controls:AlternatingRowListView
            x:Name="Comps"
            EvenRowBackground="{ThemeResource MyEvenRowBrush}"
            OddRowBackground="{ThemeResource MyOddRowBrush}">

                <controls:AlternatingRowListView.ItemTemplate>
                    <DataTemplate>
                        ...
                    </DataTemplate>
                </controls:AlternatingRowListView.ItemTemplate>
        </controls:AlternatingRowListView>
    </Grid>
</Page>

2 comments

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s