Using LibraryStacks in a ScatterView on Surface

Question

We're trying to figure out how to drag an item from a LibraryStack container onto a ScatterView, like how the photo viewer sample applications work. Currently, the item just flies back into the LibraryStack after we drag it out. We can drag and drop items into other LibraryStacks or LibraryBars.

Here's a sample of what we're trying:

<s:SurfaceWindow x:Class="Idia_seminar.SurfaceWindow1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:s="http://schemas.microsoft.com/surface/2008"
Title="Idia_seminar"
>
<s:SurfaceWindow.Resources>
<ImageBrush x:Key="WindowBackground" Stretch="None" Opacity="0.6" ImageSource="pack://application:,,,/Resources/WindowBackground.jpg"/>
</s:SurfaceWindow.Resources>

<Grid Background="{StaticResource WindowBackground}" >
    <s:ScatterView Name="scatterView1" AllowDrop="True">
        <s:SurfaceButton Name="surfaceButton1">Button</s:SurfaceButton>
        <s:LibraryStack AllowDrop="True">
            <s:LibraryStackItem Content="hello"></s:LibraryStackItem>
        </s:LibraryStack>
    </s:ScatterView>
</Grid>
</s:SurfaceWindow>

Thanks!

Answer 1

Hi.

You need to set the background brush on the scatterview to a color, i.e. transparent for it even to grab drop events.

you also need to use SurfaceDragDrop.

SurfaceDragDrop.AddDropHandler(scatterView1, OnCursorDrop); AddHandler(ScatterViewItem.ScatterManipulationStartedEvent, new ScatterManipulationStartedEventHandler(OnManipulationStarted));

private void OnManipulationStarted(object sender, RoutedEventArgs args)

{ ScatterViewItem svi = args.OriginalSource as ScatterViewItem; if (svi != null)// && DragDropScatterView.GetAllowDrag(svi)) { svi.BeginDragDrop(svi.DataContext); } }

private void OnCursorDrop(object sender, SurfaceDragDropEventArgs args)

{ SurfaceDragCursor droppingCursor = args.Cursor;

// Add dropping Item that was from another drag source.
if (!scatterView1.Items.Contains(droppingCursor.Data)){
    scatterView1.Items.Add(droppingCursor.Data);

    var svi = scatterView1.ItemContainerGenerator.ContainerFromItem(droppingCursor.Data) as ScatterViewItem;
    if (svi != null){
        svi.Center = droppingCursor.GetPosition(scatterView1);
        svi.Orientation = droppingCursor.GetOrientation(scatterView1);
        svi.Height = droppingCursor.Visual.ActualHeight;
        svi.Width = droppingCursor.Visual.ActualWidth;
        svi.SetRelativeZIndex(RelativeScatterViewZIndex.Topmost);
    }
}

}

This is all basicly from an example in the sdk, I don't remember which one of them it is sadly.

Cheers,

Stian Farstad

Answer 2

This is certainly doable. I cooked up an example that allows you to drag items from a librarybar located within a scatterview and drop items on the scatterview where they appear as new scatterviewitems.

I'm not sure where you went wrong, but in order for drag/drop to work, the following has to happen:

1. The drop target must have AllowDrop set to true
2. The drop target must be visible to hit testing (usually accomplished by setting a background other than null - i use Transparent)
3. The drop target must handle the Drop event and do something clever with the data

Here's my XAML:

<s:ScatterView AllowDrop="True" Background="Transparent" 
        x:Name="scatterView" s:SurfaceDragDrop.Drop="scatterView_Drop">
    <s:SurfaceButton Name="surfaceButton1">Button</s:SurfaceButton>
        <s:LibraryStack>
            <s:LibraryStackItem Content="Hello"></s:LibraryStackItem>
        </s:LibraryStack>
    </s:ScatterView>
</s:ScatterView>

And in code, we handle the Drop event

private void scatterView_Drop(object sender, SurfaceDragDropEventArgs e)
{
    Console.WriteLine("Got drop: " + e.Cursor.Data);
    var newItem = new ScatterViewItem();
    // Rely on .ToString() on the data. A real app would do something more clever
    newItem.Content = e.Cursor.Data;
    // Place the new item at the drop location
    newItem.Center = e.Cursor.GetPosition(scatterView);
    // Add it to the scatterview
    scatterView.Items.Add(newItem);
}

Obviously, the code above doesn't handle dragging items back to the librarybar. I leave that as an exercise to the reader ;-)

The following MSDN guide is something I definitely think you should read: http://msdn.microsoft.com/en-us/library/ee804812.aspx