Xamarin 形成相对布局约束顶部和底部答案

【问题标题】：Xamarin forms relative layout constraints top and bottomXamarin 形成相对布局约束顶部和底部
【发布时间】：2018-06-05 21:12:05
【问题描述】：

我是Xamarin.Forms 的新手（Swift 是我的强项）。为了让我的应用程序适用于所有屏幕尺寸，我使用RelativeLayout。唯一的问题是，我只能找出如何设置宽度和高度。

我要做的是设置顶部和底部约束。

这是我在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

这将导致以下屏幕：

我将如何在Xamarin.Forms 中实现这一目标？我只能找出如何做宽度和高度限制。我也想以编程方式而不是 XAML 或拖放。

这是我发现的C#Xamarin.Forms代码：

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>

这段代码的结果是：

需要什么C#Xamarin.Forms 代码才能获得与Swift 相同的视图？

注意：我想要Xamarin.Forms 代码，而不是Android、Windows 和iOS 的单独代码。

【问题讨论】：

标签： c# macos visual-studio xamarin.forms

【解决方案1】：

我不确定如何使用 RelativeLayout 来实现它，但使用 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;

【讨论】：

【解决方案2】：

RelativeLayout：

在heightConstraint 参数中查找高度。 RelativeLayout 的 VerticalOptions 是默认的 Fill，当调整视图（即 RelativeLayout）的大小时，将重新计算 parent.Height。

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;

【讨论】：