[Q] How Can I Make an Object Draggable?

[AshleyT]

Hello everybody,

Can someone explain me how can I make an object (an Image) draggable by the user in a Windows Phone Silverlight application?

I'm stuck because I don't know how to do this, I've assmued that the AllowDrop propery It's what I need...

Can you help me?

Thank you

 

[sensboston]

There are lot of ways to implement... Simpliest (but not an optimal) way is: drop image to main page, attach these handlers to the image and LayoutRoot.

You should understand idea but your implementation may differ (and better)

        private void image1_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            this.image1.RenderTransform = new TranslateTransform();
        }

        private void image1_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            this.image1.RenderTransform = null;
        }

        private void LayoutRoot_MouseMove(object sender, MouseEventArgs e)
        {
            TranslateTransform t = this.image1.RenderTransform as TranslateTransform;
            if (t != null)
            {
                Point pt = e.GetPosition(this);
                t.X = pt.X - (image1.Width / 2);
                t.Y = pt.Y - (image1.Height / 2);
            }
        }

 

[AshleyT]

Thank you for the reply!
The code works, but the image is draggable even if I tap somewhere else, how can I make it draggable by only clicking the image?

Thank you again

EDIT: The TranslateTransform is a specific kind of render transformation. Rather that changing properties of the control (such as the Margin property), it simply affects how the control is displayed on the screen.

I need something that actually changes the image margins...

 

[sensboston]

As for first question: attach MouseLeftButtonDown & MouseLeftButtonUp to image, not to the layout root (grid).

For second one: why do you need to change image margins? What's the reason? What are you trying to do?

P.S. Of course you can change margins instead TranslateTransform but I'm not sure is it GPU powered...

 

[AshleyT]

MouseLeftButtonDown & MouseLeftButtonUp are already attached to the image... Did you mean MouseMove? I tried to put all the three events on the image, but It doesn't work, I don't have the drag effect :\

I need this for a simple game

This is what I have to do:

1) A level where I don't need to change margins: You have to touch an image which is behind another one, so you have to drage the first image away to touch the second.

2) A level where I need to change margins: You have to complete a puzzle. You have a puzzle with a missing piece on the left and 4 pieces on the right. You have to take the right missing piece and drag it to the empty place in the puzzle. I wanted to so something like "if the block is in a specific range of margins(because it's too difficult to release the image exactly where It should go), then verify it it's the correct one".

 

[sensboston]

Sorry but seems like you need to study game programming basics first. All tasks you've described are very simple but you need (at least) understand what are you doing...

I gave you an idea how to move image (but there are a lot (not, A LOT) of different ways). So you only need to:
- start "dragging" image by changing TranslateTransform coordinates;
- on each change you should check image bounds (it's e.GetPosition(this).X, e.GetPosition(this).Y, e.GetPosition(this).X + image1.Width, e.GetPosition(this).Y + image1.Height) intersection with your placeholder and "fix" image (just do not process MouseMove) . That's all.

If you still don't get it, try good book first.