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

问题描述：

我正在尝试弄清楚如何正确布置一些物品在我的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:

我猜我应该使用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?

注意:

这个问题与我想要的布局无关.我想要的布局但是会给我一个真实的样本来学习如何正确地做 Xamarin.Forms中的布局.

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.

答

这是解决方案

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中进行布局的正确方法?

相关推荐