UWP Different styles for odd and even elements ListBoxItem

Question

I need a different background for odd and even elements ListBoxItem . I found a code that should solve my problem, but it doesn't want to work in UWP:

Are there any analogues to the property ItemsControl.AlternationIndex, or how can I specify the style of even and odd elements in VisualState?

Thanks in advance for your reply.

user_9412162 · Answer

Currently in UWP, ListBox does not provide related property for setting the background of the alternative rows.

We can create a CustomListBox as a derived class of ListBox to achieve our needs.

public class CustomListBox : ListBox
{
    public Brush AlternativeBackground
    {
        get { return (Brush)GetValue(AlternativeBackgroundProperty); }
        set { SetValue(AlternativeBackgroundProperty, value); }
    }

    public static readonly DependencyProperty AlternativeBackgroundProperty =
        DependencyProperty.Register("AlternativeBackground", typeof(Brush), typeof(CustomListBox), new PropertyMetadata(null));


    protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
    {
        base.PrepareContainerForItemOverride(element, item);
        var listBoxItem = element as ListBoxItem;
        if (listBoxItem != null)
        {
            var index = IndexFromContainer(element);

            if ((index + 1) % 2 != 1)
            {
                listBoxItem.Background = AlternativeBackground;
            }
        }
    }
}

Usage


    Item 1
    Item 2
    Item 3
    Item 4

user_7068790 · Answer

You can use Microsoft.Toolkit.Uwp.UI.Extensions, which helps you set AlternateColor & AlternateItemTemplate. For more info, you can download Windows Community Toolkit.

UWP Different styles for odd and even elements ListBoxItem

2 Answers