Set height of a layout depending on screen size

Hi,

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

Thanks

Posts

  • 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:

    e.g.
    https://github.com/XLabs/Xamarin-Forms-Labs/blob/master/src/Platform/XLabs.Platform.Droid/Device
    https://github.com/XLabs/Xamarin-Forms-Labs/tree/master/src/Platform/XLabs.Platform.iOS/Device

    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

    @CFraisse

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

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

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

  • CFraisseCFraisse FRMember
    edited September 2016

    @RobertMcIntosh
    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 https://developer.xamarin.com/guides/xamarin-forms/user-interface/layouts/relative-layout/

    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

    @JohnHardman

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