Is there a good solution for a ItemsControl in WPF that can have its elements reordered by vertical drag and drop?

Question

So here's the scenario I'm working with:

I've got a priority list currently represented as an ItemsControl/ListView, bound to an observable collection of priority items. I want to provide tightly visually constrained vertical dragging for element reordering.

So, no drag adorners, no horizontal movement, only vertical movement. When a list item moves past the midpoint of another item, it should "swap positions" through animation. I am sure this can be done by working with mousedown/mousemove on the containers themselves, and I'm sure render transforms can be applied to do this, but my ideal solution would have two components to it:

1. The functionality could be attached as a WPF interactions behavior.

2. The system would be MVVM friendly and not require any significant code behind.

Has this been done? Where can I find it? If it hasn't how could I go about putting all the bits together in order to do this?

EDIT: Bounty opened. Please direct questions to me via comments and I will reply as fast as possible.

Answer 1

And for the code...

Mark-up:

<AdornerDecorator Margin="5">
    <ListBox x:Name="_listBox" Width="300" 
              HorizontalAlignment="Left"
              ItemsSource="{Binding Path=Items}" 
          AllowDrop="True" Drop="listBox_Drop">
        <ListBox.ItemContainerStyle>
            <Style TargetType="{x:Type ListBoxItem}">
                <EventSetter Event="ListBoxItem.DragOver"  Handler="listBoxItem_DragOver"/>
                <EventSetter Event="ListBoxItem.Drop" Handler="listBoxItem_Drop"/>
                <EventSetter Event="ListBoxItem.MouseMove" Handler="listBoxItem_MouseMove"/>
                <EventSetter Event="ListBoxItem.MouseDown" Handler="listBoxItem_MouseDown"/>
                <EventSetter Event="ListBoxItem.PreviewMouseDown" Handler="listBoxItem_MouseDown"/>
                <Setter Property="AllowDrop" Value="True"/>
            </Style>
        </ListBox.ItemContainerStyle>
    </ListBox>
</AdornerDecorator>

And the code-behind:

private bool _isDragging;

    private void listBox_MouseDown(object sender, MouseButtonEventArgs e)
    {
        _isDragging = false;
    }

    Adorner _adorner;

    private void listBox_MouseMove(object sender, MouseEventArgs e)
    {
        if (!_isDragging && e.LeftButton == MouseButtonState.Pressed)
        {
            _isDragging = true;

            if (_listBox.SelectedValue != null)
            {
                DragDrop.DoDragDrop(_listBox, _listBox.SelectedValue,
                   DragDropEffects.Move);
            }

        }
    }




private ListBoxItem FindlistBoxItem(DragEventArgs e)
    {
        var visualHitTest = VisualTreeHelper.HitTest(_listBox, e.GetPosition(_listBox)).VisualHit;

        ListBoxItem listBoxItem = null;

        while (visualHitTest != null)
        {
            if (visualHitTest is ListBoxItem)
            {
                listBoxItem = visualHitTest as ListBoxItem;

                break;
            }
            else if (visualHitTest == _listBox)
            {
                Console.WriteLine("Found listBox instance");
                return null;
            }

            visualHitTest = VisualTreeHelper.GetParent(visualHitTest);
        }

        return listBoxItem;
    }

    void ClearAdorner()
    {
        if (_adorner != null)
        {
            var adornerLayer = AdornerLayer.GetAdornerLayer(_listBox);
            adornerLayer.Remove(_adorner);
        }
    }

    private void listBox_DragOver(object sender, DragEventArgs e)
    {
        e.Effects = DragDropEffects.Move;

        ClearAdorner();

        var listBoxItem = FindlistBoxItem(e);

        if (listBoxItem == null || listBoxItem.DataContext == _listBox.SelectedItem) return;

        if (IsInFirstHalf(listBoxItem, e.GetPosition(listBoxItem)))
        {
            var adornerLayer = AdornerLayer.GetAdornerLayer(_listBox);
            _adorner = new DropBeforeAdorner(listBoxItem);
            adornerLayer.Add(_adorner);
        }
        else if (IsInLastHalf(listBoxItem, e.GetPosition(listBoxItem)))
        {
            var adornerLayer = AdornerLayer.GetAdornerLayer(_listBox);
            _adorner = new DropAfterAdorner(listBoxItem);
            adornerLayer.Add(_adorner);
        }

    }

    private void listBox_Drop(object sender, DragEventArgs e)
    {
        if (_isDragging)
        {
            _isDragging = false;
            ClearAdorner();

            var listBoxItem = FindlistBoxItem(e);

            if (listBoxItem == null || listBoxItem.DataContext == _listBox.SelectedItem) return;

            var drop = _listBox.SelectedItem as Export.Domain.Components.Component;
            var target = listBoxItem.DataContext as Export.Domain.Components.Component;

            var listBoxItem = GetlistBoxItemControl(listBoxItem);

            if (IsInFirstHalf(listBoxItem, e.GetPosition(listBoxItem)))
            {
                var vm = this.DataContext as ComponentlistBoxModel;
                vm.DropBefore(drop, target);
            }                
            else if (IsInLastHalf(listBoxItem, e.GetPosition(listBoxItem)))
            {
                var vm = this.DataContext as ComponentlistBoxModel;
                vm.DropAfter(drop, target);
            }
        }
    }



    public static bool IsInFirstHalf(FrameworkElement container, Point mousePosition)
    {
        return mousePosition.Y < (container.ActualHeight/2);
    }

    public static bool IsInLastHalf(FrameworkElement container, Point mousePosition)
    {
        return mousePosition.Y > (container.ActualHeight/2);
    }

You may not like the fact that my code-behind concretely references the viewmodel by type, but it got the job done, and it was quick and easy, and technically it doesn't break the MVVM pattern. I still leave the logic to the viewmodel.

Addition 1 Animations will probably provide the effect you are looking for. In my implementation, the swap happens on drop. However, you could achieve an animated effect by using an adorner and making the swap happen on drag. The drag event would update the adorner location and the index of the object within the collection.

Answer 2

Although i didn't come up with the solution myself, i have once came across a blog post that i think does exactly what you want with an excellent separation of concerns using attached properties and adorners. take a look at it here: ZagStudio. hope it helps.