如何在CollectionView的DataTemplate中显示项的索引？自定义View场景

针对你的需求，有两种实用的方法可以给索引Label绑定位置值，以下是具体实现：

方案一：包装集合为带索引的对象（推荐） #

既然只能访问Enumerable类型的ItemsSource，你可以在自定义View中重写OnItemsSourceChanged方法，把原始集合转换成包含索引和原对象的匿名对象集合，这样就能直接绑定索引字段。

步骤1：在自定义View中处理ItemsSource #

protected override void OnItemsSourceChanged(IEnumerable oldValue, IEnumerable newValue)
{
    base.OnItemsSourceChanged(oldValue, newValue);
    
    if (newValue == null)
    {
        base.ItemsSource = null;
        return;
    }
    
    // 将原始集合包装为带索引的对象，索引从1开始可自行调整为0
    var indexedItems = newValue.Cast<object>()
                               .Select((item, index) => new { Index = index + 1, Item = item })
                               .ToList();
    base.ItemsSource = indexedItems;
}

步骤2：修改DataTemplate中的绑定 #

dataTemplate = new DataTemplate(() =>
{
    Grid grid = new Grid();

    // 添加行列定义（保留你的原有代码）
    RowDefinition row = new RowDefinition(this.RowHeight);
    grid.AddRowDefinition(row);

    ColumnDefinition columnIndex = new ColumnDefinition(40);
    grid.AddColumnDefinition(columnIndex);

    ColumnDefinition columnName = new ColumnDefinition(120);
    grid.AddColumnDefinition(columnName);

    Label labelIndex = new Label();
    // 绑定包装后的Index字段
    labelIndex.SetBinding(Label.TextProperty, "Index");
    Grid.SetColumn(labelIndex, 0);
    Grid.SetRow(labelIndex, 0);
    grid.Add(labelIndex);

    Label labelName = new Label();
    // 注意修正你原代码的笔误：label → labelName
    labelName.SetBinding(Label.TextProperty, "Item.name");
    Grid.SetColumn(labelName, 1);
    Grid.SetRow(labelName, 0);
    grid.Add(labelName);

    return grid;
});

方案二：使用附加属性获取Item位置 #

如果你不想修改原始集合，可以通过自定义附加属性来获取每个Item在CollectionView中的索引位置。

步骤1：定义附加属性类 #

public static class CollectionViewItemIndexHelper
{
    public static readonly BindableProperty ItemIndexProperty =
        BindableProperty.CreateAttached("ItemIndex", typeof(int), typeof(CollectionViewItemIndexHelper), -1);

    public static int GetItemIndex(BindableObject view)
    {
        return (int)view.GetValue(ItemIndexProperty);
    }

    public static void SetItemIndex(BindableObject view, int value)
    {
        view.SetValue(ItemIndexProperty, value);
    }

    public static readonly BindableProperty TrackIndexProperty =
        BindableProperty.CreateAttached("TrackIndex", typeof(bool), typeof(CollectionViewItemIndexHelper), false, 
                                        propertyChanged: OnTrackIndexChanged);

    public static bool GetTrackIndex(BindableObject view)
    {
        return (bool)view.GetValue(TrackIndexProperty);
    }

    public static void SetTrackIndex(BindableObject view, bool value)
    {
        view.SetValue(TrackIndexProperty, value);
    }

    private static void OnTrackIndexChanged(BindableObject bindable, object oldValue, object newValue)
    {
        if (bindable is not VisualElement element) return;

        if ((bool)newValue)
        {
            element.BindingContextChanged += OnBindingContextChanged;
            UpdateItemIndex(element);
        }
        else
        {
            element.BindingContextChanged -= OnBindingContextChanged;
        }
    }

    private static void OnBindingContextChanged(object sender, EventArgs e)
    {
        if (sender is VisualElement element)
        {
            UpdateItemIndex(element);
        }
    }

    private static void UpdateItemIndex(VisualElement element)
    {
        var collectionView = FindParent<CollectionView>(element);
        if (collectionView?.ItemsSource == null) return;

        var item = element.BindingContext;
        var itemsList = collectionView.ItemsSource.Cast<object>().ToList();
        var index = itemsList.IndexOf(item);
        
        SetItemIndex(element, index >= 0 ? index + 1 : -1); // 索引起始值可自行调整
    }

    private static T FindParent<T>(Element element) where T : Element
    {
        while (element != null)
        {
            if (element is T parent) return parent;
            element = element.Parent;
        }
        return null;
    }
}

步骤2：在DataTemplate中使用附加属性 #

dataTemplate = new DataTemplate(() =>
{
    Grid grid = new Grid();
    // 开启索引追踪
    CollectionViewItemIndexHelper.SetTrackIndex(grid, true);

    // 行列定义保留你的原有代码
    RowDefinition row = new RowDefinition(this.RowHeight);
    grid.AddRowDefinition(row);

    ColumnDefinition columnIndex = new ColumnDefinition(40);
    grid.AddColumnDefinition(columnIndex);

    ColumnDefinition columnName = new ColumnDefinition(120);
    grid.AddColumnDefinition(columnName);

    Label labelIndex = new Label();
    // 绑定附加属性的ItemIndex
    labelIndex.SetBinding(Label.TextProperty, new Binding(nameof(CollectionViewItemIndexHelper.ItemIndex), source: grid));
    Grid.SetColumn(labelIndex, 0);
    Grid.SetRow(labelIndex, 0);
    grid.Add(labelIndex);

    Label labelName = new Label();
    labelName.SetBinding(Label.TextProperty, "name");
    Grid.SetColumn(labelName, 1);
    Grid.SetRow(labelName, 0);
    grid.Add(labelName);

    return grid;
});

注意：方案二中如果集合有增删改操作，需要手动触发索引更新，否则显示会不准确；方案一的索引会随集合自动同步，更稳定。

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