Xamarin Forms - AbsoluteLayout - How does works positions

Emixam23 picture Emixam23 · Jun 22, 2016 · Viewed 16.6k times · Source

I'm working with Xamarin.Forms with AbsoluteLayout, however, I'm not sure to understand how to works the positionning of elements.

I'm working with Proportional Values so if I'm placing an element at AbsoluteLayout.LayoutBounds="1, 0.05, 0.15, 0.1" where each values is Proportional (so the flags are "all" AbsoluteLayout.LayoutFlags="All")

It will be placed at the top/right of the screen. It will not take a place a bit outside however. So what does it means? Each element are repositionned into the screen if they go outside?

enter image description here

But now, another question comes, when you place an element, on what is based the X/Y position? Does is the center or another point?

enter image description here

On this example, I tried with 0.15 but the rendering was a bit weird, so I put 0 and then the rendering match with what I want.

You could say "Test it and you'll see.", however, It's a waste of time for the designer and me, to position every elements, because we're not sure to understand how does it works. So we juste make try with debuging..

We are also searching to know if a software exist to generate positions about the design made by the designer. We mean the position X/Y of the element in percent.

Thank in advance !

Answer

François picture François · Jun 27, 2016

With AbsoluteLayoutFlag.All, the Rectangle bounds parameters have the following meaning:

  • x means the percentage of the remaining space (i.e parent width - control width) which should be on the left of the control
  • y means the percentage of the remaining space (i.e parent height - control height) which should be on the top of the control
  • width is the width of the control in percentage of the parent width
  • height is the height of the control in percentage of the parent height

Width and height are what people usually expect. However, x and y are not as people are more used to "left" and "top". So you can write a converter to convert left percentage into x and top percentage into y:

x = left / (1 - width)
y = top / (1 - height)