CODEWITHSUNDEEP
c#wpfxamlwindows-8
Ruwan Dissanayaka
Ruwan Dissanayaka

Reputation: 315

Drag and drop image in Windows 8 Metro App

Is there a way to drag and drop an image in a Windows 8 metro app. I'm using C# and XAML. Following is what I need...

enter image description here

Upvotes: 2

Views: 6334

Answers (4)

joaquim.adraz
joaquim.adraz

Reputation: 91

I've found a good solution here: http://xatazch.blogspot.pt/2012/08/drag-and-drop-item-using.html

Using TranslateTransform we can get a smooth and "real time" movement for the draggable item.

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;
}

Hope it helps!

Upvotes: 5

Nils
Nils

Reputation: 987

joaquims approach is the faster one... have look at this demo app: http://code.msdn.microsoft.com/windowsapps/Drag-and-Drop-a-picture-in-26580dc0

Upvotes: 0

Starceaker
Starceaker

Reputation: 631

I tried your solution but it didn't really result in "perfect" moving of the image.

Alternatively you can try to use the Manipulation events:

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);
        }

Even with this I'm not 100% satisfied but I do think it has a better result. Let me know what you think about this. (Even though this is an older post, it's worth mentioning)

EDIT: I noticed the 1:1 movement only worked when my image was located within a StackPanel.

Upvotes: 2

John Koerner
John Koerner

Reputation: 38087

Sure there is. You'll have to control it yourself, but it is pretty easy. You need to use a few pointer events like this:

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>

Then in your CS file:

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);
    }
}

Upvotes: 5

Related Questions