How to move an image pixel by pixel?

Question

So I have 2 Image's I want the first Image to move towards the other Image I have both X,Y coordinates, how should this be done if I want it moving pixel by pixel towards the target Image?

Bare in mind, I'm using Windows-Universal I've tried DoubleAnimation but my knowledge in that stuff is really bad, I don't know where to start. The Image would sometimes have to move diagonally (across) rather than moving right then up.

How should I do this?

This is what I have so far:

    private void MoveToTarget_Start()
    {
        moveToTimer = new DispatcherTimer();
        moveToTimer.Tick += MoveToTarget_Tick;
        moveToTimer.Interval = new TimeSpan(0, 0, 0, 0, 1);
        moveToTimer.Start();
    }

    void MoveToTarget_Tick(object sender, object e)
    {


    }

score 2 · Accepted Answer · edited May 23 '17 at 10:27

First, you need to know how many pixels you need to move. For that, we can try to retrieve the absolute position of each element and compare them (there may be a more straightforward way, I just don't know how):

private Point GetAbsolutePosition(UIElement element)
{
   var ttv = element.TransformToVisual(Window.Current.Content);
   return ttv.TransformPoint(new Point(0, 0));
}

(taken from this answer)

From there, we retrieve the point of each element and compute the difference:

var position1 = GetAbsolutePosition(Image1);
var position2 = GetAbsolutePosition(Image2);

var offsetX = position2.X - position1.X;
var offsetY = position2.Y - position1.Y;

Now, we now of how many pixels we'll have to move on each axis. We add the TranslateTransform for the element (it may be better to do that beforehand directly from the XAML):

var translateTransform = new TranslateTransform();
image1.RenderTransform = translateTransform;

Finally, we create the animations, and target the TranslateTransform. Then we group them in a Storyboard, and start it:

var animationX = new DoubleAnimation()
{
    From = 0,
    To = offsetX,
    Duration = TimeSpan.FromSeconds(2)
};

var animationY = new DoubleAnimation()
{
    From = 0,
    To = offsetY,
    Duration = TimeSpan.FromSeconds(2)
};

Storyboard.SetTarget(animationX, translateTransform);
Storyboard.SetTargetProperty(animationX, "X");

Storyboard.SetTarget(animationY, translateTransform);
Storyboard.SetTargetProperty(animationY, "Y");

var storyboard = new Storyboard();

storyboard.Children.Add(animationX);
storyboard.Children.Add(animationY);

storyboard.Begin();

This does start an animation, the `Image` I want moving just moves up a pixel and down a pixel, however it doesn't go to the target `Image`. The thing is, my main `Grid` is split into 3 `Columns`, the `Image` I want moving is in `Column 1` and the `Image` I want it moving to is in `Column 3` would this be the cause of this? — KTOV, Oct 21 '15 at 10:16
@KTOV This shouldn't be a problem since we're using the absolute position. Could you check that the position returned by `GetAbsolutePoint` is correct? That part is just some code I've taken from another question, I didn't test it — Kevin Gosse, Oct 21 '15 at 11:25
Yup it works perfectly! Just to let you know, in your answer you need to change `var offsetY = position2.Y - position2.Y;` to `var offsetY = position2.Y - position1.Y;` also in the `GetAbsolutePosition()` it has a fixed `button` rather than using the passed in `element` — KTOV, Oct 21 '15 at 12:01

score 1 · Answer 2 · answered Oct 21 '15 at 09:48

1

To be honest the best idea is to use DoubleAnimation and Storyboard classes. I would set background as Canvas then You can animate it throught Canvas.SetLeft and Canvas.SetTop properties.

First You should create DoubleAnimationC class

DoubleAnimation da = new DoubleAnimation()
{
  SpeedRatio = 3.0,
  AutoReverse = false,
  From = 0 
  To = 100
  BeginTime = TimeSpan.FromSeconds(x),
};


Storyboard.SetTarget((Timeline)doubleAnimation, YOUR IMAGE);
Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("(Canvas.Top)"));

Of course change those properties as You like and now we must create StoryBoard class which will contains our animation

Storyboard sb = new Storyboard();
sb.Children.Add(da);
sb.Start();

Hope it helps!

answered Oct 21 '15 at 09:48

miechooy

3,178
12
34
59

Whem you say "I would set background as Canvas" what do you mean? – KTOV Oct 21 '15 at 09:50
Animating the canvas position is a bad idea, as it will recompute the layout every time, and therefore not benefit from hardware acceleration. It's better to use a `TranslateTransform` to move the element – Kevin Gosse Oct 21 '15 at 09:51
In toolbox You can find Canvas – miechooy Oct 21 '15 at 09:54

How to move an image pixel by pixel?

2 Answers2