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>
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
.