Xamarin.FormsStackLayout StackLayout

Beispiel herunterladen Das Beispiel herunterladenDownload Sample Download the sample

Xamarin.FormsStackLayoutXamarin.Forms StackLayout

Ein StackLayout organisiert untergeordnete Sichten in einem eindimensionalen Stapel, entweder horizontal oder vertikal.A StackLayout organizes child views in a one-dimensional stack, either horizontally or vertically. Standardmäßig wird ein StackLayout vertikal ausgerichtet.By default, a StackLayout is oriented vertically. Außerdem StackLayout kann ein als übergeordnetes Layout verwendet werden, das andere untergeordnete Layouts enthält.In addition, a StackLayout can be used as a parent layout that contains other child layouts.

Die- StackLayout Klasse definiert die folgenden Eigenschaften:The StackLayout class defines the following properties:

  • Orientationstellt vom Typ StackOrientation die Richtung dar, in der untergeordnete Ansichten positioniert werden.Orientation, of type StackOrientation, represents the direction in which child views are positioned. Der Standardwert dieser Eigenschaft ist Vertical.The default value of this property is Vertical.
  • Spacingdoublegibt den Umfang des Speicherplatzes zwischen jeder untergeordneten Ansicht des Typs an.Spacing, of type double, indicates the amount of space between each child view. Der Standardwert dieser Eigenschaft ist sechs geräteunabhängige Einheiten.The default value of this property is six device-independent units.

Diese Eigenschaften werden von- BindableProperty Objekten unterstützt. Dies bedeutet, dass die Eigenschaften Ziele von Daten Bindungen und formatierten sein können.These properties are backed by BindableProperty objects, which means that the properties can be targets of data bindings and styled.

Die- StackLayout Klasse wird von der- Layout<T> Klasse abgeleitet, die eine Children Eigenschaft vom Typ definiert IList<T> .The StackLayout class derives from the Layout<T> class, which defines a Children property of type IList<T>. Die Children -Eigenschaft ist der der ContentProperty Layout<T> -Klasse und muss daher nicht explizit aus XAML festgelegt werden.The Children property is the ContentProperty of the Layout<T> class, and therefore does not need to be explicitly set from XAML.

Tipp

Um die bestmögliche layoutleistung zu erzielen, befolgen Sie die Richtlinien unter Optimieren der layoutleistung.To obtain the best possible layout performance, follow the guidelines at Optimize layout performance.

Vertikale AusrichtungVertical orientation

Der folgende XAML-Code zeigt, wie ein vertikal orientierter erstellt wird StackLayout , der verschiedene untergeordnete Sichten enthält:The following XAML shows how to create a vertically oriented StackLayout that contains different child views:

<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 werden ein vertikales StackLayout mit Label -und- BoxView Objekten erstelltThis example creates a vertical StackLayout containing Label and BoxView objects. Standardmäßig gibt es sechs geräteunabhängige Speichereinheiten zwischen den untergeordneten Ansichten:By default, there are six device-independent units of space between the child views:

Screenshot eines vertikal ausgerichteten StacklayoutScreenshot of a vertically oriented StackLayout

Der entsprechende C#-Code lautet:The equivalent C# code is:

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.The value of the Margin property represents the distance between an element and its adjacent elements. Weitere Informationen finden Sie unter Ränder und Abstände.For more information, see Margin and Padding.

Horizontale AusrichtungHorizontal orientation

Der folgende XAML-Code zeigt, wie Sie einen horizontal ausgerichteten erstellen StackLayout , indem Sie seine- Orientation Eigenschaft auf festlegen Horizontal :The following XAML shows how to create a horizontally oriented StackLayout by setting its Orientation property to 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 ein horizontales StackLayout enthaltende- BoxView Objekt mit sechs geräteunabhängigen Speichereinheiten zwischen den untergeordneten Sichten erstellt:This example creates a horizontal StackLayout containing BoxView objects, with six device-independent units of space between the child views:

Screenshot eines horizontal ausgerichteten StacklayoutScreenshot of a horizontally oriented StackLayout

Der entsprechende C#-Code lautet:The equivalent C# code is:

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 }
        }
    };
}

Leerraum zwischen untergeordneten AnsichtenSpace between child views

Der Abstand zwischen untergeordneten Sichten in einer StackLayout kann geändert werden, indem die- Spacing Eigenschaft auf einen Wert festgelegt wird double :The spacing between child views in a StackLayout can be changed by setting the Spacing property to a double value:

