CODEWITHSUNDEEP
androidvisual-studioxamlxamarin
Tiaan
Tiaan

Reputation: 699

Xaml AbsoluteLayout Proportional flag does not behave as expected

I'm new to XAML and Xamarin so this may be something everyone is simply used to but I was hoping someone could explain it to me:

<Label Text="Relax" Font="20" TextColor="White" AbsoluteLayout.LayoutBounds="0.5, 50, 1000,1000"  AbsoluteLayout.LayoutFlags="XProportional"></Label>

So I have this label nested in an AbsoluteLayout with no custom properties to it. The label is set to be 50 pixels from the top of the screen and 50% from the side (or in the middle of the screen horizontally). When I run this, the label does not even appear on the screen:

No label

But as soon as I add HorizontalOptions="Center" to its properties it behaves exactly as expected:

Label appears

So when I copy the original properties of the label (note without the horizontal options):

<BoxView Color="Black" AbsoluteLayout.LayoutBounds="0.5, 50, 100,100"  AbsoluteLayout.LayoutFlags="XProportional"></BoxView>

It behaves exactly as expected:

Boxview

So as I said before, I have the solution to positioning the image correctly, so rather I would simply like an explanation as to why the boxview positions itself correctly while the label with exactly the same properties requires a HorizontalOptions="Center" property

Thanks!

Upvotes: 0

Views: 210

Answers (1)

Robbit
Robbit

Reputation: 4358

From your codes:

<Label Text="Relax" 
       Font="20" 
       TextColor="White" 
       AbsoluteLayout.LayoutBounds="0.5, 50, 1000,1000"   
       AbsoluteLayout.LayoutFlags="XProportional"></Label>

The AbsoluteLayout.LayoutBounds has set the label's width and height to 1000, if you add BackgroundColor="Yellow" into your Label, and run your project, you will see the label's area( yellow area) in your screen. The "Relax" text exists on the left and top corner of the 1000*1000's area, but it is outside of your screen, so you can't see it. If you use AbsoluteLayout.LayoutBounds="0.5, 50, 100,100", like your BoxView, you will see the Label.

About HorizontalOptions="Center", it will put your "Relax" text on 1000*1000's center in the horizontal, if you also add VerticalOptions="Center", your "Relax" text will be put on 1000*1000's center( both horizontal and vertical's center), it will be below your screen(outside of your screen), so you can't see it. You can test it with 100*100 or maybe 500*500.

Upvotes: 1

Related Questions