在Windows 8 Metro應用程序中拖放圖像

Question

有沒有辦法在Windows 8 metro應用程序中拖放圖像。 我正在使用C＃和XAML。 以下是我所需要的...

Answer 1

肯定有。你必須自己控制它，但它很容易。您需要使用幾個指針事件是這樣的：

XAML：

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}" PointerMoved="GridPointerMoved"> 
    <Image x:Name="image1" HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100" Source="Assets/imageFile.png" PointerPressed="ImagePointerPressed" PointerReleased="ImagePointerReleased"/> 
</Grid> 

然後在您的CS文件：

Point positionWithinImage; 
private void ImagePointerPressed(object sender, PointerRoutedEventArgs e) 
{ 
    Debug.WriteLine("Pressed"); 
    holding = true; 

    positionWithinImage = e.GetCurrentPoint(sender as Image).Position; 
} 

private void ImagePointerReleased(object sender, PointerRoutedEventArgs e) 
{ 
    Debug.WriteLine("Released"); 
    holding = false; 
} 

bool holding = false; 

private void GridPointerMoved(object sender, PointerRoutedEventArgs e) 
{ 
    if (holding) 
    { 
     var pos = e.GetCurrentPoint(image1.Parent as Grid).Position; 
     image1.Margin = new Thickness(pos.X - this.positionWithinImage.X, pos.Y - this.positionWithinImage.Y, 0, 0); 
    } 
} 

Answer 2

我想你的解決方案，但它並沒有真正引起「完美「的圖像移動。

另外，您可以嘗試使用操作事件：

XAML：

<Image x:Name="imgSanta" Width="250" Source="Assets/santa.png" ManipulationMode="All" ManipulationStarted="imgSanta_ManipulationStarted_1" ManipulationDelta="imgSanta_ManipulationDelta_1"></Image> 

C＃

private void imgSanta_ManipulationStarted_1(object sender, ManipulationStartedRoutedEventArgs e) 
     { 
      txtFeedback.Text = "Manipulation started"; 
     } 

     private void imgSanta_ManipulationDelta_1(object sender, ManipulationDeltaRoutedEventArgs e) 
     {     
      var newTop = imgSanta.Margin.Top + e.Delta.Translation.Y; 
      var newLeft = imgSanta.Margin.Left + e.Delta.Translation.X; 
      imgSanta.Margin = new Thickness(newLeft, newTop, 0, 0); 
     } 

即使這樣，我不是100％滿意，但我不認爲這有一個更好的結果。讓我知道你對此的看法。 （儘管這是一個較舊的帖子，但值得一提）

編輯： 我注意到1：1運動只在我的圖像位於StackPanel內時才起作用。

Answer 3

我已經找到了一個很好的解決方案在這裏：http://xatazch.blogspot.pt/2012/08/drag-and-drop-item-using.html

使用TranslateTransform我們可以得到可拖動項目順利和「實時」運動。

void MainPage_Loaded(object sender, RoutedEventArgs e) 
{ 
    image1.ManipulationDelta += DragableItem_ManipulationDelta; 
    image1.RenderTransform = new TranslateTransform(); 
} 

private void DragableItem_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e) 
{ 
    Image dragableItem = sender as Image; 
    TranslateTransform translateTransform = dragableItem.RenderTransform as TranslateTransform; 

    translateTransform.X += e.Delta.Translation.X; 
    translateTransform.Y += e.Delta.Translation.Y; 
} 

希望它有幫助！

Answer 4

joaquims方法是一個更快的... 具有看看這個演示程序：http://code.msdn.microsoft.com/windowsapps/Drag-and-Drop-a-picture-in-26580dc0