"Drag and drop" data and template with Surface SDK 2

Question

I'm trying to implement a Drag and Drop operation between a LibraryStack and a ScatterView.

I'm using the following code, found in the DragDropScatterView class that is part of the ShoppingCart sample that ships with the SDK at https://code.google.com/p/osuohiounionvirtualtour/source/browse/trunk/OhioUnionTour/DragDropScatterView.cs?r=10:

private void OnCursorDrop(object sender, SurfaceDragDropEventArgs args) {

       SurfaceDragCursor droppingCursor = args.Cursor;

       // Add dropping Item that was from another drag source.
       if (droppingCursor.CurrentTarget == scatterView && droppingCursor.DragSource != scatterView)
       {
           if (!scatterView.Items.Contains(droppingCursor.Data))
           {

               scatterView.Items.Add(droppingCursor.Data);

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


               }
            }
       }
   }

Here is my XAML code :

   <s:LibraryStack IsManipulationEnabled="False"  AllowDrop="True" >Name="listcategories" ItemsSource="{Binding}" Background="Black" >

       <s:LibraryStack.ItemTemplate>

           <DataTemplate>

       <UserControl Background="White"   AllowDrop="True" IsManipulationEnabled="True">
        <StackPanel AllowDrop="True" Orientation="Vertical">

                       <TextBlock AllowDrop="True" VerticalAlignment="Center" >HorizontalAlignment="Center"  Text="{Binding Name}"></TextBlock>
                       <Image  AllowDrop="True" VerticalAlignment="Center" >HorizontalAlignment="Center"  Height="Auto" Width="Auto"  Source="{Binding Picture}"   </Image> 


            </StackPanel>
       </UserControl>

           </DataTemplate>
       </s:LibraryStack.ItemTemplate>


  </s:LibraryStack>

The Drag and Drop works great, but I'm only dragging the data of the UserControl taken from the LibraryStack (so I only got the Name attribut in a grey square).

I would like to Drag and Drop the entire UserControl, which means his template.

Answer 1

I managed to solve my problem :

Obviously, when I did a Drag and Drop operation, data informations of my UserControl were dragged and dropped too, but style informations were lost.

So I wrote in my XAML file a style section (in Page.Resources) for my LibraryStack and my DragDropScatterView (class that is part of the ShoppingCart sample that ships with the SDK). Both describe exactly the same style for their items.

Thanks to the XAML code below, style informations are found again at the end of the Drag and Drop operation :

    <!--Style for each data item on ScatterLayer and the cursor being dragged -->
    <Style x:Key="ScatterItemStyle" TargetType="{x:Type s:ScatterViewItem}">
        <Setter Property="Background" Value="{x:Null}" />
        <Setter Property="ContentTemplate">
            <Setter.Value>
                <DataTemplate>
                    <UserControl TouchDown="VisitCategory" Background="White" VerticalAlignment="Top"  AllowDrop="True" IsManipulationEnabled="True">

                        <StackPanel AllowDrop="True" Orientation="Vertical">

                            <TextBlock AllowDrop="True" VerticalAlignment="Center" HorizontalAlignment="Center"  Text="{Binding Name}"></TextBlock>
                            <Image  AllowDrop="True" VerticalAlignment="Center" HorizontalAlignment="Center"  Height="Auto" Width="Auto"  Source="{Binding Picture}"></Image>


                        </StackPanel>
                    </UserControl>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>


    <!-- Style for the LibraryStack. -->
    <Style x:Key="StackStyle" TargetType="{x:Type s:LibraryStack}">
        <Setter Property="IsManipulationEnabled" Value="True" />
        <Setter Property="AllowDrop" Value="True" />
        <Setter Property="ItemsSource" Value="{Binding}" />
        <Setter Property="ItemContainerStyle">
            <Setter.Value>
                <Style TargetType="{x:Type s:LibraryStackItem}">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type s:LibraryStackItem}">
                                <ContentPresenter />
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="ItemTemplate">
            <Setter.Value>
                <DataTemplate>
                    <UserControl Background="White" VerticalAlignment="Top"  AllowDrop="True" IsManipulationEnabled="True">

                        <StackPanel AllowDrop="True" Orientation="Vertical">

                            <TextBlock AllowDrop="True" VerticalAlignment="Center" HorizontalAlignment="Center"  Text="{Binding Name}"></TextBlock>
                            <Image  AllowDrop="True" VerticalAlignment="Center" HorizontalAlignment="Center"  Height="Auto" Width="Auto"  Source="{Binding Picture}"></Image>


                        </StackPanel>
                    </UserControl>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>


</Page.Resources>


<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="68" />
    </Grid.RowDefinitions>


        <loc:DragDropScatterView AllowDrop="True" Background="Black" 
    x:Name="scatterView" ItemContainerStyle="{StaticResource ScatterItemStyle}"/>



    <s:LibraryStack Grid.Row="1" Background="Black" Name="listcategories" Style="{DynamicResource StackStyle}" />

</Grid>