Xamarin.Forms StackLayout

サンプルのダウンロードサンプルのダウンロード

Xamarin.Forms StackLayout

StackLayout 、1 次元スタック内の子ビューを水平方向または垂直方向に整理します。 既定では、StackLayout は垂直方向に配置されます。 さらに、 StackLayout は、他の子レイアウトを含む親レイアウトとして使用できます。

StackLayout クラスでは、次のプロパティが定義されます。

  • OrientationStackOrientationの は、子ビューが配置される方向を表します。 このプロパティの既定値は Vertical です。
  • Spacingdoubleの は、各子ビュー間の領域の量を示します。 このプロパティの既定値は、デバイスに依存しない 6 つの単位です。

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

クラスは StackLayout 、 型のプロパティを Layout<T> 定義 Children する クラスから派生します IList<T>。 プロパティは ChildrenContentProperty クラスの Layout<T> であるため、XAML から明示的に設定する必要はありません。

ヒント

可能な限り最適なレイアウトパフォーマンスを得るには、「レイアウトパフォーマンスを 最適化する」のガイドラインに従ってください。

垂直方向

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

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.VerticalStackLayoutPage"
             Title="Vertical StackLayout demo">
    <StackLayout Margin="20">
        <Label Text="Primary colors" />
        <BoxView Color="Red" />
        <BoxView Color="Yellow" />
        <BoxView Color="Blue" />
        <Label Text="Secondary colors" />
        <BoxView Color="Green" />
        <BoxView Color="Orange" />
        <BoxView Color="Purple" />
    </StackLayout>
</ContentPage>

この例では、 オブジェクトと BoxView オブジェクトを含む垂直StackLayoutオブジェクトをLabel作成します。 既定では、子ビューの間には、デバイスに依存しない 6 つの単位の領域があります。

垂直指向 StackLayout のスクリーンショット

これに相当する C# コードを次に示します。

public class VerticalStackLayoutPageCS : ContentPage
{
    public VerticalStackLayoutPageCS()
    {
        Title = "Vertical StackLayout demo";
        Content = new StackLayout
        {
            Margin = new Thickness(20),
            Children =
            {
                new Label { Text = "Primary colors" },
                new BoxView { Color = Color.Red },
                new BoxView { Color = Color.Yellow },
                new BoxView { Color = Color.Blue },
                new Label { Text = "Secondary colors" },
                new BoxView { Color = Color.Green },
                new BoxView { Color = Color.Orange },
                new BoxView { Color = Color.Purple }
            }
        };
    }
}

注意

プロパティの値は、 Margin 要素とその隣接する要素間の距離を表します。 詳細については「Margin and Padding」 (余白とスペース) を参照してください。

水平方向

次の XAML は、そのプロパティを に設定して水平方向の方向StackLayoutを作成する方法をOrientationHorizontal示しています。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.HorizontalStackLayoutPage"
             Title="Horizontal StackLayout demo">
    <StackLayout Margin="20"
                 Orientation="Horizontal"
                 HorizontalOptions="Center">
        <BoxView Color="Red" />
        <BoxView Color="Yellow" />
        <BoxView Color="Blue" />
        <BoxView Color="Green" />
        <BoxView Color="Orange" />
        <BoxView Color="Purple" />
    </StackLayout>
</ContentPage>

この例では、子ビューの間に BoxView 6 つのデバイスに依存しない領域を持つ、水平方向StackLayoutの格納オブジェクトを作成します。

水平方向の StackLayoutスクリーンショット

これに相当する C# コードを次に示します。

public HorizontalStackLayoutPageCS()
{
    Title = "Horizontal StackLayout demo";
    Content = new StackLayout
    {
        Margin = new Thickness(20),
        Orientation = StackOrientation.Horizontal,
        HorizontalOptions = LayoutOptions.Center,
        Children =
        {
            new BoxView { Color = Color.Red },
            new BoxView { Color = Color.Yellow },
            new BoxView { Color = Color.Blue },
            new BoxView { Color = Color.Green },
            new BoxView { Color = Color.Orange },
            new BoxView { Color = Color.Purple }
        }
    };
}

子ビュー間のスペース

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

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.StackLayoutSpacingPage"
             Title="StackLayout Spacing demo">
    <StackLayout Margin="20"
                 Spacing="0">
        <Label Text="Primary colors" />
        <BoxView Color="Red" />
        <BoxView Color="Yellow" />
        <BoxView Color="Blue" />
        <Label Text="Secondary colors" />
        <BoxView Color="Green" />
        <BoxView Color="Orange" />
        <BoxView Color="Purple" />
    </StackLayout>
</ContentPage>

次の使用例は、 オブジェクトと BoxView オブジェクトの間にスペースがない垂直方向StackLayoutLabel を作成します。

のない StackLayout のスクリーンショット間隔

ヒント

プロパティを負の Spacing 値に設定して、子ビューを重ねることができます。

これに相当する C# コードを次に示します。

