AbsoluteLayout - how to put a StackLayout 30% from the top of the page

LorenoArlaLorenoArla USMember ✭✭
edited October 2016 in Xamarin.Forms

Hi,
I've an issue, which probably is very easy to solve, but I have no idea how to do it. I want to have a StackLayout element (100x100), so that its top border would be at 30% of a page.

I wrote this XAML:
<?xml version="1.0" encoding="utf-8" ?>

  <AbsoluteLayout>
    <StackLayout AbsoluteLayout.LayoutBounds="0.5,0.3,100,100" AbsoluteLayout.LayoutFlags="PositionProportional" BackgroundColor="Yellow">

    </StackLayout>  
  </AbsoluteLayout>

</ContentPage>

Unfortunately, my StackLayout is drawn at about 28% from the top of the page. What's the reason for that?

To be honest, I don't really understand how positioning in AbsoluteLayout works.
If I set AbsoluteLayout.LayoutBounds="0,0.3,100,100" AbsoluteLayout.LayoutFlags="PositionProportional" my StackLayout is drawn on the left (the left border of it is in contact with the left side of the page).
If I set AbsoluteLayout.LayoutBounds="1,0.3,100,100" AbsoluteLayout.LayoutFlags="PositionProportional" my StackLayout is drawn on the right (the right border of it is in contact with the right side of the page). And that's weird - I thought it would be drawn outside of the screen.

Which point of the element is the one that we set the position for? In other words: When I set X position of a StackLayout to be 0.3 (PositionProportional), which point of this StackLayout should be positioned at 0.3 - is it the top-left corner? Or maybe the centre of the StackLayout? I can't figure it out.

I hope you understand my issue and can help me.

Tagged:

Posts

  • JensDemeyJensDemey USMember ✭✭

    Hello,

    I have tested this with boxviews in the past. I managed to figure out how it works but it's not so easy to explain. In the end I had to do so much calculating that I just set the X position like this X = (0.3 * myabsolutelayout.Width). It's way more predictable.

    All I can say right now is that if you place a boxview of 20px at 30% that you would have to take a correction of 6 px (or 20/2-4) in your calculation.

  • LorenoArlaLorenoArla USMember ✭✭

    Thank your for your answer! I knew it worked weird, but didn't expect it to be SO weird.

  • JensDemeyJensDemey USMember ✭✭
    edited October 2016

    No problem.

    The reason for this complex math is to support what you said here:

    @LorenoArla said:
    If I set AbsoluteLayout.LayoutBounds="0,0.3,100,100" AbsoluteLayout.LayoutFlags="PositionProportional" my StackLayout is drawn on the left (the left border of it is in contact with the left side of the page).
    If I set AbsoluteLayout.LayoutBounds="1,0.3,100,100" AbsoluteLayout.LayoutFlags="PositionProportional" my StackLayout is drawn on the right (the right border of it is in contact with the right side of the page).)

  • MichaelRumplerMichaelRumpler ATMember ✭✭✭✭✭

    The AbsoluteLayout and how its proportional sizing is meant to work is (poorly) explained at https://developer.xamarin.com/guides/xamarin-forms/user-interface/layouts/absolute-layout/

    Xamarin wanted to be smarted than everybody else and invented a new proportional sizing where 1 places an element INSIDE of the AbsoluteLayout at the right/bottom border. The respective borders of the element and the AbsoluteLayout are aligned. 1 is not 100% but 100% - ElementWidth. Therefore also 0.3 is not 30%. The result of that system is, that nobody understands it.

    I'd use a RelativeLayout in your case.

    RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.3}"
    RelativeLayout.WidthConstraint="{ConstraintExpression Type=Constant, Constant=100}"
    RelativeLayout.HeightConstraint="{ConstraintExpression Type=Constant, Constant=100}"
    
  • LorenoArlaLorenoArla USMember ✭✭

    @MichaelRumpler said:
    The AbsoluteLayout and how its proportional sizing is meant to work is (poorly) explained at https://developer.xamarin.com/guides/xamarin-forms/user-interface/layouts/absolute-layout/

    Xamarin wanted to be smarted than everybody else and invented a new proportional sizing where 1 places an element INSIDE of the AbsoluteLayout at the right/bottom border. The respective borders of the element and the AbsoluteLayout are aligned. 1 is not 100% but 100% - ElementWidth. Therefore also 0.3 is not 30%. The result of that system is, that nobody understands it.

    I'd use a RelativeLayout in your case.

    RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.3}"
    RelativeLayout.WidthConstraint="{ConstraintExpression Type=Constant, Constant=100}"
    RelativeLayout.HeightConstraint="{ConstraintExpression Type=Constant, Constant=100}"

    Yeah, I read the documentation and, to be honest, it does not explain much. Thanks for your input, I'll try to avoid using AbsoluteLayout

  • smartmachinessmartmachines Member ✭✭

    As a late reply, I've put a nuget package with a fork of AbsoluteLayout but working as we expect.

    Install nuget package SmartMachines.AbsoluteLayout, add namespace xmlns:sm="clr-namespace:SmartMachines;assembly=AbsoluteLayout" and enjoy <sm:AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"></sm:AbsoluteLayout>.

    Hope that will save other people several hours on googling and debugging.

Sign In or Register to comment.