Drag and drop from list to canvas on windows phone with MVVM

Question

I have an app where a user can manipulate around with elements chosen from a list, this is done by clicking the list element and the element is added to a canvas.

During a user testing of the app. People found it not to be intuitive since they wanted drag and drop. I have found several links describing how to implement this for WPF, i.e. not for windows Phone.

Trying to replicate the code from a msdn project i ended up with problems that I cannot get the same information about the elements from DragEventArgs.

So what I want to accomplish is user can drag an element in a listbox to a canvas. I have tried in the Viewmodel but missing information in DragEventArgs, like e.Data and e.Source. I have also tried in the xaml.cs file with no success.

Any help is appreciated.

Idea

• create a copy of your element when it's selected,
• add the copy as a child of your canvas,
• set the copy's x,y coordinates to match the selected element's location,
• CaptureMouse() on the copy.

Of course on Windows Phone Manipulation delta should be used to move it instead of capture mouse. I am able to drag an element around inside the Canvas after it was added by a Click event. But I can't seem to get drag from list to work. The bullet points above is a method I have and are trying but without any success so far.

Answer 1

There exists no samples or anything to accomplish this. I have contacted people at msdn, and Microsoft, without any success. I am trying to build a sample but so far no success.

Edit

So what I did to solve this issue: first the problem graphically

In words dragging an element from listbox to a Canvas. SO what I did I added handlers to the listbox like this, in the view:

        MyLB.AddHandler(UIElement.ManipulationStartedEvent, new EventHandler<ManipulationStartedEventArgs>(MyLB_ManiStarted), true);
        MyLB.AddHandler(UIElement.ManipulationDeltaEvent, new EventHandler<ManipulationDeltaEventArgs>(MyLB_ManiDelta), true);
        MyLB.AddHandler(UIElement.ManipulationCompletedEvent, new EventHandler<ManipulationCompletedEventArgs>(MyLB_ManiCompleted), true);

Furthermore I add an extra canvas, here after referred to as Canvas2, that stretches behind the ListBox and Canvas. The only difference between the two canvas' are the size, else they have the same itemscontrol but with different observablecollections binded to the canvas'.

1. In ManipulationStarted I find the element and add a new one to the observablecollection of Canvas2. Furthermore I Set the zindex of Canvas2 to be infront.
2. I then tap into the delta event to move the element around on Canvas2
3. in ManipulationCompleted I check if the element is inside the bounds of the first Canvas.
4. I then delete it from Canvas2, and move Canvas2 to the back, using Canvas.SetIndex(UIElement, zIndex)
5. Depending on the bounds check in (3.) I then add it to the first canvas. And everything works.

But I do not use the drop feature or the related events since it did not seem to help because of the missing dragable element. But this works :)

Answer 2

Silverlight on WP7 does not support drag and drop – at least not fully. It supports drag but not drop.

Anyways you can try something with the following example,

WP7 Drag & Drop Example