public class StackLayoutSpacingPageCS : ContentPage
{
    public StackLayoutSpacingPageCS()
    {
        Title = "StackLayout Spacing demo";
        Content = new StackLayout
        {
            Margin = new Thickness(20),
            Spacing = 0,
            Children =
            {
                new Label { Text = "Primary colors" },
                new BoxView { Color = Color.Red },
                new BoxView { Color = Color.Yellow },
                new BoxView { Color = Color.Blue },
                new Label { Text = "Secondary colors" },
                new BoxView { Color = Color.Green },
                new BoxView { Color = Color.Orange },
                new BoxView { Color = Color.Purple }
            }
        };
    }
}

子ビューの位置とサイズ

StackLayout の子ビューのサイズと位置は、子ビュー HeightRequest とプロパティの値と WidthRequest 、その HorizontalOptions 値と VerticalOptions プロパティの値によって異なります。 垂直方向 StackLayoutでは、子ビューが展開され、サイズが明示的に設定されていない場合に使用可能な幅が塗りつぶされます。 同様に、水平方向 StackLayoutの では、子ビューは、サイズが明示的に設定されていない場合に使用可能な高さを満たすように拡張されます。

、およびその子ビューの StackLayoutプロパティと VerticalOptions プロパティはHorizontalOptions、 構造体のLayoutOptionsフィールドに設定できます。これは、次の 2 つのレイアウト設定をカプセル化します。

  • 配置 は、親レイアウト内の子ビューの位置とサイズを決定します。
  • 拡張 は、子ビューで余分な領域を使用する必要があるかどうかを示します (使用可能な場合)。

ヒント

必要な場合を除き、 HorizontalOptions の プロパティと VerticalOptions プロパティを StackLayout 設定しないでください。 既定値の LayoutOptions.FillLayoutOptions.FillAndExpand で、レイアウトの最適化が最大になります。 これらのプロパティを変更するとコストがかかり、既定値に戻す場合でもメモリが消費されます。

Alignment

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

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.AlignmentPage"
             Title="Alignment demo">
    <StackLayout Margin="20">
        <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" />
    </StackLayout>
</ContentPage>

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

設定された StackLayout のスクリーンショット配置

StackLayout は、StackLayout の方向とは反対方向にある子ビューの配置設定のみに従います。 したがって、垂直方向の StackLayout 内の Label 子ビューは、それらの HorizontalOptions プロパティを次の配置フィールドの 1 つに設定します。

これに相当する C# コードを次に示します。

public class AlignmentPageCS : ContentPage
{
    public AlignmentPageCS()
    {
        Title = "Alignment demo";
        Content = new StackLayout
        {
            Margin = new Thickness(20),
            Children =
            {
                new Label { Text = "Start", BackgroundColor = Color.Gray, HorizontalOptions = LayoutOptions.Start },
                new Label { Text = "Center", BackgroundColor = Color.Gray, HorizontalOptions = LayoutOptions.Center },
                new Label { Text = "End", BackgroundColor = Color.Gray, HorizontalOptions = LayoutOptions.End },
                new Label { Text = "Fill", BackgroundColor = Color.Gray, HorizontalOptions = LayoutOptions.Fill }
            }
        };
    }
}

正規の表記

次の XAML の例では、 の各 Label に展開設定を設定します StackLayout

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.ExpansionPage"
             Title="Expansion demo">
    <StackLayout Margin="20">
        <BoxView BackgroundColor="Red"
                 HeightRequest="1" />
        <Label Text="Start"
               BackgroundColor="Gray"
               VerticalOptions="StartAndExpand" />
        <BoxView BackgroundColor="Red"
                 HeightRequest="1" />
        <Label Text="Center"
               BackgroundColor="Gray"
               VerticalOptions="CenterAndExpand" />
        <BoxView BackgroundColor="Red"
                 HeightRequest="1" />
        <Label Text="End"
               BackgroundColor="Gray"
               VerticalOptions="EndAndExpand" />
        <BoxView BackgroundColor="Red"
                 HeightRequest="1" />
        <Label Text="Fill"
               BackgroundColor="Gray"
               VerticalOptions="FillAndExpand" />
        <BoxView BackgroundColor="Red"
                 HeightRequest="1" />
    </StackLayout>
</ContentPage>

この例では、 オブジェクトに拡張設定を設定して、 Label 内のサイズを StackLayout制御します。 、StartAndExpandCenterAndExpandEndAndExpand、および FillAndExpand の各フィールドを使用して、配置設定を定義し、 が親 StackLayout内で使用可能な場合により多くの領域を占有するかどうかをLabel定義します。

拡張オプションが設定された StackLayout のスクリーンショット展開

StackLayout は子ビューをその方向にのみ展開できます。 したがって、垂直方向の StackLayout は、VerticalOptions プロパティをいずれかの展開フィールドに設定する Label 子ビューを展開できます。 つまり、垂直方向の配置では、各 LabelStackLayout 内で同じ量のスペースを占有します。 ただし、VerticalOptions プロパティを FillAndExpand に設定する最後の Label のみ、サイズが異なります。

ヒント

