PixelSense Surface 2.0 - Drag and drop out of a UserControl onto a ScatterView and vice-versa

Question

Previously I tried to Drag and Drop an object out of a LibraryContainer onto a ScatterView and vice-versa and it was rather simple being that the LibraryContainer, LibraryStack and LibraryBar support drag and drop events by default. That combined with the DragDropScatterView.cs from the ShoppingCart example provided with the Surface 2.0 SDK was pretty straightforward.

Now I want to be able to drag and drop a UserControl onto a ScatterView4 and vice-versa, i.e., something like this: http://goo.gl/zZIdg.

From what I researched there is a way to do that and can be found here: http://msdn.microsoft.com/en-us/library/ff727736.aspx. However, here they don't use the DragDropScatterView.cs, it's done a different way. You have two ObservableCollections (a source and a target), the ScatterViewItems and the SurfaceListBox.

One thing I don't like in this example is that the ScatterViewItems that can be dragged don't really have a scale property because when the user clicks on the ScatterViewItem, it creates a visual style and hides the ScatterViewItem and when you drop it, it updates the coordinates and orientation of that ScatterViewItem and makes it visible. I decided not to go this way, since I want a normal ScatterViewItem behaviour.

The basic thing I want to do is to have, for example a Label, and on the side a ScatterView and be able to drag that Label (creating a visual cursor - already done) and drop it on the ScatterView, creating a ScatterViewItem that has the same properties as the original Label. I tried doing this with the DragDropScatterView.cs but when I'm using a Label my droppingCursor.Data (on the DragDropScatterView.cs) is null and I think that happens because the draggedElement.DataContext (on the LabelView.xaml.cs) is also null, however this is not null when I have a SurfaceListBox.

I provide a code sample here: http://sdrv.ms/VDuHq5. In the SurfaceWindow1.xaml there is the TagVisualization and the container of the ScatterView, the LabelView.xaml is called inside the `TagVisualization.

If someone can help me on this I would really appreciate it.

Answer 1

I managed to solve my problem and here is a brief explanation on how I did it:

I searched and found this. I then used this SurfaceListBox with these drag and drop events and combined it with the DragDropScatterView class, so each time a new ScatterViewItem was created I would have a normal ScatterView control of my custom object. With this method you also have to create a Visual Cursor, i.e., what you'll see when you'e dragging the item from the SurfaceListBox.

The thing that was puzzling me and that Serge Calderara (from the MSDN Surface Forum) helped me with, was that I kept trying to associate these drag and drop events to a Label for example, or a UserControl even, but I was looking at things the wrong way. In most cases the best solution for you is to have a container, and in that container you put the UserControls you want and you only associate the drag and drop events to that container, and not to each individual item. With that in mind it was rather easy to put things together, I created my UserControls and populated the SurfaceListBox (wich is my container) with an ItemTemplateSelector and I used that same Selector for the ScatterView (that's receiving the items from the container). In my object class I just defined a variable to save which type of UserControl I'll have and return the DataTemplate accordingly.

With this I created a SurfaceListBox with two custom UserControls that I can drag and drop to a ScatterView and back. A working sample with MVVM pattern can be found here: http://sdrv.ms/10SjKaH.

I hope it can help others and it helped me. If you have any questions or suggestions please feel free to ask/tell.