使用 Scatterview 项目和网格布局拖放失败

Question

Link to the Image of my App

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

棕色区域是一个 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。