In Xamarin, is there any way to use the MaxY Property in xaml during the use of a RelativeLayout?

Question

I want to do this:

         RelativeLayout.YConstraint="{ ConstraintExpression
             Type=RelativeToView,
             ElementName=info_box,
             Property=Y+Height,
             Factor=1,
             Constant=22
         }

Is there any way of achieving this in xaml or am I too attached to xaml and should not worry about it and do things like this in code?

Answer 1

I'm afraid you have to do it in code behind and here is an example I tried:

public MainPage()
{
    InitializeComponent();

    RelativeLayout layout = new RelativeLayout();

    BoxView redBox = new BoxView() {BackgroundColor = Color.Red };
    BoxView blueBox = new BoxView() { BackgroundColor = Color.Blue };

    layout.Children.Add(redBox, Constraint.RelativeToParent((parent) => {
        return parent.X;
    }), Constraint.RelativeToParent((parent) => {
        return parent.Y * .15;
    }), Constraint.RelativeToParent((parent) => {
        return parent.Width;
    }), Constraint.RelativeToParent((parent) => {
        return parent.Height * .8;
    }));

    layout.Children.Add(blueBox, Constraint.RelativeToView(redBox, (Parent, sibling) => {
        return sibling.X + 20;
    }), Constraint.RelativeToView(redBox, (parent, sibling) => {
        return sibling.Y + redBox.Height;
    }), Constraint.RelativeToParent((parent) => {
        return parent.Width * .5;
    }), Constraint.RelativeToParent((parent) => {
        return parent.Height * .5;
    }));

    Content = layout;
}

Or define the controls in the xaml and change the YConstraint in code behind:

    RelativeLayout.SetYConstraint(blueBox, Constraint.RelativeToView(redBox, (parent, sibling) =>
    {
        return sibling.Y + sibling.Height;
    }));

In xaml:

<RelativeLayout>
    <BoxView Color="Red" x:Name="redBox"
    RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
        Property=Height,Factor=.15,Constant=0}"
    RelativeLayout.WidthConstraint="{ConstraintExpression
        Type=RelativeToParent,Property=Width,Factor=1,Constant=0}"
    RelativeLayout.HeightConstraint="{ConstraintExpression
        Type=RelativeToParent,Property=Height,Factor=.4,Constant=0}" />

    <BoxView Color="Blue" x:Name="blueBox"

    RelativeLayout.YConstraint="{ ConstraintExpression Type=RelativeToView,ElementName=redBox,Property=Y,Factor= 1, Constant= 0}"                
    RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,
        ElementName=redBox,Property=X,Factor=1,Constant=20}"
    RelativeLayout.WidthConstraint="{ConstraintExpression
        Type=RelativeToParent,Property=Width,Factor=.5,Constant=0}"
    RelativeLayout.HeightConstraint="{ConstraintExpression
        Type=RelativeToParent,Property=Height,Factor=.5,Constant=0}" />
</RelativeLayout>

BTW, you can easily achieve this layout by using a Grid (with single column) or Vertical StackLayout.