Почему эти ограничения в RelativeLayout не работают в проекте Xamarin Forms?

Question

Макет выглядит следующим образом:

<?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:views="clr-namespace:Test.Views" x:Class="Test.Views.MainPage">
    <StackLayout VerticalOptions="FillAndExpand">
        <BoxView Color="Yellow" HeightRequest="25" VerticalOptions="Start"></BoxView>
        <RelativeLayout x:Name="mainView" BackgroundColor="Red" VerticalOptions="StartAndExpand">
            <BoxView x:Name="boxA" Color="Blue" WidthRequest="50" HeightRequest="50"
                RelativeLayout.XConstraint="{Binding BoxAXConstraint}"
                RelativeLayout.YConstraint="{Binding BoxAYConstraint}">
            </BoxView>
            <BoxView x:Name="boxB" Color="Green" WidthRequest="50" HeightRequest="50"
                RelativeLayout.XConstraint="{Binding BoxBXConstraint}"
                RelativeLayout.YConstraint="{Binding BoxBYConstraint}">
            </BoxView>
        </RelativeLayout>
    </StackLayout>
</ContentPage>

Я не смог найти способ указать правый нижний угол в относительной компоновке в XAML, поэтому я связываю эти ограничения со свойствами в выделенном фрагменте кода следующим образом:

public partial class MainPage : ContentPage
{
    public Constraint BoxAXConstraint { get; set; }
    public Constraint BoxAYConstraint { get; set; }
    public Constraint BoxBXConstraint { get; set; }
    public Constraint BoxBYConstraint { get; set; }

    public MainPage()
    {
        InitializeComponent();

        BoxAXConstraint = Constraint.RelativeToParent(parent => mainView.Width - boxA.WidthRequest);
        BoxAYConstraint = Constraint.RelativeToParent(parent => 0);
        BoxBXConstraint = Constraint.RelativeToParent(parent => mainView.Width - boxB.WidthRequest);
        BoxBYConstraint = Constraint.RelativeToParent(parent => mainView.Height - boxB.HeightRequest);

        BindingContext = this;
    }
}

Это тестовый проект , который воспроизводит проблему на Android и iOS.

Answer 1

RelativeLayout имеет ограничения на то, что может быть выражено в XAML - например, вы не можете ссылаться на свойства макета двух разных элементов в одном и том же ограничении. Вы можете определенно выразить больше в C #. В этом случае вы должны иметь возможность делать вещи почти эквивалентно в XAML:

        <BoxView x:Name="boxB" Color="Green" WidthRequest="50" HeightRequest="50"
            RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,
        Property=Width,Factor=1,Constant=-50}"
            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
        Property=Height,Factor=1,Constant=-50}">
        </BoxView>

Недостатком подхода XAML является то, что если вы изменяете WidthRequest или HeightRequest, вам также необходимо изменить ограничения, тогда как в версии C # изменения автоматически учитываются из-за способа определения ограничений.

Вы можете посмотреть на AbsoluteLayout, который (в отличие от RelativeLayout) пытается удерживать элементы на экране. Таким образом, вы можете легко расположить дочерний элемент AbsoluteLayout в правом нижнем углу в XAML:

AbsoluteLayout.LayoutBounds="1,1,-1,-1" AbsoluteLayout.LayoutFlags="PositionProportional"