mauiabsolutelayout

MAUI Position Proportional within AbsoluteLayout

I try to use the AbsoluteLayout in MAUI project.

I don't understant how children are placed within layout.

My first label setting : width=50% at X=0

My second label setting : width=25% at x=25%

AbsoluteLayout

As you can see, my second label is not at the right place. The left border of the second label should be at 25%(middle of the first label) of the layout's width and the right border of the two labels should be overlaied.

<AbsoluteLayout WidthRequest="600" HeightRequest="150" BackgroundColor="LawnGreen" Margin="0,0,0,50">
    <Label AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0.5,0.5,0.8" Text="Label1" BackgroundColor="Yellow" />
    <Label AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0.25,0.5,0.25,0.8" Text="Label2" BackgroundColor="Brown" Opacity="0.5" />
</AbsoluteLayout>

Could you help me please?

Solution

  • I found the answer on ther post : Xamarin Forms - AbsoluteLayout - How does works positions

    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)