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 ScatterView
4 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.
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.