Introduction

The GongSolutions.Wpf.DragDrop library is a drag'n'drop framework for WPF. It has the following features:

• Works with MVVM : the logic for the drag and drop can be placed in a ViewModel. No code needs to be placed in codebehind, instead attached properties are used to bind to a drag handler/drop handler in a ViewModel.
• Works with multiple selections.
• Can drag data within the same control to re-order, or between controls.
• Works with TreeViews.
• Can insert an item into a collection, or drop one item onto another.
• Can display Adorners to give the user visual feedback of the operation in progress.
• Has sensible defaults so that you have to write less code for common operations.

Current Status

The library is in its early stages, but should still be useful and reasonably bug-free. I've started adding API documentation and version 0.1.1 now contains an XML file documenting the most commonly used classes. You can also find a couple of tutorials at codeproject.com:

• Drag Drop in WPF
• Drag Drop in WPF - Part II

If you have any questions, please ask on the project's google group.

Release History

0.1.2 (20 Dec, 2009)

• Added support for groups within ItemsControls.
• Use a better algorithm to determine the InsertPosition of a drop.

• Fixed a bug where mouse clicks were being unnecessarily swallowed on multi-selectable ItemsControls.
• Documented most commonly used classes.

0.1.0 (11 Nov, 2009)

• Initial Release.

Examples

Default Behaviour

A simple example of adding drag/drop to a ListBox:

<ListBox Grid.Column="1" Grid.Row="1" ItemsSource="{Binding Collection}" 
         dd:DragDrop.IsDragSource="True" dd:DragDrop.IsDropTarget="True"/>

Setting the IsDragSource and IsDropTarget attached propeties to True on an ItemsControl such as ListBox enables drag and drop. The default behaviour is to allow re-ordering of items within the control.

If your project contains another ItemsControl with drag/drop enabled in this manner, and it is bound to a collection of the same type, then items can also be dragged and dropped between the controls.

Adding a Drop Handler

While the defaults can be useful in simple cases, you will usually want more control of what happens when data is dragged/dropped onto your control. You can delegate that responsibility to your ViewModel by setting the DropHandler attached property:

<ListBox Grid.Column="1" Grid.Row="1" ItemsSource="{Binding Collection}" 
         dd:DragDrop.IsDragSource="True" dd:DragDrop.IsDropTarget="True"
         dd:DragDrop.DropHandler="{Binding}"/>

In this example, we're binding the drop handler to the current DataContext, which will usually be your ViewModel.

You handle the drop in your ViewModel by implementing the IDropTarget interface:

class ExampleViewModel : IDropTarget
{
    public ObservableCollection<ExampleItemViewModel> Items;

    void IDropTarget.DragOver(DropInfo dropInfo)
    {
        ExampleItemViewModel sourceItem = dropInfo.Data as ExampleItemViewModel;
        ExampleItemViewModel targetItem = dropInfo.TargetItem as ExampleItemViewModel;

        if (sourceItem != null && targetItem != null && targetItem.CanAcceptChildren)
        {
            dropInfo.DropTargetAdorner = DropTargetAdorners.Highlight;
            dropInfo.Effects = DragDropEffects.Copy;
        }
    }

    void IDropTarget.Drop(DropInfo dropInfo)
    {
        ExampleItemViewModel sourceItem = dropInfo.Data as ExampleItemViewModel;
        ExampleItemViewModel targetItem = dropInfo.TargetItem as ExampleItemViewModel;
        targetItem.Children.Add(sourceItem);
    }
}

class ExampleItemViewModel
{
    public bool CanAcceptChildren { get; set; }
    public ObservableCollection<ExampleItemViewModel> Children { get; private set; }
}

In this example, we're checking that the item being dragged and the item being dropped onto are both ExampleItemViewModels and that the target item allows items to be added to its Children collection. If the drag satisfies both of these conditions, then the function tells the framework to display a Copy mouse pointer, and to use a Highlight drop target adorner.

For more information, check out the full DropHandlerExample.