<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 werden eine vertikale StackLayout mit Label -und- BoxView Objekten erstellt, die keinen Abstand zwischen Ihnen aufweisen:This example creates a vertical StackLayout containing Label and BoxView objects that have no spacing between them:

Screenshot eines Stacklayout ohne AbständeScreenshot of a StackLayout without any spacing

Tipp

Die- Spacing Eigenschaft kann auf negative Werte festgelegt werden, um die untergeordneten Sichten zu überlappen.The Spacing property can be set to negative values to make child views overlap.

Der entsprechende C#-Code lautet:The equivalent C# code is:

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 AnsichtenPosition and size of child views

Die Größe und Position von untergeordneten Sichten innerhalb von StackLayout hängt von den Werten der Eigenschaften und der untergeordneten Sichten HeightRequest WidthRequest und den Werten ihrer HorizontalOptions -und-Eigenschaften ab VerticalOptions .The size and position of child views within a StackLayout depends upon the values of the child views' HeightRequest and WidthRequest properties, and the values of their HorizontalOptions and VerticalOptions properties. In vertikaler StackLayout Sicht werden untergeordnete Sichten erweitert, um die verfügbare Breite auszufüllen, wenn ihre Größe nicht explizit festgelegt ist.In a vertical StackLayout, child views expand to fill the available width when their size isn't explicitly set. Entsprechend wird in horizontalen StackLayout untergeordneten Sichten erweitert, um die verfügbare Höhe auszufüllen, wenn ihre Größe nicht explizit festgelegt ist.Similarly, in a horizontal StackLayout, child views expand to fill the available height when their size isn't explicitly set.

Die HorizontalOptions -Eigenschaft und die-Eigenschaft VerticalOptions von StackLayout und deren untergeordneten Ansichten können auf Felder aus der-Struktur festgelegt werden LayoutOptions , die zwei Layouteinstellungen kapselt:The HorizontalOptions and VerticalOptions properties of a StackLayout, and its child views, can be set to fields from the LayoutOptions struct, which encapsulates two layout preferences:

  • Die Ausrichtung bestimmt die Position und Größe einer untergeordneten Ansicht innerhalb des übergeordneten Layouts.Alignment determines the position and size of a child view within its parent layout.
  • Erweiterung gibt an, ob die untergeordnete Ansicht zusätzlichen Speicherplatz verwenden soll, wenn Sie verfügbar ist.Expansion indicates if the child view should use extra space, if it's available.

Tipp

Legen Sie die HorizontalOptions -Eigenschaft und die-Eigenschaft VerticalOptions von nur StackLayout dann fest, wenn dies erforderlich istDon't set the HorizontalOptions and VerticalOptions properties of a StackLayout unless you need to. Die Standardwerte von LayoutOptions.Fill und LayoutOptions.FillAndExpand ermöglichen die beste Layoutoptimierung.The default values of LayoutOptions.Fill and LayoutOptions.FillAndExpand allow for the best layout optimization. Das Ändern dieser Eigenschaften hat Kosten und beansprucht Speicherplatz, auch wenn Sie auf die Standardwerte zurückgesetzt werden.Changing these properties has a cost and consumes memory, even when setting them back to the default values.

AusrichtungAlignment

Im folgenden XAML-Beispiel werden Ausrichtungs Einstellungen für jede untergeordnete Ansicht in der festgelegt StackLayout :The following XAML example sets alignment preferences on each child view in the 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 Ausrichtungs Einstellungen für die-Objekte festgelegt, Label um deren Position im zu steuern StackLayout .In this example, alignment preferences are set on the Label objects to control their position within the StackLayout. Die Start Center Felder,, End und Fill dienen zum Definieren der Ausrichtung der Label Objekte innerhalb des übergeordneten Elements StackLayout :The Start, Center, End, and Fill fields are used to define the alignment of the Label objects within the parent StackLayout:

Screenshot eines Stacklayout mit fest gelegbarer AusrichtungsoptionenScreenshot of a StackLayout with alignment options set

Eine StackLayout-Klasse respektiert ausschließlich die Ausrichtungseinstellungen für Ansichten untergeordneter Elemente, die sich in entgegengesetzter Richtung zur StackLayout-Ausrichtung befinden.A StackLayout only respects the alignment preferences on child views that are in the opposite direction to the StackLayout orientation. Deshalb legen die Ansichten der untergeordneten Label-Klasse innerhalb einer vertikal ausgerichteten StackLayout-Klasse ihre HorizontalOptions-Eigenschaften auf eines der Ausrichtungsfelder fest:Therefore, the Label child views within the vertically oriented StackLayout set their HorizontalOptions properties to one of the alignment fields:

