使用 Surface SDK 2 "Drag and drop"数据和模板



我正试图在LibraryStackScatterView之间实现拖放操作。

我使用以下代码,在DragDropScatterView类中找到,这是ShoppingCart示例的一部分,随SDK一起发货https://code.google.com/p/osuohiounionvirtualtour/source/browse/trunk/OhioUnionTour/DragDropScatterView.cs?r=10:

private void OnCursorDrop(对象发送者,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);

               }
            }
       }
   }
下面是我的XAML代码:
   <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>

拖放效果很好,但我只拖拽从LibraryStack中获取的UserControl的数据(所以我只在灰色正方形中获得了名称属性)。

我想拖放整个UserControl,这意味着他的模板。

我设法解决了我的问题:

显然,当我做一个拖放操作时,我的UserControl的数据信息也被拖放了,但是样式信息丢失了。

因此,我在XAML文件中为我的LibraryStackDragDropScatterView(类是随SDK附带的ShoppingCart示例的一部分)编写了样式部分(在Page.Resources中)。

由于下面的XAML代码,样式信息再次出现在拖放操作的末尾:

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

最新更新