StackLayout でビューを配置する

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

StackLayout、VerticalStackLayout、HorizontalStackLayout について

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

• StackLayout には、その基底クラスである Children から継承される Layout<T> のリストがあります。 リストにはビューが格納されます。これが役立つのは、.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 デバイスでどのように表示されるかを次に示します。

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 がどのようにレンダリングされるかを示しています。

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>

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

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

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

拡張について

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

最適化された StackLayouts

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

<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>