Xamarin forms relative layout constraints top and bottom

Question

I am new to Xamarin.Forms ( Swift is my strong point). To make my App work across all screen sizes, I am using RelativeLayout . The only problem is, I can only find out how to set the width and height.

What I want to do is set the top and bottom constraints.

This is what I can do in Swift :

let redBox = UIView()
redBox.translatesAutoresizingMaskIntoConstraints = false
redBox.backgroundColor = .red

let blueBox = UIView()
blueBox.translatesAutoresizingMaskIntoConstraints = false
blueBox.backgroundColor = .blue

view.addSubview(redBox)
view.addSubview(blueBox)

redBox.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true
redBox.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
redBox.heightAnchor.constraint(equalToConstant: 150).isActive = true

blueBox.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true
blueBox.topAnchor.constraint(equalTo: redBox.bottomAnchor).isActive = true
blueBox.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true

This results in the following screen:

How would I achieve this in Xamarin.Forms ? I can only find out how to do width and height constraints. I also want to do it programatically instead of XAML or drag and drop.

Here is the C# Xamarin.Forms code that I have found out:

var layout = new RelativeLayout();
Content = layout;

var aquaBox = new BoxView()
{
    Color = Color.Aqua
};

var silverBox = new BoxView
{
    Color = Color.Silver
};

aquaBox.HeightRequest = 150;
layout.Children.Add(aquaBox,
    widthConstraint: Constraint.RelativeToParent(parent => parent.Width)
);

layout.Children.Add(silverBox,
    yConstraint: Constraint.RelativeToView(aquaBox, (RelativeLayout, element) => element.Height)
);

XAML :

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:local="clr-namespace:Test"
             x:Class="Test.TestPage">

</ContentPage>

The result of this code is:

What C# Xamarin.Forms code is needed to get the same view as I have with Swift ?

Note: I would like Xamarin.Forms code and not separate code for Android , Windows and iOS .

Answer 1

I'm not sure how to implement that with a RelativeLayout but it is easy with a Grid .

var aquaBox = new BoxView
{
    Color = Color.Aqua,
    HeightRequest = 150
};

var silverBox = new BoxView
{
    Color = Color.Silver
};

var grid = new Grid { RowSpacing = 0 };
grid.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto});
grid.RowDefinitions.Add(new RowDefinition { Height = GridLength.Star });

grid.Children.Add(aquaBox, 0, 0);
grid.Children.Add(silverBox, 0, 1);

Content = grid;

Answer 2

RelativeLayout :

Find the height in the heightConstraint parameter. The VerticalOptions of RelativeLayout is default Fill and when the view (ie the RelativeLayout ) is resized the parent.Height will be recalculated.

var layout = new RelativeLayout(); //VerticalOptions is default Fill

var aquaBox = new BoxView
{
    Color = Color.Aqua,
    HeightRequest = 150
};

var silverBox = new BoxView
{
    Color = Color.Silver
};

layout.Children.Add(aquaBox, 
    widthConstraint: Constraint.RelativeToParent((parent) => parent.Width)
    );

layout.Children.Add(silverBox,
    widthConstraint: Constraint.RelativeToParent((parent) => parent.Width),
    yConstraint: Constraint.RelativeToView(aquaBox, (parent, sibling) => sibling.Height),
    heightConstraint: Constraint.RelativeToParent((parent) => parent.Height - aquaBox.HeightRequest)
    );

Content = layout;