Mit LibraryStacks in einem ScatterView auf Oberfläche

Question

Wir versuchen, herauszufinden, wie ein Element aus einem LibraryStack Behälter auf einen ScatterView zu ziehen, wie, wie die Foto-Viewer-Beispielanwendungen arbeiten. Derzeit fliegt die Artikel nur zurück in die LibraryStack, nachdem wir es in die Länge ziehen. Wir können Einzelteile in andere LibraryStacks oder LibraryBars ziehen.

Hier ist ein Beispiel von dem, was wir versuchen:

<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>

Danke!

Answer 1

Dies ist sicherlich machbar. Ich kochte ein Beispiel, die Sie Elemente aus einem librarybar innerhalb ScatterView und Drop-Elemente auf dem ScatterView sich ziehen können, wo sie als neue scatterviewitems erscheinen.

Ich bin nicht sicher, wo man schief gelaufen ist, aber um für Drag / Drop zu arbeiten, hat folgendes geschehen:

1. Die Drop-Ziel muss AllowDrop auf true gesetzt
2. Die Drop-Ziel muss sichtbar sein Tests zu treffen (in der Regel erreicht, indem ein Hintergrund anders als null Einstellung - ich verwende Transparent)
3. Das Drop-Ziel muss das Drop-Ereignis behandeln und klug etwas tut mit den Daten

Hier ist meine 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>

Und in Code, wir handhaben das Drop-Ereignis

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);
}

Offensichtlich oberhalb der Code nicht verarbeitet Elemente zurück in die librarybar ziehen. Ich lasse das als eine Übung für den Leser; -)

Der folgende MSDN Guide ist etwas, was ich denke auf jeden Fall sollten Sie lesen: http: //msdn.microsoft.com/en-us/library/ee804812.aspx

Answer 2

Sie müssen den Hintergrund Pinsel auf die ScatterView auf eine Farbe setzen, das heißt transparent denn es sogar Drop-Ereignisse zu greifen.

Sie müssen auch SurfaceDragDrop verwenden.

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

private void OnManipulationStarted(object sender, RoutedEventArgs args)

{     ScatterViewItem SVI = args.OriginalSource als 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);
    }
}

}

Das ist alles im Grunde aus einem Beispiel in der sdk, ich erinnere mich nicht, wer von ihnen es ist traurig.

Cheers,

Stian Farstad