Proper way to lay out in Xamarin.Forms?

I'm trying to figure out how to properly lay out a few items on a page in my Xamarin.Forms project.

I need to create a login page and the graphical layout should look something as presented below:

I am guessing that I should use Grid but I have a really hard time figuring out how to use it.

How would I go about to create the presented layout?

Note:

This question isn't about the layout I desire. The layout I desire would however give me a real-world sample to learn how to properly do layouts in Xamarin.Forms.

回答1:

Here is the solution

public partial class ComplexRelativeLayoutPage : ContentPage
{
    public ComplexRelativeLayoutPage()
    {
        InitializeComponent();

        RelativeLayout layout = new RelativeLayout();

        Label topLabel = new Label
        {
            Text = "I am a label",
        };
        layout.Children.Add(topLabel,
            Constraint.RelativeToParent((parent) =>
            {
                return parent.Width / 2 - topLabel.Measure(double.PositiveInfinity, double.PositiveInfinity).Request.Width / 2;
            }),
            Constraint.Constant(10)
            );


        Image blueImage = new Image
        {
            Source= ImageSource.FromResource("ButtonRendererDemo.Resources.test.jpg")
        };
        layout.Children.Add(blueImage,
            Constraint.RelativeToParent((parent) =>
            {
                return parent.Width / 2 - 300 / 2;
            }),
            Constraint.RelativeToView(topLabel, (parent, label) =>
            {
                 return label.Bounds.Bottom + 20;
            }),
            Constraint.Constant(300),
            Constraint.Constant(250)
        );

        Entry e1 = new Entry
        {
            Placeholder="Input Box 1",
        };
        layout.Children.Add(e1,
            Constraint.RelativeToParent((parent) =>
            {
                return parent.X + 10; 
            }),
            Constraint.RelativeToView(blueImage, (parent, img) =>
            {
                return img.Bounds.Bottom + 20;
            }),
            Constraint.RelativeToParent((parent) =>
            {
                return parent.Width - 20;
            })
        );

        Entry e2 = new Entry
        {
            Placeholder = "Input Box 2",
        };
        layout.Children.Add(e2,
            Constraint.RelativeToParent((parent) =>
            {
                return parent.X + 10;
            }),
            Constraint.RelativeToView(e1, (parent, e) =>
            {
                return e.Bounds.Bottom;
            }),
            Constraint.RelativeToParent((parent) =>
            {
                return parent.Width - 20;
            })
        );

        Button bLeft = new Button
        {
            Text = "Button",
            BackgroundColor = Color.Pink
        };
        layout.Children.Add(bLeft,
            Constraint.RelativeToParent((parent) =>
            {
                return parent.X + 20;
            }),
            Constraint.RelativeToView(e2, (parent, e) =>
            {
                return e.Bounds.Bottom;
            })
        );

        Button bRight1 = new Button
        {
            Text = "Button",
            BackgroundColor = Color.Pink
        };
        layout.Children.Add(bRight1,
            Constraint.RelativeToParent((parent) =>
            {
                return parent.Width - bRight1.Measure(double.PositiveInfinity, double.PositiveInfinity).Request.Width - 20;
            }),
            Constraint.RelativeToView(bLeft, (parent, b) =>
            {
                return b.Y;
            })
        );

        Button bRight2 = new Button
        {
            Text = "Button",
            BackgroundColor=Color.Pink
        };
        layout.Children.Add(bRight2,
            Constraint.RelativeToView(bRight1, (parent, b) =>
            {
                return b.X;
            }),
            Constraint.RelativeToView(bRight1, (parent, b) =>
            {
                return b.Bounds.Bottom + 10;
            })
        );

        Button bBottom1 = new Button
        {
            Text = "Button",
            BackgroundColor = Color.Lime
        };
        layout.Children.Add(bBottom1,
            Constraint.RelativeToParent((parent) =>
            {
                return parent.Width / 2 - bBottom1.Measure(double.PositiveInfinity, double.PositiveInfinity).Request.Width / 2;
            }),               
            Constraint.RelativeToView(bRight2, (parent, b) =>
            {
                return b.Bounds.Bottom + 20;
            })
        );

        Button bBottom2 = new Button
        {
            Text = "Button",
            BackgroundColor = Color.Lime
        };
        layout.Children.Add(bBottom2,
            Constraint.RelativeToView(bBottom1, (parent, b) =>
            {
                return b.X;
            }),
            Constraint.RelativeToView(bBottom1, (parent, b) =>
            {
                return b.Bounds.Bottom + 10;
            })
        );

        ScrollView v = new ScrollView
        {
            Content=layout
        };

        Content = v;
    }
}

回答2:

I'd try a StackLayout first

<StackLayout>
  <Label />
  <Image />
  <Entry />
  <Entry />
  <StackLayout Orientation="Horizontal">
    <Button />
    <StackLayout>
      <Button />
      <Button />
    </StackLayout>
  </StackLayout>
  <Button />
  <Button />
</StackLayout>