Windows 8 MVVM Drag Drop

Overview

I’ve recently added drag/drop functionality to a Windows 8 app between a GridView and a ListBox using an MVVM pattern. I created two Attached Properties to collect the dragged items and fire a command when they were dropped. Both work on ListViewBase controls.

DragItemStarting Attached Property

This detects the DragItemsStarting event on the source control and pushes the items into a bound IList<T> in the view model:

public class DragItemsStarting

{

    public static readonly DependencyProperty ItemsProperty =

            DependencyProperty.RegisterAttached("Items", typeof(IList<object>), typeof(DragItemsStarting), new PropertyMetadata(null, ItemsPropertyChanged));

    public static void SetItems(DependencyObject attached, IList<object> value)

    {

        attached.SetValue(ItemsProperty, value);

    }

    public static IList<object> GetItems(DependencyObject attached)

    {

        return (IList<object>)attached.GetValue(ItemsProperty);

    }

    private static void ItemsPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)

    {

        // Attach click handler

        (d as ListViewBase).DragItemsStarting += DragItemstarting_DragItemsStarting;

    }

             

    static void DragItemstarting_DragItemsStarting(object sender, DragItemsStartingEventArgs e)

    {

        // Set Items

        SetItems(sender as DependencyObject, e.Items);

    }

}

DragItem Binding XAML

<GridView

    x:Name="pallette"

    cmd:DragItemsStarting.Items="{Binding DragObjects, Mode=TwoWay}"

DragItem Binding View Model

public IList<object> DragObjects

{

    get { return this._dragObjects; }

    set { this._dragObjects= value; }

}

Be careful to implement the getter and not return null as the attached property won’t attach if the value doesn’t change.

DropCommand Attached Property

This detects the drop event and fires the bound command. In my implementation, I wanted the pointer location so I passed that into the command:

public class DropCommand

{

    public static readonly DependencyProperty CommandProperty =

            DependencyProperty.RegisterAttached("Command", typeof(ICommand), typeof(DropCommand), new PropertyMetadata(null, CommandPropertyChanged));

    public static void SetCommand(DependencyObject attached, ICommand value)

    {

        attached.SetValue(CommandProperty, value);

    }

    public static ICommand GetCommand(DependencyObject attached)

    {

        return (ICommand)attached.GetValue(CommandProperty);

    }

    private static void CommandPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)

    {

        // Attach click handler

        (d as FrameworkElement).Drop += DropCommand_Drop;

    }

    private static void DropCommand_Drop(object sender, DragEventArgs e)

    {

        e.Handled = true;

        // Get element

        var fe = (sender as FrameworkElement);

        // Get command

        ICommand command = GetCommand(fe);

        // Get pointer point

        var p = Window.Current.CoreWindow.PointerPosition;

        Debug.WriteLine(string.Format("DROP X: {0}, Y: {1}", p.X, p.Y));

        // Execute command

        command.Execute(p);

    }

}

DropCommand Binding XAML

<ListBox cmd:DropCommand.Command="{Binding DropCommand}"

DropCommand Binding View Model

public ICommand DropCommand

{

    get { return this._dropCommand; }

}

I usually have a method called by the constructor that created the commands:

this._dropCommand = new DelegateCommand(a =>

    {

        if (a is Windows.Foundation.Point)

        {

            this.DoSomething((Windows.Foundation.Point)a);

        }

       

    }, p => this.IsDropExecutable);

You can use any type of command; I've used Delegate command taken from the Prism framework. 

Conclusion

This provides a nice clean way of implementing drag and drop using an MVVM pattern.