maui.net-maui

How can I make a list view have alternating background colors? NET MAUI


I am trying to create a list view where the background color alternates for each entry in the list. Is there a way to do this in MAUI?


Solution

  • This can be done in multiple ways.And the method often recommended is through a DataTemplateSelector.

    1.Create a DataTemplateSelector that holds two templates and selects them based on the index of the item:

    public class AlternateColorDataTemplateSelector: DataTemplateSelector
    {
        public DataTemplate EvenTemplate { get; set; }
        public DataTemplate UnevenTemplate { get; set; }
    
        protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
        {
            // TODO: cast `Monkey` to your Item 
            return ((List<Monkey>)((ListView)container).ItemsSource).IndexOf(item as Monkey) % 2 == 0 ? EvenTemplate : UnevenTemplate;
        }
    }
    

    2.In XAML, we can define two templates, one with the alternate color and one with the normal color.

    <?xml version="1.0" encoding="utf-8" ?>
    <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="MauiApp0606.MainPage"
                 xmlns:local="clr-namespace:MauiApp0606"
                 >
    
        <ContentPage.Resources>
            <ResourceDictionary>
                <DataTemplate x:Key="evenTemplate">
                    <ViewCell>
                        <Grid BackgroundColor="White">
                            <Label Text="{Binding Name}" HorizontalOptions="Center" VerticalOptions="Center" />
                        </Grid>
                    </ViewCell>
                </DataTemplate>
                <DataTemplate x:Key="unevenTemplate">
                    <ViewCell>
                        <Grid BackgroundColor="LightGray">
                            <Label Text="{Binding Name}" TextColor="White" HorizontalOptions="Center" VerticalOptions="Center" />
                        </Grid>
                    </ViewCell>
                </DataTemplate>
                <local:AlternateColorDataTemplateSelector x:Key="alternateColorDataTemplateSelector"
                    EvenTemplate="{StaticResource evenTemplate}"
                    UnevenTemplate="{StaticResource unevenTemplate}" />
                
            </ResourceDictionary>
        </ContentPage.Resources>
     
            <VerticalStackLayout Spacing="25" Padding="30">
    
                <ListView ItemsSource="{Binding Monkeys}" ItemTemplate="{StaticResource alternateColorDataTemplateSelector}">
    
                </ListView>
    
            </VerticalStackLayout>
    </ContentPage>