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

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

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>
Xamarin.Formsでスマホアプリ開発