WPF - Bind to Item Index from within ItemTemplate of ItemsControl?

Solution 1:

If you're not using any type of alternating row styles you might be able to hijack the AlternationIndex for this. Set AlternationCount on your ItemsControl to something greater than the max possible count of your items and then use

Text="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=(ItemsControl.AlternationIndex)}"

Edit: As bradgonesurfing pointed out in comments, this is not recommended if you're using virtualization, as it will only index the items that are generated and not the entire list.

Solution 2:

Here is a method I used to add a bindable index on a collection item. I basically wrap my item in a container that has an index, and have a custom ObservableCollection that accepts the wrapper.

Note that MoveItem is not overridden, but would have to be for a complete implementation.

public class IndexedItemContainerCollection<T> : ObservableCollection<IndexedItemContainer<T>>
{
    public IndexedItemContainerCollection()
    {

    }

    public IndexedItemContainerCollection(IEnumerable<IndexedItemContainer<T>> collection)
        : base(collection)
    {
        var index = 0;
        foreach (var item in this)
        {
            item.Index = index;
        }
    }

    protected override void InsertItem(int index, IndexedItemContainer<T> item)
    {
        item.Index = index;
        base.InsertItem(index, item);
        foreach (var indexedItem in this.Where(x=>x.Index > index))
        {
            indexedItem.Index++;
        }
    }

    protected override void RemoveItem(int index)
    {
        base.RemoveItem(index);
        foreach (var indexedItem in this.Where(x => x.Index > index))
        {
            indexedItem.Index--;
        }
    }

}

public class IndexedItemContainer<T>
{
    public int Index { get; set; }
    public T Item { get; set; }
}

I then extend my wrapper class to get a bindable property that I have control over how the index is displayed:

public class NamedIndexedItemContainer<T> : IndexedItemContainer<T>
{
    public string Name
    {
        get { return string.Format("Item #{0}", Index + 1); }
    }
}

Sample Usage

XAML:

    <ComboBox ItemsSource="{Binding ItemList}">
        <ComboBox.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Name}" />
            </DataTemplate>
        </ComboBox.ItemTemplate>
    </ComboBox>

Code:

private IndexedItemContainerCollection<MyItem> _itemList;
public IndexedItemContainerCollection<MyItem> ItemList
{
    get { return _itemList; }
    set { _itemList= value; OnPropertyChanged(); }
}


ItemList = new IndexedItemContainerCollection<MyItem>();
var newItem = new NamedIndexedItemContainer<MyItem>() { Item = new MyItem() { ... } };
ItemList.Add(newItem);

Of course, any binding with the actual MyItem instance would have to go through the IndexedItemContainer's Item property.

Solution 3:

For the record, there is another way to accomplish this: using custom Converter. A little bit more complicated, but you do not have to worry about AlternationCount/Index.

public sealed class ArrayWrapperConverter : IValueConverter
{
    private static readonly Type ArrayWrappingHelperType = typeof(ArrayWrappingHelper<>);

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value == null)
        {
            return null;
        }

        Type valueType = value.GetType();
        if (!valueType.IsArray)
        {
            return DependencyProperty.UnsetValue;
        }

        Type elementType = valueType.GetElementType();
        Type specificType = ArrayWrappingHelperType.MakeGenericType(elementType);

        IEnumerable wrappingHelper = (IEnumerable) Activator.CreateInstance(specificType, value);
        return wrappingHelper;
    }

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

internal class ArrayWrappingHelper<TValue> : IEnumerable
{
    private readonly TValue[] _array;

    public ArrayWrappingHelper(object array)
    {
        _array = (TValue[]) array;
    }

    public IEnumerator GetEnumerator()
    {
        return _array.Select((item, index) => new ArrayItemWrapper<TValue>(_array, index)).GetEnumerator();
    }
}

public class ArrayItemWrapper<TValue>
{
    private readonly TValue[] _array;
    private readonly int _index;

    public int Index 
    {
        get { return _index; }
    }

    public TValue Value
    {
        get { return _array[_index]; }
        set { _array[_index] = value; }
    }

    public ArrayItemWrapper(TValue[] array, int index)
    {
        _array = array;
        _index = index;
    }
}

Sample usage:

<Window x:Class="WpfArrayBinding.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:c="clr-namespace:WpfArrayBinding.Converters"
        xmlns:s="clr-namespace:System;assembly=mscorlib"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <ResourceDictionary>
            <c:ArrayWrapperConverter x:Key="ArrayWrapperConverter" />

            <x:Array Type="{x:Type s:String}" x:Key="MyArray">
                <s:String>Foo</s:String>
                <s:String>Bar</s:String>
                <s:String>Baz</s:String>
            </x:Array>
    </ResourceDictionary>
    </Window.Resources>

    <ItemsControl ItemsSource="{Binding Source={StaticResource MyArray}, Converter={StaticResource ArrayWrapperConverter}}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>                
                <StackPanel Orientation="Horizontal">
                    <Label Content="{Binding Index}" />
                    <TextBox Text="{Binding Value}" />
                </StackPanel>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Window>