[UWP] 一行ごとに背景色が異なる ListView

23 March 2018

UWP で行の背景色が交互に異なる ListView の実装のメモです。

まず、ListView を継承したクラスを以下のように作成します。

public class AlternatingRowListView : ListView
{
    public AlternatingRowListView()
    {
        DefaultStyleKey = typeof(ListView);
        Items.VectorChanged += OnItemsVectorChanged;
    }

    private void OnItemsVectorChanged(IObservableVector<object> sender, IVectorChangedEventArgs args)
    {
        if (args.CollectionChange == CollectionChange.ItemRemoved)
        {
            var removedItemIndex = (int)args.Index;
            for (var i = removedItemIndex; i < Items.Count; i++)
            {
                if (ContainerFromIndex(i) is ListViewItem listViewItem)
                {
                    listViewItem.Background = i % 2 == 0 ? EvenColor : OddColor;
                }
                else
                {
                    break;
                }
            }
        }
    }

    protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
    {
        base.PrepareContainerForItemOverride(element, item);

        if (element is ListViewItem listViewItem)
        {
            var i = IndexFromContainer(element);
            listViewItem.Background = i % 2 == 0 ? EvenColor : OddColor;
        }
    }

    public SolidColorBrush EvenColor
    {
        get { return (SolidColorBrush)GetValue(EvenColorProperty); }
        set { SetValue(EvenColorProperty, value); }
    }
    public static readonly DependencyProperty EvenColorProperty =
        DependencyProperty.Register("EvenColor", typeof(SolidColorBrush), typeof(AlternatingRowListView), new PropertyMetadata(0));

    public SolidColorBrush OddColor
    {
        get { return (SolidColorBrush)GetValue(OddColorProperty); }
        set { SetValue(OddColorProperty, value); }
    }
    public static readonly DependencyProperty OddColorProperty =
        DependencyProperty.Register("OddColor", typeof(SolidColorBrush), typeof(AlternatingRowListView), new PropertyMetadata(0));
}

そして、以下のように使用します。

<controls:AlternatingRowListView EvenColor="LightCoral" OddColor="LightGray">
    <ListViewItem>item1</ListViewItem>
    <ListViewItem>item2</ListViewItem>
    <ListViewItem>item3</ListViewItem>
    <ListViewItem>item4</ListViewItem>
</controls:AlternatingRowListView>

実行画面です。

参考

c# - Alternate color for listview item UWP - Stack Overflow