Set height of a layout depending on screen size


On every page of my project I put an AbsoluteLayout (A) (I use it as a custom navigation bar) and I set its properties like this:
<AbsoluteLayout AbsoluteLayout.LayoutBounds="0, 0, 1, 44" AbsoluteLayout.LayoutFlags="PositionProportional,WidthProportional">

Below it I put another AbsoluteLayout (B) which is my actually my real page.

How can I set B's properties to be like:
<AbsoluteLayout AbsoluteLayout.LayoutBounds="0, 0, 1, ScreenSize - 44" AbsoluteLayout.LayoutFlags="PositionProportional,WidthProportional">



  • RobertMcIntoshRobertMcIntosh CAUniversity ✭✭
    edited September 2016

    Calculating the height is platform specific, so you'd have to do something like what's done in XLabs on each platform you are supporting:


    You have to find where the Display is created inside and how the height is calculated.
    Probably from code behind rather than XAML.

    Maybe instead, you could put those in a grid with appropriate row definitions.

  • RobertMcIntoshRobertMcIntosh CAUniversity ✭✭

    Hmm. Those properties belong to the controls you are placing inside the absolute layout, not to the absolute layout itself. Unless those two you have are inside another absolute layout.

    I am guessing you are trying to make a navigation bar that's 44 in height and leave the rest of the display for content. For this you can use a grid or stacklayout.

  • JohnHardmanJohnHardman GBUniversity mod


    Using RelativeLayout, rather than AbsoluteLayout, I do something similar as follows:

                RelativeLayout transparentLayout = new RelativeLayout
                            // other init stuff here
                    Constraint.RelativeToParent((parent) => { return parent.Width - 44; }),
                    Constraint.RelativeToParent((parent) => { return parent.Height - 44; }),

    I would imagine AbsoluteLayout does something similar, but I don't know for sure.

  • CFraisseCFraisse FRMember
    edited September 2016

    You're right my objectiv is to do something like:

    <AbsoluteLayout> <AbsoluteLayout AbsoluteLayout.LayoutBounds="0, 0, 1, 44" AbsoluteLayout.LayoutFlags="PositionProportional,WidthProportional"> <!-- My navigation Bar --> </AbsoluteLayout> <AbsoluteLayout AbsoluteLayout.LayoutBounds="0, 1, 1, ScreenSize - 44" AbsoluteLayout.LayoutFlags="All"> <!-- My Page --> </AbsoluteLayout> </AbsoluteLayout>

    How can I do this with a grid or a StackLayout ? (Never used a grid before)

    @JohnHardman I never used a RelativeLayout too, can you explain it in detail ? Can I do it in Xaml ?

  • JohnHardmanJohnHardman GBUniversity mod

    @CFraisse - You can use XAML for RelativeLayout. Documentation for use of RelativeLayout can be found at

    In the code sample I provided above, the elements are:

    Constraint.Constant(44) // a constant value used for the width and height of an image
    Constraint.RelativeToParent((parent) => { return parent.Width - 44; }) // Specifying an x position, 44 in from the right-hand-side of the parent
    Constraint.RelativeToParent((parent) => { return parent.Height - 44; }) // Specifying a y position, 44 from the bottom of the parent

    The page referenced above shows how this sort of thing is done in XAML

  • CFraisseCFraisse FRMember
    edited September 2016

    Ok thanks
    So I just have to change my second AbsoluteLayout (which contain my page) by the RelativeLayout and it's ok ?

  • JohnHardmanJohnHardman GBUniversity mod

    @CFraisse - Give it a try :-) Whether you mix AbsoluteLayout and RelativeLayout on the same page is probably a matter of personal coding style (although AbsoluteLayout is often going to be faster).

  • CFraisseCFraisse FRMember
    edited September 2016

    Should I do something like that ?

    <RelativeLayout> <AbsoluteLayout HeightRequest="44"> <!-- My navigation Bar --> </AbsoluteLayout> <AbsoluteLayout RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,Property=Height,Factor=1,Constant=-44}"> <!-- My Page --> </AbsoluteLayout> </RelativeLayout>

    So my navigation Bar will be 44 and my page will be the page -44 ?

  • CFraisseCFraisse FRMember


    <AbsoluteLayout BackgroundColor="Red" HeightRequest="44" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, Property=Width, Factor=1}" RelativeLayout.XConstraint="{ConstraintExpression Type=Constant, Constant=0}" RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=0}"

    Here's what I did to set my NavigationBar, and I don't understand why the width isn't good.
    I means the bar is where I want on the screen with the good height but why she doesn't fill the screen's width. It looks like her width is .4 of the screen's width.

    Is there something I didn't understand while reading the RelativeLayout documentation ? (I'm french so maybe is there some things that I didn't understand)

  • JohnHardmanJohnHardman GBUniversity mod

    @CFraisse - I'm not a XAML person (I do everything in C# still, although might change soon). However, I suspect that you want to use RelativeToParent rather than RelativeToView

  • CFraisseCFraisse FRMember

    That's what I did and it works. Btw Idon't understand why RelativeToView gives me that result.
    Thanks for all

  • JohnHardmanJohnHardman GBUniversity mod

    @CFraisse - If you use RelativeToView, I think you'll need to specify ElementName so that it has a View to work relative to.

Sign In or Register to comment.