How to bind index of item in BindableLayout.ItemsSource

Question

I want a collection of buttons that show their corresponding item's index in MyObservableCollection as Text, and execute a Command with the CommandParameter also being this index. How can I achieve this?

<StackLayout BindableLayout.ItemsSource="{Binding MyObservableCollection}">
  <BindableLayout.ItemTemplate>
    <DataTemplate>
      <Button Text="{Binding [index of the item in MyObservableCollection]}" 
              Command="{Binding MyCommand}"
              CommandParameter="{Binding [index of the item in MyObservableCollection]}" />
    </DataTemplate>
  </BindableLayout.ItemTemplate>
</StackLayout>

Answer 1

So lets do the "hacky" thing you mentioned in the comments in the right "un-hacky" way^^

I would build something along the following lines. First we make an IIndexable interface:

public interface IIndexable
{
    int Index { get; set; }
}

We now make our own implementation of ObservableCollection<T> like this:

public class IndexableObservableCollection<T> : ObservableCollection<T> where T : IIndexable
{
    protected override void OnCollectionChanged(NotifyCollectionChangedEventArgs e)
    {
        switch (e.Action)
        {
            case NotifyCollectionChangedAction.Add:
            case NotifyCollectionChangedAction.Replace:
            case NotifyCollectionChangedAction.Move:
                for (int i = 0; i < e.NewItems.Count; i++)
                    if (e.NewItems[i] is IIndexable indexableItem)
                        indexableItem.Index = e.NewStartingIndex + i;
                break;
        }
        base.OnCollectionChanged(e);
    }
}

For now I've only done the most basic implementation in the switch here (granted in this case the switch can be replaced by an if statement, but this makes it easier for you to implement all the options), you'll have to look into the NotifyCollectionChangedEventArgs yourself and implement the cases accordingly.

After this just have classes you want to be able to show an index of implement the IIndexable interface and put them in an IndexableObservableCollection and this will automatically set their index when they're added. in xaml you can then just use {Binding Index} to bind to this automatically set index.

Hope this helps