如何使列表视图具有交替的背景颜色？网络毛伊岛答案

【问题标题】：How can I make a list view have alternating background colors? NET MAUI如何使列表视图具有交替的背景颜色？网络毛伊岛
【发布时间】：2022-06-30 04:55:07
【问题描述】：

我正在尝试创建一个列表视图，其中列表中每个条目的背景颜色交替出现。有没有办法在 MAUI 中做到这一点？

【问题讨论】：

stackoverflow.com/questions/36840783/…

标签： xamarin xamarin.forms maui .net-maui

【解决方案1】：

这可以通过多种方式完成。通常推荐的方法是通过DataTemplateSelector。

1.创建一个DataTemplateSelector，其中包含两个模板并根据项目的索引选择它们：

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.在XAML中，我们可以定义两个模板，一个是备用色，一个是普通色。

<?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>

【讨论】：

非常感谢！我已经阅读了有关数据模板选择器的信息，但没有考虑使用它们来解决这个问题

【解决方案2】：

正如上面☝️提到的答案，我们可以使用 DataTemplateSelector 来解决您的问题。

替代解决方案，

您可以使用模型中的属性，并直接将其绑定到行背景。（在您的情况下，网格的背景颜色）
您可以使用触发器通过考虑逻辑来改变颜色。 (Xamarin Forms Triggers)

【讨论】：