Xamarin.Forms StackLayout
Ein StackLayout
organisiert untergeordnete Ansichten in einem eindimensionalen Stapel, horizontal oder vertikal. Standardmäßig ist ein StackLayout
vertikal ausgerichtet. Darüber hinaus kann ein StackLayout
übergeordnetes Layout verwendet werden, das andere untergeordnete Layouts enthält.
Die StackLayout
-Klasse definiert die folgenden Eigenschaften:
Orientation
, vom TypStackOrientation
, stellt die Richtung dar, in der untergeordnete Ansichten positioniert werden. Der Standardwert dieser Eigenschaft istVertical
.Spacing
, vom Typdouble
, gibt den Abstand zwischen jeder untergeordneten Ansicht an. Der Standardwert dieser Eigenschaft ist sechs geräteunabhängige Einheiten.
Diese Eigenschaften werden von BindableProperty
Objekten gesichert, was bedeutet, dass die Eigenschaften Ziele von Datenbindungen und Formatvorlagen sein können.
Die StackLayout
Klasse leitet sich von der Layout<T>
Klasse ab, die eine Children
Eigenschaft vom Typ IList<T>
definiert. Die Children
Eigenschaft ist die ContentProperty
Layout<T>
Klasse und muss daher nicht explizit aus XAML festgelegt werden.
Tipp
Um die bestmögliche Layoutleistung zu erhalten, befolgen Sie die Richtlinien bei der Optimierung der Layoutleistung.
Vertikale Ausrichtung
Im folgenden XAML-Code wird gezeigt, wie Sie eine vertikal ausgerichtete StackLayout
Ansicht erstellen, die unterschiedliche untergeordnete Ansichten enthält:
<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>
In diesem Beispiel wird ein vertikaler StackLayout
Inhalt Label
und BoxView
objekte erstellt. Standardmäßig gibt es sechs geräteunabhängige Einheiten zwischen den untergeordneten Ansichten:
Der entsprechende C#-Code lautet:
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 }
}
};
}
}
Hinweis
Der Wert der Margin
Eigenschaft stellt den Abstand zwischen einem Element und seinen angrenzenden Elementen dar. Weitere Informationen finden Sie unter Ränder und Abstände.
Horizontale Ausrichtung
Im folgenden XAML-Code wird gezeigt, wie Sie eine horizontal ausgerichtete StackLayout
Eigenschaft erstellen, indem Sie die Orientation
Eigenschaft auf 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>
In diesem Beispiel wird eine horizontale StackLayout
, die Objekte enthält BoxView
, mit sechs geräteunabhängigen Abstandseinheiten zwischen den untergeordneten Ansichten erstellt:
Der entsprechende C#-Code lautet:
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 }
}
};
}
Abstand zwischen untergeordneten Ansichten
Der Abstand zwischen untergeordneten Ansichten in einer StackLayout
kann geändert werden, indem die Spacing
Eigenschaft auf einen double
Wert festgelegt wird:
<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>
In diesem Beispiel wird ein vertikaler StackLayout
Inhalt Label
und BoxView
Objekte erstellt, die keinen Abstand zwischen ihnen haben:
Tipp
Die Spacing
Eigenschaft kann auf negative Werte festgelegt werden, um untergeordnete Ansichten überlappen zu lassen.
Der entsprechende C#-Code lautet:
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 }
}
};
}
}
Position und Größe von untergeordneten Ansichten
Die Größe und Position untergeordneter Ansichten in einem StackLayout
hängt von den Werten der untergeordneten Ansichten HeightRequest
und Eigenschaften und WidthRequest
den Werten ihrer HorizontalOptions
und VerticalOptions
eigenschaften ab. In einer vertikalen, untergeordneten StackLayout
Ansicht wird erweitert, um die verfügbare Breite auszufüllen, wenn ihre Größe nicht explizit festgelegt ist. Ebenso erweitern sich untergeordnete Ansichten in einer horizontalen StackLayout
Ansicht, um die verfügbare Höhe auszufüllen, wenn ihre Größe nicht explizit festgelegt ist.
Die HorizontalOptions
Eigenschaften VerticalOptions
eines StackLayout
und seiner untergeordneten Ansichten können auf Felder aus der LayoutOptions
Struktur festgelegt werden, die zwei Layouteinstellungen kapselt:
- Die Ausrichtung bestimmt die Position und Größe einer untergeordneten Ansicht innerhalb des übergeordneten Layouts.
- Erweiterung gibt an, ob die untergeordnete Ansicht zusätzlichen Speicherplatz verwenden soll, falls sie verfügbar ist.
Tipp
Legen Sie die HorizontalOptions
Eigenschaften VerticalOptions
und Eigenschaften einer StackLayout
nicht fest, es sei denn, Sie müssen. Die Standardwerte von LayoutOptions.Fill
und LayoutOptions.FillAndExpand
ermöglichen die beste Layoutoptimierung. Das Ändern dieser Eigenschaften hat eine Kosten und verbraucht Arbeitsspeicher, auch wenn sie auf die Standardwerte zurückgesetzt werden.
Ausrichtung
Im folgenden XAML-Beispiel werden Ausrichtungseinstellungen für jede untergeordnete Ansicht in der 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>
In diesem Beispiel werden Ausrichtungseinstellungen für die Label
Objekte festgelegt, um ihre Position innerhalb der StackLayout
. Die Start
Felder Center
, , End
und Fill
Felder werden verwendet, um die Ausrichtung der Label
Objekte innerhalb des übergeordneten StackLayout
Elements zu definieren:
Eine StackLayout
-Klasse respektiert ausschließlich die Ausrichtungseinstellungen für Ansichten untergeordneter Elemente, die sich in entgegengesetzter Richtung zur StackLayout
-Ausrichtung befinden. Deshalb legen die Ansichten der untergeordneten Label
-Klasse innerhalb einer vertikal ausgerichteten StackLayout
-Klasse ihre HorizontalOptions
-Eigenschaften auf eines der Ausrichtungsfelder fest:
Start
, die aufLabel
der linken Seite derStackLayout
.- Feld
Center
, das dieLabel
-Klasse in der Mitte derStackLayout
-Klasse positioniert End
, die aufLabel
der rechten Seite derStackLayout
.- Feld
Fill
, das sicherstellt, dass dieLabel
-Klasse die gesamte Breite derStackLayout
-Klasse ausfüllt
Der entsprechende C#-Code lautet:
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 }
}
};
}
}
Erweiterung
Im folgenden XAML-Beispiel werden die Erweiterungseinstellungen für die einzelnen Label
Elemente im StackLayout
Folgenden festgelegt:
<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>
In diesem Beispiel werden Die Erweiterungseinstellungen für die Label
Objekte festgelegt, um die Größe innerhalb des StackLayout
Objekts zu steuern. Die StartAndExpand
Felder CenterAndExpand
, , EndAndExpand
und FillAndExpand
Felder werden verwendet, um die Ausrichtungseinstellung zu definieren, und ob der Label
Platz mehr Platz belegt, falls verfügbar innerhalb des übergeordneten StackLayout
Elements :
Eine StackLayout
-Klasse kann Ansichten untergeordneter Elemente nur in die Orientierungsrichtung erweitern. Deshalb kann die vertikal ausgerichtete StackLayout
-Klasse die Ansichten untergeordneter Label
-Klassen erweitern, die ihre VerticalOptions
-Eigenschaften auf eines der Erweiterungsfelder festgelegt haben. Das bedeutet, dass jede Label
-Klasse für die vertikale Ausrichtung den gleichen Platz innerhalb der StackLayout
-Klasse belegt. Allerdings hat nur die letzte Label
-Klasse, die ihre VerticalOptions
-Eigenschaft auf FillAndExpand
festlegt, eine andere Größe.
Tipp
Stellen Sie bei Verwendung eines , sicher, dass nur eine StackLayout
untergeordnete Ansicht auf LayoutOptions.Expands
" festgelegt ist. Mit dieser Eigenschaft wird sichergestellt, dass das angegebene untergeordnete Element den größten Bereich belegt, der im StackLayout
verfügbar ist. Zudem ist es Vergeudung, diese Berechnungen mehrmals durchzuführen.
Der entsprechende C#-Code lautet:
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 }
}
};
}
Wichtig
Wenn der gesamte Platz in einer StackLayout
-Klasse belegt ist, haben Einstellungen für die Erweiterung keine Auswirkungen.
Weitere Informationen zur Ausrichtung und Erweiterung finden Sie unter Layoutoptionen in Xamarin.Forms.
Geschachtelte StackLayout-Objekte
Eine StackLayout
kann als übergeordnetes Layout verwendet werden, das geschachtelte untergeordnete StackLayout
Objekte oder andere untergeordnete Layouts enthält.
Der folgende XAML-Code zeigt ein Beispiel für verschachtelte StackLayout
Objekte:
<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>
In diesem Beispiel enthält das übergeordnete StackLayout
Objekt geschachtelte StackLayout
Objekte innerhalb von Frame
Objekten. Das übergeordnete StackLayout
Objekt wird vertikal ausgerichtet, während die untergeordneten StackLayout
Objekte horizontal ausgerichtet sind:
Wichtig
Je tiefer Sie Objekte und andere Layouts verschachteln, desto mehr wirkt sich das geschachtelte StackLayout
Layout auf die Leistung aus. Weitere Informationen finden Sie unter "Auswählen des richtigen Layouts".
Der entsprechende C#-Code lautet:
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 }
}
}
},
// ...
}
};
}
}