Xamarin.Formsのレイアウト（１）　StackLayout

#はじめに
UIを作成する上でレイアウトは大切です。
適切なレイアウトを選択することで、使いやすいアプリケーションを作ることができます。

Xamarin.Formsでは以下の5つのレイアウトが用意されています。

- StackLayout
- AbsoluteLayout
- Grid
- RelativeLayout
- FlexLayout


今回利用するサンプルは[こちらのClassmethodさん](https://dev.classmethod.jp/smartphone/xamarin-forms-layout/)のブログに掲載されているC#のサンプルを元にしています。
それに加えてXAMLでの記述の仕方を併記しました。

今回はもっともシンプルな`StackLayout`についてです。

#StackLayout

名前のとおり、要素を積み上げていくレイアウト。
横方向、または縦方向に要素を積み上げていきます。

<img src="https://qiita-image-store.s3.amazonaws.com/0/245438/a2d2a323-743d-131b-3093-fcdca2f4e1d3.png" title="" alt="20190114_200324.png" width="40%" height="" >

## C＃
C#では以下のように記述します。
`Orientation`プロパティでコントロールを並べる方向を指定します。
何も指定しない場合は**縦**方向です。

- StackOrientation.Vertical（縦）
- StackOrientation.Horizontal（横）

```csharp
using Xamarin.Forms;

namespace XamarinFormsUIPractice.Views
{
    public partial class StackLayoutCsharp : ContentPage
    {
        public StackLayoutCsharp()
        {
            InitializeComponent();

            var stackLayout = new StackLayout();
            stackLayout.Orientation = StackOrientation.Vertical;
            stackLayout.Padding = new Thickness(10, 10, 10, 10);
            stackLayout.Spacing = 5;
            stackLayout.Children.Add(new Label
            {
                FontSize = 30,
                Text = "First",
                HeightRequest = 100,
                BackgroundColor = Color.FromHex("82DADA"),
            });
            stackLayout.Children.Add(new Label()
            {
                FontSize = 30,
                Text = "Second",
                //VerticalOptions = LayoutOptions.FillAndExpand,//縦方向に余白を最大限に利用する
                HeightRequest = 200,
                BackgroundColor = Color.FromHex("53CF9E"),
            });
            stackLayout.Children.Add(new Label()
            {
                FontSize = 30,
                Text = "Third",
                HeightRequest = 300,
                BackgroundColor = Color.FromHex("EB6379"),
            });
            stackLayout.Children.Add(new Label()
            {
                FontSize = 30,
                Text = "Forth",
                HeightRequest = 400,
                BackgroundColor = Color.FromHex("53CF9E"),
            });
            stackLayout.Children.Add(new Label()
            {
                FontSize = 30,
                Text = "Fifth",
                HeightRequest = 500,
                BackgroundColor = Color.FromHex("EB6379"),
            });

            this.Content = stackLayout;
        }
    }
}

```

`StackLayout`クラスのインスタンスの`Children`プロパティに要素を`Add`していくと、その順番に並んでいきます。

各要素に指定した高さ、または幅で並んでいきますが、画面いっぱいになると、それぞれの高さの比率に基づいて調整されます。

`StackLayout`に`StackLayout`を入れ子にすることができます。

コメントアウトしてありますが、`VerticalOptions`プロパティに`LayoutOptions.FillAndExpand`を指定すると他の要素が埋まった後に余ったサイズいっぱいになるように自動的に高さ（または幅）を調整してくれます。
例えば、上と下に高さ10の要素を作って真ん中は残り全部使うような指定をすることができます。

#XAML
XAMLでは以下のように書きます。

```xml
    <StackLayout Padding="10,10,10,10" Spacing="5" Orientation="Vertical">
        <Label Text="First" FontSize="30" HeightRequest="100" BackgroundColor="#82DADA"/>
        <Label Text="Second" FontSize="30" HeightRequest="200" BackgroundColor="#53CF9E"/>
        <Label Text="Third" FontSize="30" HeightRequest="300" BackgroundColor="#EB6379"/>
        <Label Text="Forth" FontSize="30" HeightRequest="400" BackgroundColor="#53CF9E"/>
        <Label Text="Fifth" FontSize="30" HeightRequest="500" BackgroundColor="#EB6379"/>
    </StackLayout>
```