在Windows Store應用程序中的畫布上移動圖像

Question

我需要在點擊和滑動時將圖像移動到畫布上。 我該如何實現。 我嘗試了以下方法。 圖像在移動，但不隨用戶移動。

XAML

<Canvas Background="White">
     <Image Name="img" Width="200" Height="200" Source="Assets/11.png" ManipulationMode="All"  ManipulationStarted="img_ManipulationStarted" ManipulationDelta="img_ManipulationDelta"/>
</Canvas>

C＃

private Point initialPt;
private void img_ManipulationStarted(object sender, ManipulationStartedRoutedEventArgs e)
{
    initialPt = e.Position;
}

private void img_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
    Point currentPt = e.Position;
    double x = currentPt.X - initialPt.X;
    double y = currentPt.Y - initialPt.Y;
    if (x != 0 || y != 0)
    {
        TranslateTransform posTransform = new TranslateTransform();
        posTransform.X = currentPt.X;
        posTransform.Y = currentPt.Y;
        img.RenderTransform = posTransform;
        e.Complete();
    }
}

Answer 1

而不是使用TranslateTransform ，應該直接在畫布中設置絕對位置，因此必須將ManipulationDelta事件綁定到Canvas，並檢測影響點是否在圖像內部。

<Canvas Background="White" ManipulationMode="All"  ManipulationDelta="canvas_ManipulationDelta">
     <Image Name="img" Width="200" Height="200" Source="Assets/11.png"/>
</Canvas>

這是新的事件處理功能：

   private void canvas_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
   {
        if ((e.Position.X > Canvas.GetLeft(img) && e.Position.X < Canvas.GetLeft(img) + img.Width) 
           || (e.Position.Y > Canvas.GetTop(img) && e.Position.Y < Canvas.GetTop(img) + img.Height)) {        
        { 
             Canvas.SetLeft(img, e.Position.X);
             Canvas.SetTop(img, e.Position.Y);
        }
   }

簡單如餡餅。 您可以刪除initialPt和img_ManipulationStarted 。