How to bind and display ListBoxItem index in ListBox?

Question

I have a .NET 5 project with following Nuget Packages:

HandyControls for UI
Gong-Wpf-DragDrop for Drag and Drop elements in a List

I have a XAML with a ListBoxand a ViewModel with aObservableCollection` of Model.

The ObservableCollection is binded as ItemSource of ListBox

What I want to achieve:

When i Drag and Drop an item in a different position (or Add/Delete), I want the indexes to be refreshed.

Example:

Before Drag/Drop

After Drag/Drop

Actually, i binded the drophandler of gong-wpf-dragdrop and at the end of the drop, i manually refresh every single Index in my list.

there is a way to do it easily? because actually i have to refresh indexes manually.

Summarizing: When i reorder/delete/add items i want Model.Index of every item updated with the correct index position in ListBox.

My Mandate is:

Show index (one based)
Give the possibility to reorder the elements

I tried looking for similar questions but didn't find much that could help me. Thanks in advance :)

Model:

public class Model : BindablePropertyBase
{
    private int index;
    private string name;

    public int Index
    {
        get { return index; }
        set
        {
            index = value;
            RaisePropertyChanged();
        }
    }
    public string Name
    {
        get { return name; }
        set
        {
            name = value;
            RaisePropertyChanged();
        }
    }
}

And below a xaml with a simple binded list MainWindow.xaml

MainWindowViewModel.cs

public class MainWindowViewModel : BindablePropertyBase, IDropTarget
{
    private ObservableCollection test_list;
    public ObservableCollection TestList
    {
        get 
        {
            return test_list;
        }
        set
        {
            test_list = value;
            RaisePropertyChanged();
        }
    }

    // Constructor
    public MainWindowViewModel()
    {
        TestList = new ObservableCollection()
        {
            new Model()
            {
                Index = 1,
                Name = "FirstModel"
            },
            new Model()
            {
                Index = 2,
                Name = "SecondModel"
            },
            new Model()
            {
                Index = 3,
                Name = "ThirdModel"
            }
        };
    }

    public void DragOver(IDropInfo dropInfo)
    {
        Model sourceItem = dropInfo.Data as Model;
        Model targetItem = dropInfo.TargetItem as Model;

        if (sourceItem != null && targetItem != null)
        {
            dropInfo.DropTargetAdorner = DropTargetAdorners.Insert;
            dropInfo.Effects = DragDropEffects.Move;
        }
    }

    public void Drop(IDropInfo dropInfo)
    {
        Model sourceItem = dropInfo.Data as Model;
        Model targetItem = dropInfo.TargetItem as Model;

        if(sourceItem != null && targetItem != null)
        {
            int s_index = sourceItem.Index - 1;
            int t_index = targetItem.Index - 1;

            TestList.RemoveAt(s_index);
            TestList.Insert(t_index, sourceItem);

            RefreshAllIndexes();
        }
    }

    private void RefreshAllIndexes()
    {
        for (int i = 0; i < TestList.Count; i++)
        {
            TestList[i].Index = i + 1;
        }
    }
}

Corentin Pane · Accepted Answer

I don't believe there is an out-of-the box way to bind to a container index in WPF. Your solution is actually easy to understand.

If you find yourself binding often to index, you could create your own attached property/value converter that internally climbs up the visual tree using these helpers until it finds the parent ItemsControland makes use of the IndexFromContainer method.

Here is some code to get you started with this method:

First a small helper function to climb up the visual tree looking for an item of generic type:

public static DependencyObject FindParentOfType(DependencyObject child) where T : DependencyObject {
    //We get the immediate parent item
    DependencyObject parentObject = VisualTreeHelper.GetParent(child);

    //we've reached the end of the tree
    if (parentObject == null) {
        return null;
    }

    //check if the parent matches the type we're looking for
    if (parentObject is T parent) {
        return parent;
    } else {
        return FindParentOfType(parentObject);
    }
}

Then a value converter that takes a control as input value and returns its index in the first encountered ItemsControl:

public class ContainerToIndexConverter : IValueConverter {
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture) {
        //Cast the passed value as an ItemsControl container
        DependencyObject container = value as ContentPresenter;
        if (container == null) {
            container = value as ContentControl;
        }

        //Finds the parent ItemsControl by looking up the visual tree
        var itemControls = (ItemsControl)FindParentOfType(container);
        //Gets the index of the container from the parent ItemsControl
        return itemControls.ItemContainerGenerator.IndexFromContainer(container);
    }

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

And this is how you would use it in XAML:

How to bind and display ListBoxItem index in ListBox?

Answers (1)

Related Questions