使用Scatterview Items和Grid Layout拖放失败

Question

Link to the Image of my App

我想要检测画布上的两张图片是否彼此接近，然后与嵌入在图片中的数据进行一些比较操作，如果两张图片都被触摸或接近的话。

棕色区域是一个ScatterView，我可以在其中拖放图片元素并将它们添加到绿色列表框中。

我可以将图片项目直接从蓝色列表框拖放到棕色拖放区域。

但是当我把它们放在黄色的散布图上时，我就不能离开那里把它们放到棕色的散布图上。

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

</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
    <ColumnDefinition></ColumnDefinition>
    <ColumnDefinition></ColumnDefinition>
    <ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>


    <s:ScatterView 
        Grid.Row="0" 
        Grid.Column="0" 
        Grid.ColumnSpan="2" 
        Grid.RowSpan="1" 
        x:Name="ScatterLayer" 
        Background="Yellow" 
        ItemContainerStyle="{StaticResource ScatterItemStyle}" 
        AllowDrop="True"
        ItemTemplate="{StaticResource ImageAndCaptionTemplate}"
        ItemsSource="{Binding ScatterItems}" 
        s:SurfaceDragDrop.Drop="ScatterLayer_Drop" 
        s:SurfaceDragDrop.DragEnter="ScatterLayer_DragEnter" 
        s:SurfaceDragDrop.DragCompleted="ScatterLayer_DragCompleted" >
    </s:ScatterView>

    <s:SurfaceListBox 
        Grid.Row="0" Grid.Column="2"
        AllowDrop="True"
        x:Name="ListBoxVerticalBasket"
        VerticalAlignment="Top"
        Background="GreenYellow"
        ItemsSource="{Binding Path=BasketItems}"
        ItemTemplate="{StaticResource BasketTemplate}" >
        <s:SurfaceListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Vertical" />
            </ItemsPanelTemplate>
        </s:SurfaceListBox.ItemsPanel>
    </s:SurfaceListBox>

    <s:SurfaceListBox 
        Grid.Row="1" 
        Grid.Column="0" 
        Grid.ColumnSpan="2" 
        x:Name="ShoppingList"
        AllowDrop="True" 
        s:SurfaceDragDrop.DragCompleted="OnShoppingListDragCompleted" 
        s:SurfaceDragDrop.DragCanceled="OnShoppingListDragCanceled" 
        PreviewMouseLeftButtonDown="OnShoppingListPreviewMouseLeftButtonDown" 
        PreviewMouseMove="OnShoppingListPreviewMouseMove" 
        PreviewMouseLeftButtonUp="OnShoppingListPreviewMouseLeftButtonUp" 
        ItemsSource="{Binding Path=LibraryItems}" 
        ItemTemplate="{StaticResource ImageAndCaptionTemplate}"
        PreviewTouchDown="OnShoppingListPreviewTouchDown" 
        PreviewTouchMove="OnShoppingListPreviewTouchMove" 
        PreviewTouchUp="OnShoppingListPreviewTouchUp" 
        Background="#FF00BDD8">
        <s:SurfaceListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal" AllowDrop="True"/>
            </ItemsPanelTemplate>
        </s:SurfaceListBox.ItemsPanel>

    </s:SurfaceListBox>

    <s:ScatterView 
        Grid.Column="2" 
        Grid.Row="1" 
        Background="DarkGoldenrod" 
        Width="300" 
        Height="100"
        x:Name="ScatterViewDropArea"
        VerticalAlignment="Top" 
        HorizontalAlignment="Left"
        AllowDrop="True"
        s:SurfaceDragDrop.Drop="ScatterViewDropArea_Drop">
    </s:ScatterView>

Answer 1

我认为你应该考虑使用Surface SDK中的购物车演示附带的DragDropScatterView，而不是ScatterView。