c# Dragging images inside canvas in windows store app fails

问题

I'm fairly new to C# and programming in general.

I'm building a dummy project to understand how drag and drop works. At first, I begun moving around rectangles, limiting their movements inside the canvas, and they moved just fine. After that, I tried to make it a bit more complex by adding PointerEntered/PointerExited and replacing the rectangles with images. Re-sizing the images when the events PointerEntered/PointerExited occur works, but when I try to drag my images nothing happens. I tried several things I've seen around SO and msdn but it still fails.

Here is my code:

MainPage.xaml

<Canvas  x:Name="MyCanvas" Width="800" Height="600">
        <Canvas.Background>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="Black" Offset="0"/>
                <GradientStop Color="#FF5E8B83" Offset="1"/>
            </LinearGradientBrush>
        </Canvas.Background>
        <TextBlock x:Name="someTB" FontSize="30" Canvas.Left="262" Canvas.Top="25" Height="28" Width="171"/>
        <Image x:Name="cauldron" Source="Assets/cauldron-md.png" AllowDrop="True" PointerExited="draggableItem_PointerExited" PointerEntered="draggableItem_PointerEntered" Width="210" Height="184" Canvas.Left="455" Canvas.Top="159"/>
        <Image x:Name="antidote" Source="Assets/alchemy-green-potion-no-label.png" ManipulationDelta="dragableItem_ManipulationDelta" PointerExited="draggableItem_PointerExited" PointerEntered="draggableItem_PointerEntered" Width="45" Height="89" Canvas.Left="72" Canvas.Top="263"/>
        <Image x:Name="poison" Source="Assets/alchemy-tree-poison-md-standing.png" ManipulationDelta="dragableItem_ManipulationDelta" PointerExited="draggableItem_PointerExited" PointerEntered="draggableItem_PointerEntered" Width="45" Height="89" Canvas.Left="202" Canvas.Top="159"/>
    </Canvas>

MainPage.xaml.cs

 public sealed partial class MainPage : Page
{
    double originalWidth;
    double originalHeight;

    public MainPage()
    {
        this.InitializeComponent();
        // Add clipping area to the canvas
        MyCanvas.Clip = new RectangleGeometry();
        MyCanvas.Clip.Rect = new Rect(0, 0, MyCanvas.ActualWidth, MyCanvas.ActualHeight);
    }

    private Boolean DetectCollisions(FrameworkElement rect1, FrameworkElement rect2)
    {

        var r1 = new Rect(Canvas.GetLeft(rect1), Canvas.GetTop(rect1), rect1.ActualWidth, rect1.ActualHeight);
        var r2 = new Rect(Canvas.GetLeft(rect2), Canvas.GetTop(rect2), rect2.ActualWidth, rect2.ActualHeight);
        r1.Intersect(r2);

        if (r1 != Rect.Empty)
        {
            return true;
        }

        return false;
    }

    private void dragableItem_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
    {
        Image dragableItem = sender as Image;
        dragableItem.ManipulationMode = ManipulationModes.TranslateX | ManipulationModes.TranslateY;
        dragableItem.RenderTransform = new CompositeTransform();
        var transform = (CompositeTransform)dragableItem.RenderTransform;

        var newPosX = Canvas.GetLeft(dragableItem) + transform.TranslateX + e.Delta.Translation.X;
        var newPosY = Canvas.GetTop(dragableItem) + transform.TranslateY + e.Delta.Translation.Y;

        if (!isBoundary(newPosX, MyCanvas.ActualWidth - dragableItem.ActualWidth, 0))
            Canvas.SetLeft(dragableItem, newPosX);

        if (!isBoundary(newPosY, MyCanvas.ActualHeight - dragableItem.ActualHeight, 0))
            Canvas.SetTop(dragableItem, newPosY);

        if (DetectCollisions(dragableItem, cauldron) == true)
        {
            cauldron.Source = new BitmapImage(new Uri(@"Assets/cauldron-md-autoTone.png"));
        }
    }

    bool isBoundary(double value, double max, double min)
    {
        return value > max ? true : value < min ? true : false;
    }

    private void draggableItem_PointerEntered(object sender, PointerRoutedEventArgs e)
    {
        Image thatPic = sender as Image;
        if (thatPic != null)
        {
            originalWidth = thatPic.ActualWidth;
            originalHeight = thatPic.ActualHeight;

            thatPic.Width = thatPic.ActualWidth + 10;
            thatPic.Height = thatPic.ActualHeight + 10;
        }

    }

    private void draggableItem_PointerExited(object sender, PointerRoutedEventArgs e)
    {
        Image thatPic = sender as Image;
        if (thatPic != null)
        {
            thatPic.Width = originalWidth;
            thatPic.Height = originalHeight;
        }
    }
}

回答1:

1) You need to add ManipulationMode="All" to the Image controls.

2) The Image "cauldron" is missing the ManipulationDelta event handler assignment.

来源：https://stackoverflow.com/questions/27942691/c-sharp-dragging-images-inside-canvas-in-windows-store-app-fails