如何在MAUI ListView或CollectionView中显示行索引编号？

要实现第一个Label显示从1开始的行号，可通过以下两种常用方法解决：

方法一：转换为带索引的模型集合（推荐） #

这种方法直观易维护，核心是将原字符串数组包装成包含索引和文本的模型类，再绑定到CollectionView。

1. 定义带索引的模型类

public class IndexedIngredient
{
    public int LineNumber { get; set; }
    public string Name { get; set; }
}

2. 在ViewModel中转换原数组
   假设你的ViewModel已有Ingredients字符串数组，新增一个可绑定的集合属性：

public ObservableCollection<IndexedIngredient> IndexedIngredients { get; }

// 在ViewModel构造函数或数据加载时初始化
public YourViewModel()
{
    // 示例数据，实际替换为你的Ingredients数组
    Ingredients = new[] { "Item1", "Item2", "Item3" };
    
    IndexedIngredients = new ObservableCollection<IndexedIngredient>(
        Ingredients.Select((item, index) => new IndexedIngredient 
        { 
            LineNumber = index + 1, 
            Name = item 
        })
    );
}

3. 修改XAML绑定
   将CollectionView的ItemsSource改为绑定新的集合，然后分别绑定行号和文本：

<CollectionView ItemsSource="{Binding IndexedIngredients}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <StackLayout Orientation="Horizontal" Padding="5">
                <Label Text="{Binding LineNumber}" 
                       FontAttributes="Bold" 
                       VerticalOptions="Center"/>

                <Label Text="{Binding Name}" 
                       VerticalOptions="Center"
                       Margin="10,0,0,0" />
            </StackLayout>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

方法二：使用值转换器（无需修改模型） #

如果不想新增模型类，可以通过自定义值转换器，结合CollectionView的ItemsSource获取当前项的索引：

1. 创建索引转换器

public class ItemIndexConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is BindableObject item && parameter is CollectionView collectionView)
        {
            var index = collectionView.ItemsSource.Cast<object>().ToList().IndexOf(item);
            return index + 1; // 索引从1开始
        }
        return 0;
    }

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

2. 在XAML中声明转换器
   在页面的Resources中添加转换器实例：

<ContentPage.Resources>
    <local:ItemIndexConverter x:Key="ItemIndexConverter"/>
</ContentPage.Resources>

3. 修改Label绑定
   通过ConverterParameter传递CollectionView实例，实现索引绑定：

<CollectionView x:Name="IngredientsCollection" ItemsSource="{Binding Ingredients}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <StackLayout Orientation="Horizontal" Padding="5">
                <Label Text="{Binding ., Converter={StaticResource ItemIndexConverter}, ConverterParameter={x:Reference IngredientsCollection}}" 
                       FontAttributes="Bold" 
                       VerticalOptions="Center"/>

                <Label Text="{Binding .}" 
                       VerticalOptions="Center"
                       Margin="10,0,0,0" />
            </StackLayout>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

注意：方法二在集合数据更新时可能需要手动刷新转换器，相比之下方法一的可维护性更好。

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