Xamarin.Forms StackLayout

Das Beispiel herunterladen

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 Typ StackOrientation, stellt die Richtung dar, in der untergeordnete Ansichten positioniert werden. Der Standardwert dieser Eigenschaft ist Vertical.
• Spacing, vom Typ double, 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 ContentPropertyLayout<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 StackLayoutAnsicht 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 StackLayoutAnsicht, um die verfügbare Höhe auszufüllen, wenn ihre Größe nicht explizit festgelegt ist.

Die HorizontalOptions Eigenschaften VerticalOptions eines StackLayoutund 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 StartFelder Center, , Endund Fill Felder werden verwendet, um die Ausrichtung der Label Objekte innerhalb des übergeordneten StackLayoutElements 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 auf Label der linken Seite der StackLayout.
• Feld Center, das die Label-Klasse in der Mitte der StackLayout-Klasse positioniert
• End, die auf Label der rechten Seite der StackLayout.
• Feld Fill, das sicherstellt, dass die Label-Klasse die gesamte Breite der StackLayout-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 StackLayoutFolgenden 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 StackLayoutObjekts zu steuern. Die StartAndExpandFelder CenterAndExpand, , EndAndExpandund FillAndExpand Felder werden verwendet, um die Ausrichtungseinstellung zu definieren, und ob der Label Platz mehr Platz belegt, falls verfügbar innerhalb des übergeordneten StackLayoutElements :

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 StackLayoutuntergeordnete 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 }
                        }
                    }
                },
                // ...
            }
        };
    }
}

Verwandte Links

• StackLayout-Demos (Beispiel)
• Layoutoptionen in Xamarin.Forms
• Auswählen eines Layouts Xamarin.Forms
• Verbessern der Xamarin.Forms App-Leistung