StackLayoutとは?
StackLayoutとは,コントロールを垂直方向または水平方向に順番に並べていくパネルです。ボタンやラベルなどのコントロールを縦方向か横方向かを指定して,置いていきます。
新しいページの作成
StackLayoutを使うには,Xamlを書いていく必要があります。まずは新しいページを作成しましょう。
まず「XamarinApp」プロジェクトを右クリックして…
「追加」→「新しい項目」を選択します。
「Content Page」を選択して名前に「Page006.xaml」と入力して「追加」ボタンを押下します。
これで新しいページ「Page006」が作成されました。
次に「App.xaml.cs」を開き,「MainPage = new XamarinApp.MainPage();」となっているところを次のように変更します。
public App () { InitializeComponent(); MainPage = new XamarinApp.Page006(); }
これで起動すると,Page006が最初に起動するように設定されました。
StackLayoutの使い方
「Page006.xaml」にStackLayoutを記述していきます。
StackLayoutの中に,Labelを2つ配置します。
<StackLayout> <Label Text="AAA"/> <Label Text="BBB"/> </StackLayout>
次のように表示されます。
「AAA」と「BBB」は縦方向に整列して並んでいるのがわかります。
Spacingで余白を設定する
このままではLabelと背景色が同じため,コントロール間の余白がどのようになっているのかがわかりません。それぞれのLabelに背景色を設定します。背景は「BackgroundColor」で設定します。
<StackLayout> <Label Text="AAA" BackgroundColor="Red"/> <Label Text="BBB" BackgroundColor="Blue" TextColor="White"/> </StackLayout>
「AAA」は背景を「赤」,「BBB」は背景を「青」にしています。「BBB」は青背景で黒文字は見づらいので,文字の色を「白」にしています。文字の色の設定は「TextColor」で行います。 これで2つのLabelの間に余白があることがよくわかります。デフォルトでは7ピクセル程度の余白が存在しています。余白を調整する場合はSpacingを設定します。今回は余白なしとするためSpacingをゼロに設定します。
<StackLayout Spacing="0"> <Label Text="AAA" BackgroundColor="Red"/> <Label Text="BBB" BackgroundColor="Blue" TextColor="White"/> </StackLayout>
これで余白がなくなったことがわかります。
Orientationで横方向に配置する
StackLayoutは縦方向だけでなく,横方向にも配置することができます。横方向に並べる場合はOrientationをHorizontalにします。Orientationを指定しなければ,デフォルトのVerticalとなり,縦方向に配置されます。それではOrientationをHorizontalに指定しましょう。
<StackLayout> <StackLayout Spacing="0"> <Label Text="AAA" BackgroundColor="Red"/> <Label Text="BBB" BackgroundColor="Blue" TextColor="White"/> </StackLayout> <StackLayout Orientation="Horizontal"> <Label Text="CCC" BackgroundColor="Red"/> <Label Text="DDD" BackgroundColor="Blue" TextColor="White"/> </StackLayout> </StackLayout>
縦方向のStackLayoutの下に,横方向のStackLayoutを配置しています。そしてその二つのStackLayoutを縦方向に並べるために,全体をStackLayoutで囲んでいます。
横方向に配置されているのがわかります。
サンプルコード全体
using System; using System.Collections.Generic; using System.Linq; using System.Text; using Xamarin.Forms; namespace XamarinApp { public partial class App : Application { public App () { InitializeComponent(); MainPage = new XamarinApp.Page006(); } protected override void OnStart () { // Handle when your app starts } protected override void OnSleep () { // Handle when your app sleeps } protected override void OnResume () { // Handle when your app resumes } } }
<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="XamarinApp.Page006"> <ContentPage.Content> <StackLayout> <StackLayout Spacing="0"> <Label Text="AAA" BackgroundColor="Red"/> <Label Text="BBB" BackgroundColor="Blue" TextColor="White"/> </StackLayout> <StackLayout Orientation="Horizontal"> <Label Text="CCC" BackgroundColor="Red"/> <Label Text="DDD" BackgroundColor="Blue" TextColor="White"/> </StackLayout> </StackLayout> </ContentPage.Content> </ContentPage>