Xamarin Forms - AbsoluteLayout - How does works positions

Question

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?

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?

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 1

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)

Answer 2

I did some testing and found that,With AbsoluteLayoutFlag.All, essentially the X value given as a Percentage basically represents where the anchor is on a rectangle. As in if X = 10% then the anchor is 10% from the left of the Rectangle:

example

At X = 0.1 with a given width of 20%. 90% of the length will go to the right and 10% will go to the left.

At X = 0.5 with a given width of 20%. 10% will go to left and 10% to the right.

Formula for X bounds

Variables in Rectangle (Ax, Ay, Wx, Wy):

W - required width

Ax - X value. (anchor position)

X1 - X position value of top left corner relative to left side (X = 0)

X2 - x position value of top right corner relative to left side (X = 0)

The Formula has 5 possible scenarios for an Anchor value

Ax = 0:

X1 = 0 & X2 = Wx

Ax = 1:

X2 = 1 & X1 = (1 - Wx)

Ax = 0.5

X1 = Ax - (0.5)(Wx)

X2 = Ax + (0.5)(Wx)

0 < Ax < 0.5

X1 = Ax - (Ax)(Wx)

X2 = Ax + (1 - Ax)(Wx)

0.5 < Ax < 1

X1 = Ax - (Ax)(Wx)

X2 = Ax + (1-Ax)(Wx)