を使用する場合は StackLayout、1 つの子ビューのみが に設定されていることを確認します LayoutOptions.Expands。 このプロパティにより、指定された子は、StackLayout がそれに与えられる最大の領域を占有します。このような計算を複数回実行することは無駄です。

これに相当する C# コードを次に示します。

public ExpansionPageCS()
{
    Title = "Expansion demo";
    Content = new StackLayout
    {
        Margin = new Thickness(20),
        Children =
        {
            new BoxView { BackgroundColor = Color.Red, HeightRequest = 1 },
            new Label { Text = "StartAndExpand", BackgroundColor = Color.Gray, VerticalOptions = LayoutOptions.StartAndExpand },
            new BoxView { BackgroundColor = Color.Red, HeightRequest = 1 },
            new Label { Text = "CenterAndExpand", BackgroundColor = Color.Gray, VerticalOptions = LayoutOptions.CenterAndExpand },
            new BoxView { BackgroundColor = Color.Red, HeightRequest = 1 },
            new Label { Text = "EndAndExpand", BackgroundColor = Color.Gray, VerticalOptions = LayoutOptions.EndAndExpand },
            new BoxView { BackgroundColor = Color.Red, HeightRequest = 1 },
            new Label { Text = "FillAndExpand", BackgroundColor = Color.Gray, VerticalOptions = LayoutOptions.FillAndExpand },
            new BoxView { BackgroundColor = Color.Red, HeightRequest = 1 }
        }
    };
}

重要

StackLayout 内のすべてのスペースが使用されている場合、展開設定は無効になります。

配置と展開の詳細については、「Xamarin.Forms のレイアウト オプション」を参照してください。

入れ子になった StackLayout オブジェクト

StackLayout 、入れ子になった子オブジェクトまたはその他の子 StackLayout レイアウトを含む親レイアウトとして使用できます。

次の XAML は、オブジェクトの入れ子の例を StackLayout 示しています。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.CombinedStackLayoutPage"
             Title="Combined StackLayouts demo">
    <StackLayout Margin="20">
        ...
        <Frame BorderColor="Black"
               Padding="5">
            <StackLayout Orientation="Horizontal"
                         Spacing="15">
                <BoxView Color="Red" />
                <Label Text="Red"
                       FontSize="Large"
                       VerticalOptions="Center" />
            </StackLayout>
        </Frame>
        <Frame BorderColor="Black"
               Padding="5">
            <StackLayout Orientation="Horizontal"
                         Spacing="15">
                <BoxView Color="Yellow" />
                <Label Text="Yellow"
                       FontSize="Large"
                       VerticalOptions="Center" />
            </StackLayout>
        </Frame>
        <Frame BorderColor="Black"
               Padding="5">
            <StackLayout Orientation="Horizontal"
                         Spacing="15">
                <BoxView Color="Blue" />
                <Label Text="Blue"
                       FontSize="Large"
                       VerticalOptions="Center" />
            </StackLayout>
        </Frame>
        ...
    </StackLayout>
</ContentPage>

この例では、親StackLayoutには オブジェクト内Frameに入れ子になったオブジェクトがStackLayout含まれています。 親 StackLayout は垂直方向に向けられますが、子 StackLayout オブジェクトは水平方向に向けられます。

入れ子になった StackLayout オブジェクトスクリーンショット

重要

オブジェクトやその他のレイアウトを入れ子にすると、入れ子 StackLayout になったレイアウトが多いほどパフォーマンスに影響します。 詳細については、「 正しいレイアウトを選択する」を参照してください。

これに相当する C# コードを次に示します。

public class CombinedStackLayoutPageCS : ContentPage
{
    public CombinedStackLayoutPageCS()
    {
        Title = "Combined StackLayouts demo";
        Content = new StackLayout
        {
            Margin = new Thickness(20),
            Children =
            {
                new Label { Text = "Primary colors" },
                new Frame
                {
                    BorderColor = Color.Black,
                    Padding = new Thickness(5),
                    Content = new StackLayout
                    {
                        Orientation = StackOrientation.Horizontal,
                        Spacing = 15,
                        Children =
                        {
                            new BoxView { Color = Color.Red },
                            new Label { Text = "Red", FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)), VerticalOptions = LayoutOptions.Center }
                        }
                    }
                },
                new Frame
                {
                    BorderColor = Color.Black,
                    Padding = new Thickness(5),
                    Content = new StackLayout
                    {
                        Orientation = StackOrientation.Horizontal,
                        Spacing = 15,
                        Children =
                        {
                            new BoxView { Color = Color.Yellow },
                            new Label { Text = "Yellow", FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)), VerticalOptions = LayoutOptions.Center }
                        }
                    }
                },
                new Frame
                {
                    BorderColor = Color.Black,
                    Padding = new Thickness(5),
                    Content = new StackLayout
                    {
                        Orientation = StackOrientation.Horizontal,
                        Spacing = 15,
                        Children =
                        {
                            new BoxView { Color = Color.Blue },
                            new Label { Text = "Blue", FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)), VerticalOptions = LayoutOptions.Center }
                        }
                    }
                },
                // ...
            }
        };
    }
}