.NET MAUI中如何实现ListView列表项交替背景色效果

.NET MAUI 原生ListView控件没有提供开箱即用的交替行背景色属性，你可以根据项目的架构和复用需求，从以下三种成熟方案里选择实现：

方案1：ItemAppearing事件实现（轻量无依赖） #

这是最简单直接的实现方式，不需要额外编写自定义类或转换器，适合快速开发、对MVVM绑定没有强制要求的场景，性能开销极低。

1. 首先在XAML中定义ListView，给条目根布局和ListView本身命名，注册ItemAppearing事件：

<ListView x:Name="ItemList"
          ItemsSource="{Binding DataCollection}"
          ItemAppearing="ItemList_ItemAppearing">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <!-- 条目根布局必须命名，方便后台赋值背景色 -->
                <Grid x:Name="CellContainer" Padding="15" RowDefinitions="Auto,Auto">
                    <Label Grid.Row="0" Text="{Binding Title}" FontSize="18"/>
                    <Label Grid.Row="1" Text="{Binding Description}" FontSize="14" TextColor="Gray"/>
                </Grid>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

2. 在后台代码中实现事件逻辑，根据条目索引的奇偶性赋值不同背景色：

// 两个交替色可以提取到应用资源字典统一维护
private readonly Color _rowColor1 = Colors.White;
private readonly Color _rowColor2 = Color.FromArgb("#F2F2F7");

private void ItemList_ItemAppearing(object sender, ItemVisibilityEventArgs e)
{
    var listView = (ListView)sender;
    int currentIndex = listView.ItemsSource.Cast<object>().ToList().IndexOf(e.Item);
    
    if (listView.TemplatedItems.GetCell(currentIndex) is ViewCell cell 
        && cell.View is Grid container)
    {
        container.BackgroundColor = currentIndex % 2 == 0 ? _rowColor1 : _rowColor2;
    }
}

如果你的列表会动态增删条目，增删完成后重新给ItemsSource赋值刷新即可，避免索引变化导致颜色错位。

方案2：值转换器实现（符合MVVM规范） #

如果项目严格遵循MVVM架构，不希望在页面后台写事件逻辑，可以通过自定义值转换器实现，逻辑和事件方案一致，只是把颜色计算逻辑放到转换器中。

1. 编写自定义转换器类：

public class AlternatingColorConverter : IValueConverter
{
    public Color OddColor { get; set; }
    public Color EvenColor { get; set; }

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is not ItemVisibilityEventArgs args || parameter is not ListView listView)
            return Colors.Transparent;
        
        int index = listView.ItemsSource.Cast<object>().ToList().IndexOf(args.Item);
        return index % 2 == 0 ? OddColor : EvenColor;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotSupportedException();
    }
}

2. 在页面资源中注册转换器，绑定背景色即可，不需要写后台事件代码。

方案3：自定义ViewCell封装（高复用场景） #

如果项目中有多个页面需要用到交替色列表，可以把交替色逻辑封装到自定义ViewCell控件中，一次编写所有页面直接复用，不需要重复实现逻辑。核心思路是自定义继承ViewCell的控件，重写OnAppearing方法自动获取当前条目索引、设置自身背景色即可。

注意事项：

• 不要在DataTemplate中给条目根布局写固定的Background属性，会覆盖动态赋值的交替色
• 如果开启了ListView分组功能，计算索引时需要跳过分组头的位置，否则分组后颜色会出现错位
• 如果是全新开发的页面，更推荐使用性能更好的CollectionView控件，上述三种交替色实现逻辑完全通用

内容的提问来源于stack exchange，提问作者adlartuten