CODEWITHSUNDEEP
c#macosvisual-studioxamarin.forms
iProgram
iProgram

Reputation: 6547

Xamarin forms relative layout constraints top and bottom

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:

enter image description here

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:

enter image description here

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.

Upvotes: 1

Views: 1664

Answers (2)

Steve Chadbourne
Steve Chadbourne

Reputation: 6953

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;

Upvotes: 2

Ben
Ben

Reputation: 2985

RelativeLayout:

Find the height in the heightConstraint parameter. The VerticalOptions of RelativeLayout is default Fill and when the view (i.e. 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;

Upvotes: 0

Related Questions