StackLayout でビューを配置する

10 分

縦方向リストまたは横方向リストでビューを積み上げることは、ユーザーインターフェイスの一般的な設計です。アプリケーションのいくつかの一般的なページについて考えてみます。例として、サインイン、登録、設定のページが含まれます。通常、これらすべてのページには積み上げられたコンテンツが含まれます。このユニットでは、StackLayout と、最適化された StackLayout VerticalStackLayout および HorizontalStackLayout を使用して、ビューを縦方向または横方向のリストに配置する方法について説明します。

StackLayout、VerticalStackLayout、HorizontalStackLayout について

StackLayout は、子のビューを、左から右または上から下に整理するレイアウトコンテナーです。方向はその Orientation プロパティに基づいており、既定値は上から下です。以下には、縦方向の StackLayout の概念図が示されています。

画面の上部から下部に縦に積み重ねられた 4 つのブロックを示す図。

StackLayout には、その基底クラスである Layout<T> から継承される Children のリストがあります。リストにはビューが格納されます。これが役立つのは、.NET Multi-Platform App UI (MAUI) で扱うほとんどの UI 要素は View から派生するためです。レイアウトパネルも View から派生します。これは、必要に応じてパネルを入れ子にできることを意味します。
VerticalStackLayout と HorizontalStackLayout は、パフォーマンス用に最適化されているため、向きが変化しないことがわかっているときに使用することをお勧めするレイアウトです。

StackLayout にビューを追加する方法

.NET MAUI では、C# コードまたは Extensible Application Markup Language (XAML) で StackLayout にビューを追加できます。コードを使用して追加される 3 つのビューの例を以下に示します。

<StackLayout x:Name="stack">
</StackLayout>

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();

        var a = new BoxView { Color = Colors.Silver, HeightRequest = 40 };
        var b = new BoxView { Color = Colors.Blue, HeightRequest = 40 };
        var c = new BoxView { Color = Colors.Gray, HeightRequest = 40 };

        stack.Children.Add(a);
        stack.Children.Add(b);
        stack.Children.Add(c);
    }
}

ビューを Children コレクションに追加すると、StackLayout によって、縦方向リストでビューが自動的に位置指定されます。これが Android デバイスでどのように表示されるかを次に示します。

Android デバイスの画面の上部に 3 つのボックスが縦に積み重ねられているスクリーンショット。

XAML で同じことを行うには、StackLayout タグ内で子を入れ子にします。 XAML パーサーでは、Children コレクションに入れ子になったビューが自動的に追加されます。これは、すべてのレイアウトパネルで Children が ContentProperty であるためです。 XAML で StackLayout に追加される同じ 3 つのビューの例を以下に示します。

<StackLayout>
    <BoxView Color="Silver" HeightRequest="40" />
    <BoxView Color="Blue" HeightRequest="40" />
    <BoxView Color="Gray" HeightRequest="40" />
</StackLayout>

StackLayout でのビューの順序付け方法

Children コレクションのビューの順序によって、レンダリング時のレイアウトの順序が決まります。 XAML で追加されるビューの場合、テキストの順序が使用されます。コードで追加される子の場合、Add メソッドを呼び出したときの順序が、レイアウトの順序を決定します。

StackLayout でビュー間のスペースを変更する方法

StackLayout の子の間にある程度のスペースが必要になるのが一般的です。 StackLayout を使用すると、Spacing プロパティを使用してそれぞれの子の間のスペースを制御できます。既定値は 0 単位ですが、適切な外観になるように設定できます。 XAML で Spacing プロパティを 30 に設定する例を以下に示します。

<StackLayout Spacing="30">
    <BoxView Color="Silver" HeightRequest="40" />
    <BoxView Color="Blue" HeightRequest="40" />
    <BoxView Color="Gray" HeightRequest="40" />
</StackLayout>

次のスクリーンショットは、Android で UI がどのようにレンダリングされるかを示しています。

Android デバイス上で、それぞれの間に 30 の間隔で縦に並んだ 3 つのボックスを示すスクリーンショット。

StackLayout の方向を設定する方法

StackLayout では、列または行で子を配置することができます。この動作は、その Orientation プロパティを設定して制御します。ここまでは、縦方向の StackLayout のみを示してきました。

Vertical は既定値です。 Orientation を明示的に Vertical に設定するかどうかは、自由です。一部のプログラマは、コードをより自己文書化するために明示的に設定することを好みます。

XAML で Orientation を Horizontal に設定する例を以下に示します。

<StackLayout x:Name="stack" Orientation="Horizontal">
    <BoxView Color="Silver" WidthRequest="40"/>
    <BoxView Color="Blue" WidthRequest="40"/>
    <BoxView Color="Gray" WidthRequest="40"/>
</StackLayout>

Note

前の演習で説明したように、StackPanel の向きが変化すると、それぞれの BoxView の HeightRequest プロパティが無視されるようになります。代わりに、WidthRequest を設定します。次のスクリーンショットは、Android デバイスで UI がどのようにレンダリングされるかを示しています。

全画面を縦方向に伸ばし、3 つのボックスが左から右へ横に積まれているスクリーンショット。

StackLayout でビューの LayoutOptions を設定する

すべてのビューに、VerticalOptions および HorizontalOptions プロパティがあります。これらのプロパティを使用すると、レイアウトパネルによって提供される四角形の表示領域内で、ビューの位置を設定できます。

前述したように、StackLayout では、LayoutOptions プロパティの動作は StackLayout の Orientation プロパティによって異なります。 StackLayout では、その Orientation とは反対方向に LayoutOptions プロパティを使用します。既定では、スタックレイアウト内の要素には、スタックレイアウトの Orientation と同じ方向の追加領域は割り当てられません。この既定のケースで、その方向の位置を割り当てても、要素のレンダリングは変更されません。ただし、位置に拡張が組み合わされていると、レンダリングに変更があります。

拡張について

前のユニットの内容を思い出してください。LayoutOptions 構造体には、.NET MAUI では廃止された Expands という bool プロパティが含まれています。 VerticalOptions と HorizontalOptions を設定すると、StartAndExpand、CenterAndExpand、EndAndExpand、および FillAndExpand の LayoutOptions に気づくでしょう。これらの AndExpand オプションのいずれかを LayoutOptions に設定すると、そのオプションは無視され、LayoutOptions の最初の部分 (Start、Center、End、または Fill) が使用されます。 Xamarin.Forms から移行する場合は、これらのプロパティからすべての AndExpand を削除する必要があります。このモジュールの後半で Grid について学習するときに、同様の機能を実現する方法について説明します。

最適化された StackLayouts

前述したように、VerticalStackLayout と HorizontalStackLayout は、向きが定義済みの、最適化されている StackLayout コントロールです。最大限のレイアウトパフォーマンスを得るため、可能なときはこれらのコントロールを使用することをお勧めしました。これらのレイアウトには、通常の StackLayout 機能が備えている LayoutOptions と Spacing の機能があります。

<VerticalStackLayout Spacing="30">
    <BoxView Color="Silver" HeightRequest="40" />
    <BoxView Color="Blue" HeightRequest="40" />
    <BoxView Color="Gray" HeightRequest="40"/>
</VerticalStackLayout>

<HorizontalStackLayout Spacing="30">
    <BoxView Color="Silver" WidthRequest="40" />
    <BoxView Color="Blue" WidthRequest="40" />
    <BoxView Color="Gray" WidthRequest="40" />
</HorizontalStackLayout>