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

StackLayoutとは？
新しいページの作成
StackLayoutの使い方
Spacingで余白を設定する
Orientationで横方向に配置する
サンプルコード全体

StackLayoutとは？

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

新しいページの作成

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

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

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

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

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

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

public App ()
{
	InitializeComponent();

	MainPage = new XamarinApp.Page006();
}

public App ()

{

InitializeComponent();

MainPage = new XamarinApp.Page006();

}

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

StackLayoutの使い方

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

<StackLayout>
    <Label Text="AAA"/>
    <Label Text="BBB"/>
</StackLayout>

</StackLayout>

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

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

Spacingで余白を設定する

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

<StackLayout>
    <Label Text="AAA" BackgroundColor="Red"/>
    <Label Text="BBB" BackgroundColor="Blue" TextColor="White"/>
</StackLayout>

</StackLayout>

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

<StackLayout Spacing="0">
    <Label Text="AAA" BackgroundColor="Red"/>
    <Label Text="BBB" BackgroundColor="Blue" TextColor="White"/>
</StackLayout>

</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を配置しています。そしてその二つの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
		}
	}
}

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>