How do I change an image's position (x and y) dynamically at runtime in Xamarin.Forms?

Question

I am using Xamarin.Forms and would like to change the position of an image dynamically (in code behind).

I have initially loaded the image statically by define it in an .xaml file. Then I would like to update the image's position (horizontally and vertically) dynamically depending upon the a run time value from the user. The image should move as per a user input value.

Unfortunately I am not able to find a code sample for this.

How can I change the position of an image dynamically (in code behind)?

Answer 1

You can manipulate the X and Y coordinates of an element using TranslationX and TranslationY properties.

To animate you can use the method TranslateTo:

public static System.Threading.Tasks.Task<bool> TranslateTo (this Xamarin.Forms.VisualElement view, double x, double y, uint length = 250, Xamarin.Forms.Easing easing = null);

Where:

• view - The view to tanslate.

• x - The x component of the final translation vector.

• y - The y component of the final translation vector.

• length - The duration of the animation in milliseconds.

• easing - The easing of the animation.

Example how to animate the translation:

await image.TranslateTo (-100, 0, 1000);    // Move image left
await image.TranslateTo (-100, -100, 1000); // Move image up
await image.TranslateTo (100, 100, 2000);   // Move image diagonally down and right
await image.TranslateTo (0, 100, 1000);     // Move image left
await image.TranslateTo (0, 0, 1000);       // Move image up