在Xamarin.Forms中进行布局的正确方法?

问题描述

我正在尝试弄清楚如何正确布置一些物品在我的Xamarin.Forms项目的页面上.

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

我需要创建一个登录页面，其图形布局应如下所示:

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

我猜我应该使用Grid，但是我很难确定如何使用它.

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?

注意:

推荐答案

这是解决方案

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;
    }
}

这篇关于在Xamarin.Forms中进行布局的正确方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！