Xamarin Forms - AbsoluteLayout - How does works positions

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)


<AbsoluteLayout BackgroundColor="Yellow">
<BoxView
    Color="Red"
    AbsoluteLayout.LayoutBounds="1.0, 1.0, 0.5, 0.5"
    AbsoluteLayout.LayoutFlags="All" />

<BoxView
    Color="Green"
    WidthRequest="50"
    HeightRequest="50"
    AbsoluteLayout.LayoutBounds="0.1, 0.1, AutoSize, AutoSize"
    AbsoluteLayout.LayoutFlags="PositionProportional" />

<BoxView
    Color="Blue"
    AbsoluteLayout.LayoutBounds="0.25, 0.25, 0.5, 0.5"
    AbsoluteLayout.LayoutFlags="All" />
</AbsoluteLayout>

enter image description here

When I researched AbsoluteLayout I created this sample and

Test it and you'll see

What I've decided from my investigation: X and Y are coordinates of top left corner of View. It's relative position. As you can see for red rectangle 1.0, 1.0 is center position, so, as I understand, 100% width of screen is 2.0(same for height). All views inside AbsoluteLayout positioned dependently on values of parent AbsoluteLayout.

Edited:

X and Y are center coordinate of View, not left top corner. And 100% of Width is 1.0.