今回はStackLayoutの続きで，VerticalOptionsとHorizontalOptionsの使い方を見ていきたいと思います。VerticalOptionsとHorizontalOptionsは，StackLayoutの中で，どこからどんな感じでコントロールを置いていくかを指定するためのモノです。
VerticalOptionsとHorizontalOptions
VerticalOptionsとHorizontalOptionsはコントロールをどのように配置するかを指定するもので，配置方法は次の4種類があります。
- Start：開始位置（左，上）
- 左から右に並べていく場合は，左になります。
- 上から下に並べていく場合は，上になります。
- Center：中央
- 中央に配置します。
- End：終端（右，下）
- 左から右に並べていく場合は，右になります。
- 上から下に並べていく場合は，下になります。
- Fill：全体
- 全体に引き伸ばして配置します。
AndExpand
Start，Center，End，Fillにはそれぞれ「AndExpand」というものがあります。AndExpandを指定すると，残りの余白を占有して配置します。
- StartAndExpand
- CenterAndExpand
- EndAndExpand
- FillAndExpand
横方向の配置サンプルコード
VerticalOptionsとHorizontalOptions指定なし
StackLayoutを置いてOrientationをHorizontalで横向きに並べていきます。Spacingをゼロにすることで，スペースなくコントロールを並べていきます。
最初はLabelをテキストを「AAA」，背景色「赤」で設置します。VerticalOptionsとHorizontalOptionsを指定していないので，どちらもデフォルトの「Fill」扱いとなります。
ラベル「AAA」が表示されました。背景色の「赤」が縦には伸びていますが，横には伸びていません。VerticalOptionsとHorizontalOptionsのデフォルトがどちらも「Fill」ならどちらものびてもよさそうですが伸びません。これはStackLayoutの並び順がOrientationをHorizontalで横向きに積んでいるためです。StackLayoutが１つで横向きなので，縦のスペースはFillで埋めることができますが，右側のスペースはコントロールをこれからも積んでいくスペースなので，Fillでは埋まりません。このスペースを埋める場合は「FillAndExpand」にする必要があります。
VerticalOptionsとHorizontalOptionsを「Fill」
テキストを「BBB」，VerticalOptionsとHorizontalOptionsを「Fill」で設置します。
<StackLayout Orientation="Horizontal" Spacing="0">
<Label Text="AAA" BackgroundColor="Red"/>
<Label Text="BBB" BackgroundColor="Blue" VerticalOptions="Fill" HorizontalOptions="Fill"/>
</StackLayout>
「AAA」と同様の動作を「BBB」もしています。よってデフォルトが「Fill」であることが確認できます。
VerticalOptions「Start」とHorizontalOptions「Start」
テキスト「CCC」をVerticalOptions「Start」とHorizontalOptions「Start」で配置します。
<StackLayout Orientation="Horizontal" Spacing="0">
<Label Text="AAA" BackgroundColor="Red"/>
<Label Text="BBB" BackgroundColor="Blue" VerticalOptions="Fill" HorizontalOptions="Fill"/>
<Label Text="CCC" BackgroundColor="Red" VerticalOptions="Start" HorizontalOptions="Start"/>
</StackLayout>
「CCC」は左上に表示され，縦にも横にも余白を埋める伸び方はしません。
VerticalOptions「Start」とHorizontalOptions「FillAndExpand」
「DDD」をVerticalOptions「Start」とHorizontalOptions「FillAndExpand」とします。
<StackLayout Orientation="Horizontal" Spacing="0">
<Label Text="AAA" BackgroundColor="Red"/>
<Label Text="BBB" BackgroundColor="Blue" VerticalOptions="Fill" HorizontalOptions="Fill"/>
<Label Text="CCC" BackgroundColor="Red" VerticalOptions="Start" HorizontalOptions="Start"/>
<Label Text="DDD" BackgroundColor="Blue" VerticalOptions="Start" HorizontalOptions="FillAndExpand"/>
</StackLayout>
「DDD」は縦方向がStartなので伸びません。横方向はFillAndExpandなので余白を埋めていることがわかります。
VerticalOptions「Start」とHorizontalOptions「FillAndExpand」
「EEE」も「DDD」と同じ設定にして，余白を均等に埋めることを確認します。
<StackLayout Orientation="Horizontal" Spacing="0">
<Label Text="AAA" BackgroundColor="Red"/>
<Label Text="BBB" BackgroundColor="Blue" VerticalOptions="Fill" HorizontalOptions="Fill"/>
<Label Text="CCC" BackgroundColor="Red" VerticalOptions="Start" HorizontalOptions="Start"/>
<Label Text="DDD" BackgroundColor="Blue" VerticalOptions="Start" HorizontalOptions="FillAndExpand"/>
<Label Text="EEE" BackgroundColor="Red" VerticalOptions="Start" HorizontalOptions="FillAndExpand"/>
</StackLayout>
「DDD」と「EEE」で余ったスペースを均等に割り当てていることがわかります。
VerticalOptions「Start」とHorizontalOptions「Start」
最後に「FFF」をVerticalOptions「Start」とHorizontalOptions「Start」にしたときの動きを見てみます。
<StackLayout Orientation="Horizontal" Spacing="0">
<Label Text="AAA" BackgroundColor="Red"/>
<Label Text="BBB" BackgroundColor="Blue" VerticalOptions="Fill" HorizontalOptions="Fill"/>
<Label Text="CCC" BackgroundColor="Red" VerticalOptions="Start" HorizontalOptions="Start"/>
<Label Text="DDD" BackgroundColor="Blue" VerticalOptions="Start" HorizontalOptions="FillAndExpand"/>
<Label Text="EEE" BackgroundColor="Red" VerticalOptions="Start" HorizontalOptions="FillAndExpand"/>
<Label Text="FFF" BackgroundColor="Blue" VerticalOptions="Start" HorizontalOptions="Start"/>
</StackLayout>
「DDD」「EEE」は余ったスペースを埋めますが，最後の「FFF」も必要なスペースで配置されています。
縦方向の配置サンプルコード
縦方向のパターンも検証してみます。
すでに横方向のStackLayoutが存在するのでその下にもう一つStackLayoutを配置しますが，それではStackLayoutがあと勝ちになって，一つ目のStackLayoutが表示されなくなります。そこで二つのStackLayoutを並べるためのStackLayoutをもっとも外側に記述します。その中に「GGG」ラベルをVerticalOptions「Start」とHorizontalOptions「Start」で配置します。
<StackLayout>
<StackLayout Orientation="Horizontal" Spacing="0">
<Label Text="AAA" BackgroundColor="Red"/>
<Label Text="BBB" BackgroundColor="Blue" VerticalOptions="Fill" HorizontalOptions="Fill"/>
<Label Text="CCC" BackgroundColor="Red" VerticalOptions="Start" HorizontalOptions="Start"/>
<Label Text="DDD" BackgroundColor="Blue" VerticalOptions="Start" HorizontalOptions="FillAndExpand"/>
<Label Text="EEE" BackgroundColor="Red" VerticalOptions="Start" HorizontalOptions="FillAndExpand"/>
<Label Text="FFF" BackgroundColor="Blue" VerticalOptions="Start" HorizontalOptions="Start"/>
</StackLayout>
<StackLayout Orientation="Vertical" Spacing="0">
<Label Text="GGG" BackgroundColor="Red" VerticalOptions="Start" HorizontalOptions="Start"/>
</StackLayout>
</StackLayout>
「GGG」は「AAA」から始まる横方向のStackLayoutの下に表示されました。VerticalOptions「Start」とHorizontalOptions「Start」なので，左上に表示されています。
VerticalOptions「Fill」とHorizontalOptions「Fill」
「HHH」をVerticalOptions「Fill」とHorizontalOptions「Fill」で配置します。
<StackLayout>
<StackLayout Orientation="Horizontal" Spacing="0">
<Label Text="AAA" BackgroundColor="Red"/>
<Label Text="BBB" BackgroundColor="Blue" VerticalOptions="Fill" HorizontalOptions="Fill"/>
<Label Text="CCC" BackgroundColor="Red" VerticalOptions="Start" HorizontalOptions="Start"/>
<Label Text="DDD" BackgroundColor="Blue" VerticalOptions="Start" HorizontalOptions="FillAndExpand"/>
<Label Text="EEE" BackgroundColor="Red" VerticalOptions="Start" HorizontalOptions="FillAndExpand"/>
<Label Text="FFF" BackgroundColor="Blue" VerticalOptions="Start" HorizontalOptions="Start"/>
</StackLayout>
<StackLayout Orientation="Vertical" Spacing="0">
<Label Text="GGG" BackgroundColor="Red" VerticalOptions="Start" HorizontalOptions="Start"/>
<Label Text="HHH" BackgroundColor="Blue" VerticalOptions="Fill" HorizontalOptions="Fill"/>
</StackLayout>
</StackLayout>
「HHH」は横方向には伸びますが，縦方向には伸びません。これはこのStackLayoutが縦方向に積んでいく並びなので，縦方向はAndExpandにしないと伸びません。横方向は，そもそもコントロールを配置する予定のないスペースなので「Fill」を指定するだけで伸びます。
VerticalOptions「FillAndExpand」とHorizontalOptions「FillAndExpand」
最後に「III」をVerticalOptions「FillAndExpand」とHorizontalOptions「FillAndExpand」にした結果を見てみます。両方をFillAndExpandにしているため，縦にも横にも伸びそうに思いますが，結果は異なります。
<StackLayout>
<StackLayout Orientation="Horizontal" Spacing="0">
<Label Text="AAA" BackgroundColor="Red"/>
<Label Text="BBB" BackgroundColor="Blue" VerticalOptions="Fill" HorizontalOptions="Fill"/>
<Label Text="CCC" BackgroundColor="Red" VerticalOptions="Start" HorizontalOptions="Start"/>
<Label Text="DDD" BackgroundColor="Blue" VerticalOptions="Start" HorizontalOptions="FillAndExpand"/>
<Label Text="EEE" BackgroundColor="Red" VerticalOptions="Start" HorizontalOptions="FillAndExpand"/>
<Label Text="FFF" BackgroundColor="Blue" VerticalOptions="Start" HorizontalOptions="Start"/>
</StackLayout>
<StackLayout Orientation="Vertical" Spacing="0">
<Label Text="GGG" BackgroundColor="Red" VerticalOptions="Start" HorizontalOptions="Start"/>
<Label Text="HHH" BackgroundColor="Blue" VerticalOptions="Fill" HorizontalOptions="Fill"/>
<Label Text="III" BackgroundColor="Red" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"/>
</StackLayout>
</StackLayout>
「III」は両方FillAndExpandですが横方向には伸びていますが，縦方向には伸びていません。これは今回StackLayoutを３つ配置しているのが原因です。「III」のあるStackLayoutを１つだけ配置すれば縦にも横にも伸びます。しかし，「AAA」のあるStackLayoutと「III」のあるStackLayoutを囲んでいる外側のStackLayoutがあるため，この外側のStackLayoutによって「AAA」のStackLayoutと「III」のStackLayoutは縦方向に積まれていく状態になっています。「III」のあるStackLayoutはVerticalOptionsを指定していないので，デフォルトの「Fill」が適応され，縦積みのレイアウト内では，Fillで縦方向には伸びないという理論になります。そこで「III」のあるStackLayoutのVerticalOptionsを「FillAndExpand」にすることで期待通りの動作をします。
<StackLayout>
<StackLayout Orientation="Horizontal" Spacing="0">
<Label Text="AAA" BackgroundColor="Red"/>
<Label Text="BBB" BackgroundColor="Blue" VerticalOptions="Fill" HorizontalOptions="Fill"/>
<Label Text="CCC" BackgroundColor="Red" VerticalOptions="Start" HorizontalOptions="Start"/>
<Label Text="DDD" BackgroundColor="Blue" VerticalOptions="Start" HorizontalOptions="FillAndExpand"/>
<Label Text="EEE" BackgroundColor="Red" VerticalOptions="Start" HorizontalOptions="FillAndExpand"/>
<Label Text="FFF" BackgroundColor="Blue" VerticalOptions="Start" HorizontalOptions="Start"/>
</StackLayout>
<StackLayout Orientation="Vertical" Spacing="0" VerticalOptions="FillAndExpand">
<Label Text="GGG" BackgroundColor="Red" VerticalOptions="Start" HorizontalOptions="Start"/>
<Label Text="HHH" BackgroundColor="Blue" VerticalOptions="Fill" HorizontalOptions="Fill"/>
<Label Text="III" BackgroundColor="Red" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"/>
</StackLayout>
</StackLayout>
これで「III」が縦横両方に伸びました。
サンプルコード全体
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:X007"
x:Class="X007.MainPage">
<StackLayout>
<StackLayout Orientation="Horizontal" Spacing="0">
<Label Text="AAA" BackgroundColor="Red"/>
<Label Text="BBB" BackgroundColor="Blue" VerticalOptions="Fill" HorizontalOptions="Fill"/>
<Label Text="CCC" BackgroundColor="Red" VerticalOptions="Start" HorizontalOptions="Start"/>
<Label Text="DDD" BackgroundColor="Blue" VerticalOptions="Start" HorizontalOptions="FillAndExpand"/>
<Label Text="EEE" BackgroundColor="Red" VerticalOptions="Start" HorizontalOptions="FillAndExpand"/>
<Label Text="FFF" BackgroundColor="Blue" VerticalOptions="Start" HorizontalOptions="Start"/>
</StackLayout>
<StackLayout Orientation="Vertical" Spacing="0" VerticalOptions="FillAndExpand">
<Label Text="GGG" BackgroundColor="Red" VerticalOptions="Start" HorizontalOptions="Start"/>
<Label Text="HHH" BackgroundColor="Blue" VerticalOptions="Fill" HorizontalOptions="Fill"/>
<Label Text="III" BackgroundColor="Red" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"/>
</StackLayout>
</StackLayout>
</ContentPage>