Xamarin.Formsにレイアウトする適切な方法は？

Question

私は、Xamarin.Formsプロジェクトのページにいくつかの項目を正しくレイアウトする方法を理解しようとしています。 以下に示すよう

私は、ログインページとなっているはずグラフィカルなレイアウトを作成する必要があります。

私はGridを使用する必要があることを推測していますが、私はどのように考え出す本当に苦労を持っていますこれを使って。

提示されたレイアウトを作成するにはどうすればよいですか？

注：

この質問は、私が望むレイアウトに関するものではありません。しかし私が望むレイアウト は、Xamarin.Formsで のレイアウトを正しく行う方法を学ぶための現実的なサンプルを私に提供します。

Answer 1

を試してみたソリューション

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

Answer 2

私はここでStackLayout最初

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