垂直スタックレイアウト

.NET マルチプラットフォーム アプリ UI (.NET MAUI) VerticalStackLayout は、子ビューを 1 次元の垂直スタックに整理し、 StackLayoutに代わるパフォーマンスを高めます。 さらに、 VerticalStackLayout は、他の子レイアウトを含む親レイアウトとして使用できます。

VerticalStackLayoutでは、次のプロパティを定義します。

• Spacingは、 double型で、各子ビュー間の領域の量を示します。 このプロパティの既定値は 0 です。

このプロパティは、 BindableProperty オブジェクトによってサポートされます。つまり、データ バインディングのターゲットとしてスタイルを設定できます。

次の XAML は、異なる子ビューを含む VerticalStackLayout を作成する方法を示しています。

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.VerticalStackLayoutPage">
    <VerticalStackLayout Margin="20">
        <Label Text="Primary colors" />
        <Rectangle Fill="Red"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Rectangle Fill="Yellow"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Rectangle Fill="Blue"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Label Text="Secondary colors" />
        <Rectangle Fill="Green"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Rectangle Fill="Orange"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Rectangle Fill="Purple"
                   HeightRequest="30"
                   WidthRequest="300" />
    </VerticalStackLayout>
</ContentPage>

次の使用例は、VerticalStackLayoutオブジェクトとLabel オブジェクトを含むRectangleを作成します。 既定では、子ビュー間にスペースはありません。

子ビュー間の空間

VerticalStackLayout内の子ビュー間の間隔は、Spacing プロパティをdouble値に設定することで変更できます。

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.VerticalStackLayoutPage">
    <VerticalStackLayout Margin="20"
                         Spacing="10">
        <Label Text="Primary colors" />
        <Rectangle Fill="Red"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Rectangle Fill="Yellow"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Rectangle Fill="Blue"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Label Text="Secondary colors" />
        <Rectangle Fill="Green"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Rectangle Fill="Orange"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Rectangle Fill="Purple"
                   HeightRequest="30"
                   WidthRequest="300" />
    </VerticalStackLayout>
</ContentPage>

この例では、子ビュー間に 10 個のデバイスに依存しない領域を持つVerticalStackLayoutオブジェクトとLabel オブジェクトを含むRectangleを作成します。

子ビューの位置とサイズ設定

VerticalStackLayout内の子ビューのサイズと位置は、子ビューのHeightRequestプロパティとWidthRequestプロパティの値、および子ビューのHorizontalOptionsプロパティの値によって異なります。 VerticalStackLayoutでは、子ビューは、サイズが明示的に設定されていない場合に使用可能な幅に合わせて展開されます。

HorizontalOptionsとその子ビューのVerticalStackLayoutプロパティは、LayoutOptionsレイアウトの基本設定をカプセル化する構造体のフィールドに設定できます。 このレイアウト設定は、親レイアウト内の子ビューの位置とサイズを決定します。

次の XAML の例では、 VerticalStackLayoutの各子ビューに配置設定を設定します。

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.VerticalStackLayoutPage">
    <VerticalStackLayout Margin="20"
                         Spacing="6">
        <Label Text="Start"
               BackgroundColor="Gray"
               HorizontalOptions="Start" />
        <Label Text="Center"
               BackgroundColor="Gray"
               HorizontalOptions="Center" />
        <Label Text="End"
               BackgroundColor="Gray"
               HorizontalOptions="End" />
        <Label Text="Fill"
               BackgroundColor="Gray"
               HorizontalOptions="Fill" />
    </VerticalStackLayout>
</ContentPage>

この例では、Label内での位置を制御するために、VerticalStackLayout オブジェクトに配置設定を設定します。 Start、Center、End、およびFillの各フィールドを使用して、親Label内のVerticalStackLayout オブジェクトの配置を定義します。

VerticalStackLayoutでは、レイアウトの向きとは反対の方向にある子ビューの配置設定のみが考慮されます。 そのため、Label内のVerticalStackLayout子ビューは、HorizontalOptions プロパティを次のいずれかの配置フィールドに設定します。

• Startは、Labelの左側にVerticalStackLayoutを配置します。
• Centerは、Label内のVerticalStackLayoutを中央に表示します。
• End: Label を VerticalStackLayoutの右側に配置します。
• Fillは、 Label が VerticalStackLayoutの幅を埋めるようにします。

VerticalStackLayout オブジェクトを入れ子にする

VerticalStackLayoutは、他の入れ子になった子レイアウトを含む親レイアウトとして使用できます。

次の XAML は、VerticalStackLayout内にHorizontalStackLayoutオブジェクトを入れ子にする例を示しています。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.VerticalStackLayoutPage">
    <VerticalStackLayout Margin="20"
                         Spacing="6">
       <Label Text="Primary colors" />
       <Border Stroke="Black"
               Padding="5">
           <HorizontalStackLayout Spacing="15">
               <Rectangle Fill="Red"
                          HeightRequest="30"
                          WidthRequest="30" />
               <Label Text="Red"
                      FontSize="18" />
           </HorizontalStackLayout>
       </Border>
       <Border Stroke="Black"
               Padding="5">
           <HorizontalStackLayout Spacing="15">
               <Rectangle Fill="Yellow"
                          HeightRequest="30"
                          WidthRequest="30" />
               <Label Text="Yellow"
                      FontSize="18" />
           </HorizontalStackLayout>
       </Border>
       <Border Stroke="Black"
               Padding="5">
           <HorizontalStackLayout Spacing="15">
               <Rectangle Fill="Blue"
                          HeightRequest="30"
                          WidthRequest="30" />
               <Label Text="Blue"
                      FontSize="18" />
           </HorizontalStackLayout>
       </Border>
    </VerticalStackLayout>
</ContentPage>

この例では、親VerticalStackLayoutがBorderオブジェクトを含み、さらにそのBorderオブジェクト内にHorizontalStackLayoutオブジェクトが入れ子になっています。