Xamarin bildet relative Layoutbeschränkungen oben und unten

Question

Ich bin neu in Xamarin Formen (Swift ist meine Stärke). Damit meine App über alle Bildschirmgrößen hinweg funktioniert, verwende ich ein relatives Layout. Das einzige Problem ist, ich kann nur herausfinden, wie Sie die Breite und Höhe einstellen.

Was ich tun möchte, ist die oberen und unteren Randbedingungen festlegen.

Dies ist, was ich in schnellen tun können:

lassen 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 

Die im folgende Bild ergibt:

Wie würde ich thi erreichen s in Xamarin Formen? Ich kann nur herausfinden, wie man Width und Height Constraints macht. Ich möchte es auch programmatisch statt XAML oder Drag & Drop machen.

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> 

Das Ergebnis dieses Codes ist:

Hier ist der C# Xamarin Formen Code, ich habe herausgefunden

Was C# Xamarin Formularcode ist erforderlich, um die gleiche Ansicht wie bei swift zu erhalten?

Hinweis: Ich möchte Xamarin Formularcode und nicht separaten Code für Android, Windows und iOS.

Answer 1

Ich bin mir nicht sicher, wie man das mit einem relativen Layout implementiert, aber es ist einfach mit einem 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:

die Höhe im Parameter heightConstraint finden. Die VerticalOptions von RelativeLayout ist die Standardfüllung und wenn die Ansicht (d. H. Das RelativeLayout) in der Größe geändert wird, wird parent.Height neu berechnet.

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;