Xamarin.Forms StackLayout
は StackLayout
、1 次元スタック内の子ビューを水平方向または垂直方向に整理します。 既定では、StackLayout
は垂直方向に配置されます。 さらに、 StackLayout
は、他の子レイアウトを含む親レイアウトとして使用できます。
StackLayout
クラスでは、次のプロパティが定義されます。
Orientation
型StackOrientation
の は、子ビューが配置される方向を表します。 このプロパティの既定値はVertical
です。Spacing
型double
の は、各子ビュー間の領域の量を示します。 このプロパティの既定値は、デバイスに依存しない 6 つの単位です。
これらのプロパティはオブジェクトによって BindableProperty
サポートされます。つまり、プロパティはデータ バインディングのターゲットにしてスタイルを設定できます。
クラスは StackLayout
、 型のプロパティを Layout<T>
定義 Children
する クラスから派生します IList<T>
。 プロパティは Children
ContentProperty
クラスの 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 つの単位の領域があります。
これに相当する 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
を作成する方法をOrientation
Horizontal
示しています。
<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
の格納オブジェクトを作成します。
これに相当する 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
間隔は、 プロパティを値にSpacing
double
設定することで変更できます。
<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
オブジェクトの間にスペースがない垂直方向StackLayout
の Label
を作成します。
ヒント
プロパティを負の 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.Fill
と LayoutOptions.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
制御します。 、Start
Center
、End
、および Fill
フィールドは、親 StackLayout
内のオブジェクトの配置をLabel
定義するために使用されます。
StackLayout
は、StackLayout
の方向とは反対方向にある子ビューの配置設定のみに従います。 したがって、垂直方向の StackLayout
内の Label
子ビューは、それらの HorizontalOptions
プロパティを次の配置フィールドの 1 つに設定します。
Start
の左側に を配置Label
しますStackLayout
。Center
。これはLabel
をStackLayout
の中央に配置します。End
の右側に を配置Label
しますStackLayout
。Fill
。これにより、Label
によってStackLayout
の幅が埋まるようになります。
これに相当する 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
制御します。 、StartAndExpand
CenterAndExpand
、EndAndExpand
、および FillAndExpand
の各フィールドを使用して、配置設定を定義し、 が親 StackLayout
内で使用可能な場合により多くの領域を占有するかどうかをLabel
定義します。
StackLayout
は子ビューをその方向にのみ展開できます。 したがって、垂直方向の StackLayout
は、VerticalOptions
プロパティをいずれかの展開フィールドに設定する Label
子ビューを展開できます。 つまり、垂直方向の配置では、各 Label
が StackLayout
内で同じ量のスペースを占有します。 ただし、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
になったレイアウトが多いほどパフォーマンスに影響します。 詳細については、「 正しいレイアウトを選択する」を参照してください。
これに相当する 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 }
}
}
},
// ...
}
};
}
}