Der entsprechende C#-Code lautet:The equivalent C# code is:

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 }
            }
        };
    }
}

ErweiterungExpansion

Im folgenden XAML-Beispiel werden die Erweiterungs Einstellungen für jedes Label in der festgelegt StackLayout :The following XAML example sets expansion preferences on each Label in the 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>

In diesem Beispiel werden Erweiterungs Einstellungen für die-Objekte festgelegt, Label um deren Größe in zu steuern StackLayout .In this example, expansion preferences are set on the Label objects to control their size within the StackLayout. Die StartAndExpand CenterAndExpand Felder,, EndAndExpand und FillAndExpand werden zum Definieren der Ausrichtungs Einstellung verwendet, und es wird festgelegt, ob der Label mehr Platz einnimmt, wenn er im übergeordneten Element verfügbar ist StackLayout :The StartAndExpand, CenterAndExpand, EndAndExpand, and FillAndExpand fields are used to define the alignment preference, and whether the Label will occupy more space if available within the parent StackLayout:

Screenshot eines Stacklayout mit fest gelegbarer ErweiterungsoptionenScreenshot of a StackLayout with expansion options set

Eine StackLayout-Klasse kann Ansichten untergeordneter Elemente nur in die Orientierungsrichtung erweitern.A StackLayout can only expand child views in the direction of its orientation. Deshalb kann die vertikal ausgerichtete StackLayout-Klasse die Ansichten untergeordneter Label-Klassen erweitern, die ihre VerticalOptions-Eigenschaften auf eines der Erweiterungsfelder festgelegt haben.Therefore, the vertically oriented StackLayout can expand Label child views that set their VerticalOptions properties to one of the expansion fields. Das bedeutet, dass jede Label-Klasse für die vertikale Ausrichtung den gleichen Platz innerhalb der StackLayout-Klasse belegt.This means that, for vertical alignment, each Label occupies the same amount of space within the StackLayout. Allerdings hat nur die letzte Label-Klasse, die ihre VerticalOptions-Eigenschaft auf FillAndExpand festlegt, eine andere Größe.However, only the final Label, which sets its VerticalOptions property to FillAndExpand has a different size.

Tipp

Wenn Sie einen verwenden StackLayout , stellen Sie sicher, dass nur eine untergeordnete Ansicht auf festgelegt ist LayoutOptions.Expands .When using a StackLayout, ensure that only one child view is set to LayoutOptions.Expands. 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.This property ensures that the specified child will occupy the largest space that the StackLayout can give to it, and it is wasteful to perform these calculations more than once.

Der entsprechende C#-Code lautet:The equivalent C# code is:

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.When all the space in a StackLayout is used, expansion preferences have no effect.

Weitere Informationen zur Ausrichtung und Erweiterung finden Sie unter Layoutoptionen Xamarin.Forms in .For more information about alignment and expansion, see Layout Options in Xamarin.Forms.

Ein-oder-ObjektNested StackLayout objects

Ein- StackLayout Objekt kann als übergeordnetes Layout verwendet werden, das StackLayout untergeordnete Objekte oder andere untergeordnete Layouts enthält.A StackLayout can be used as a parent layout that contains nested child StackLayout objects, or other child layouts.

Der folgende XAML-Code zeigt ein Beispiel für die Schachtelung von StackLayout Objekten:The following XAML shows an example of nesting StackLayout objects:

<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 Objekt geschachtelte Objekte in- StackLayout StackLayout Frame Objekten.In this example, the parent StackLayout contains nested StackLayout objects inside Frame objects. Das übergeordnete Element StackLayout ist vertikal ausgerichtet, während die untergeordneten StackLayout Objekte horizontal ausgerichtet werden:The parent StackLayout is oriented vertically, while the child StackLayout objects are oriented horizontally:

Screenshot der in der Struktur abgebildeten Stacklayout-ObjekteScreenshot of nested StackLayout objects

Wichtig

Wenn Sie StackLayout Objekte und andere Layouts verschachteln, desto stärker wirkt sich das geschachtelte Layout auf die Leistung aus.The deeper you nest StackLayout objects and other layouts, the more the nested layouts will impact performance. Weitere Informationen finden Sie unter auswählen des richtigen Layouts.For more information, see Choose the correct layout.

Der entsprechende C#-Code lautet:The equivalent C# code is:

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