在Windows 8 Metro App中拖放圖像

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

我在這里找到了一個很好的解決方案： 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 3

我試過你的解決方案，但它並沒有真正導致圖像的“完美”移動。

或者，您可以嘗試使用操縱事件：

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 4

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