Xamarin.Formsでスマホアプリ開発

C#Xamarin.Formsでスマホ開発#06 StackLayoutの使い方を解説

Udemyで公開しているC#のコースを1つ無料でプレゼントしています。こちらから確認してください。

StackLayoutとは?

StackLayoutとは,コントロールを垂直方向または水平方向に順番に並べていくパネルです。ボタンやラベルなどのコントロールを縦方向か横方向かを指定して,置いていきます。

新しいページの作成

StackLayoutを使うには,Xamlを書いていく必要があります。まずは新しいページを作成しましょう。

まず「XamarinApp」プロジェクトを右クリックして…

「追加」→「新しい項目」を選択します。

「Content Page」を選択して名前に「Page006.xaml」と入力して「追加」ボタンを押下します。

これで新しいページ「Page006」が作成されました。

次に「App.xaml.cs」を開き,「MainPage = new XamarinApp.MainPage();」となっているところを次のように変更します。

これで起動すると,Page006が最初に起動するように設定されました。

StackLayoutの使い方

「Page006.xaml」にStackLayoutを記述していきます。
StackLayoutの中に,Labelを2つ配置します。

次のように表示されます。

「AAA」と「BBB」は縦方向に整列して並んでいるのがわかります。

Spacingで余白を設定する

このままではLabelと背景色が同じため,コントロール間の余白がどのようになっているのかがわかりません。それぞれのLabelに背景色を設定します。背景は「BackgroundColor」で設定します。

「AAA」は背景を「赤」,「BBB」は背景を「青」にしています。「BBB」は青背景で黒文字は見づらいので,文字の色を「白」にしています。文字の色の設定は「TextColor」で行います。 これで2つのLabelの間に余白があることがよくわかります。デフォルトでは7ピクセル程度の余白が存在しています。余白を調整する場合はSpacingを設定します。今回は余白なしとするためSpacingをゼロに設定します。

これで余白がなくなったことがわかります。

Orientationで横方向に配置する

StackLayoutは縦方向だけでなく,横方向にも配置することができます。横方向に並べる場合はOrientationをHorizontalにします。Orientationを指定しなければ,デフォルトのVerticalとなり,縦方向に配置されます。それではOrientationをHorizontalに指定しましょう。

縦方向のStackLayoutの下に,横方向のStackLayoutを配置しています。そしてその二つのStackLayoutを縦方向に並べるために,全体をStackLayoutで囲んでいます。

横方向に配置されているのがわかります。

サンプルコード全体

Udemyで公開しているC#のコースを1つ無料でプレゼントしています。こちらから確認してください。