How does Translate To and/or the Coordinate System work in Xamarin Forms

Question

When images are clicked, a dropdown window comes and the user can click on one of the many options of where to put the image. However, the second image appears to be off by about 35 and the third image seems about 70 lower. I am using the Image.TranslateTo. How does the coordinate system work in Xamarin Forms and is there a better way to put images in a specific place on the coordinate system?

Answer 1

About Translation method , there are three parameters inside it .

image.TranslateTo (TranslationX, TranslationY, millisecond);

• TranslationX : Gets or sets the X translation delta of the element.
• TranslationY : Gets or sets the Y translation delta of the element.
• millisecond : how much time need to finish animation (milliseconds).

That means parameter TranslationX and TranslationY just indicate the Offset of View , not the coordinate .

If I have the xaml code as follow :

<Image Source="icon.png" BackgroundColor="Accent" HorizontalOptions="Center" VerticalOptions="Center">
    <Image.GestureRecognizers>
        <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" NumberOfTapsRequired="1"/>
    </Image.GestureRecognizers>
</Image>
<Image x:Name="imageone" Source="imageone.png" BackgroundColor="Aqua" HorizontalOptions="Center" WidthRequest="50" HeightRequest="50"/>
<Image x:Name="imagetwo" Source="imagetwo.png" BackgroundColor="Beige" HeightRequest="50" />
<Image x:Name="imagethree" Source="imagethree.png" BackgroundColor="BurlyWood" HeightRequest="50" />

The screen shows :(For better to explain, I set the HeightRequest and BackgroundColor for Image .)

You wiil see from above code , height of imageone/imagetwo/imagethree all is 50 . And I will get the X of imageone first after running . It's 180 .Then I will write code for TapGestureRecognizer_Tapped method as follow to translate imageone and imagetwo .

private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
{
    Console.WriteLine("Tap" + imageone.X +"---"+ imageone.Y);
    imageone.TranslateTo(-180, 0, 1000);
    imagetwo.TranslateTo(0, 100, 1000);
}

The effect as follow :

And the printed logs of Console is :

14:34:36.621 I/mono-stdout( 4499): Tap180---290.714285714286
14:34:41.171 I/mono-stdout( 4499): Tap180---290.714285714286

Then you will found there are two conclusions :

First , TranslationX and TranslationY just indicate the Offset of View .

Second , Translation method will not modify the coordinate of View .