Vertikale Stapelgestaltung

Die .NET Multi-platform App UI (.NET MAUI) VerticalStackLayout organisiert die untergeordneten Ansichten in einem eindimensionalen vertikalen Stapel und ist eine performantere Alternative zu einer StackLayout. Darüber hinaus kann ein VerticalStackLayout als übergeordnetes Layout verwendet werden, das andere untergeordnete Layouts enthält.

Die VerticalStackLayout definiert die folgenden Eigenschaften:

• Spacing, vom Typ double, gibt den Abstand zwischen jeder untergeordneten Ansicht an. Der Standardwert dieser Eigenschaft ist 0.

Diese Eigenschaft wird durch ein BindableProperty Objekt unterstützt, was bedeutet, dass sie Ziel von Datenbindungen sein und gestylt werden kann.

Der folgende XAML-Code zeigt, wie Sie eine Datei VerticalStackLayout erstellen, die unterschiedliche untergeordnete Ansichten enthält:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.VerticalStackLayoutPage">
    <VerticalStackLayout Margin="20">
        <Label Text="Primary colors" />
        <Rectangle Fill="Red"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Rectangle Fill="Yellow"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Rectangle Fill="Blue"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Label Text="Secondary colors" />
        <Rectangle Fill="Green"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Rectangle Fill="Orange"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Rectangle Fill="Purple"
                   HeightRequest="30"
                   WidthRequest="300" />
    </VerticalStackLayout>
</ContentPage>

In diesem Beispiel wird ein VerticalStackLayout erstellt, das Label und Rectangle Objekte enthält. Standardmäßig gibt es keinen Abstand zwischen den untergeordneten Ansichten:

Abstand zwischen untergeordneten Ansichten

Der Abstand zwischen untergeordneten Ansichten in einer VerticalStackLayout kann geändert werden, indem man die Spacing-Eigenschaft auf einen double-Wert festlegt.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.VerticalStackLayoutPage">
    <VerticalStackLayout Margin="20"
                         Spacing="10">
        <Label Text="Primary colors" />
        <Rectangle Fill="Red"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Rectangle Fill="Yellow"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Rectangle Fill="Blue"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Label Text="Secondary colors" />
        <Rectangle Fill="Green"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Rectangle Fill="Orange"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Rectangle Fill="Purple"
                   HeightRequest="30"
                   WidthRequest="300" />
    </VerticalStackLayout>
</ContentPage>

In diesem Beispiel wird ein VerticalStackLayout erstellt, das Label und Rectangle Objekte enthält. Zwischen den untergeordneten Ansichten gibt es zehn geräteunabhängige Einheiten Platz.

Position und Größe untergeordneter Ansichten

Die Größe und Position der Kindansichten innerhalb eines VerticalStackLayout hängen von den Werten der HeightRequest- und WidthRequest-Eigenschaften der Kindansichten sowie den Werten ihrer HorizontalOptions-Eigenschaften ab. In einem VerticalStackLayout dehnen sich untergeordnete Ansichten aus, um die verfügbare Breite zu füllen, wenn ihre Größe nicht ausdrücklich festgelegt ist.

Die HorizontalOptions Eigenschaften eines VerticalStackLayout und seiner untergeordneten Ansichten können auf Felder aus der LayoutOptions Struktur festgelegt werden, die eine Präferenz für das Ausrichtungs-Layout kapselt. Diese Layouteinstellung bestimmt die Position und Größe einer untergeordneten Ansicht innerhalb des übergeordneten Layouts.

Im folgenden XAML-Beispiel werden Ausrichtungspräferenzen für jede untergeordnete Ansicht in der VerticalStackLayout festgelegt.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.VerticalStackLayoutPage">
    <VerticalStackLayout Margin="20"
                         Spacing="6">
        <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" />
    </VerticalStackLayout>
</ContentPage>

In diesem Beispiel werden die Ausrichtungseinstellungen der Label Objekte festgelegt, um ihre Position innerhalb der VerticalStackLayout zu steuern. Die StartFelder , Center, Endund Fill Felder werden verwendet, um die Ausrichtung der Label Objekte innerhalb des übergeordneten Elements VerticalStackLayoutzu definieren:

Die VerticalStackLayout berücksichtigt nur die Ausrichtungseinstellungen von untergeordneten Ansichten, die sich in entgegengesetzter Richtung zur Ausrichtung des Layouts befinden. Daher legen die untergeordneten Ansichten innerhalb der VerticalStackLayout ihre HorizontalOptions Eigenschaften auf eines der Ausrichtungsfelder fest:

• Start, das Label auf der linken Seite von VerticalStackLayout positioniert.
• Center, die das Label in der VerticalStackLayout zentriert.
• End, die Label auf der rechten Seite von VerticalStackLayout positioniert.
• Fill, wodurch sichergestellt wird, dass die Label die Breite des VerticalStackLayout ausfüllt.

Nest VerticalStackLayout-Objekte

A VerticalStackLayout kann als übergeordnetes Layout verwendet werden, das andere geschachtelte untergeordnete Layouts enthält.

Der folgende XAML-Code zeigt ein Beispiel für das Verschachteln von HorizontalStackLayout Objekten in einer VerticalStackLayout.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.VerticalStackLayoutPage">
    <VerticalStackLayout Margin="20"
                         Spacing="6">
       <Label Text="Primary colors" />
       <Border Stroke="Black"
               Padding="5">
           <HorizontalStackLayout Spacing="15">
               <Rectangle Fill="Red"
                          HeightRequest="30"
                          WidthRequest="30" />
               <Label Text="Red"
                      FontSize="18" />
           </HorizontalStackLayout>
       </Border>
       <Border Stroke="Black"
               Padding="5">
           <HorizontalStackLayout Spacing="15">
               <Rectangle Fill="Yellow"
                          HeightRequest="30"
                          WidthRequest="30" />
               <Label Text="Yellow"
                      FontSize="18" />
           </HorizontalStackLayout>
       </Border>
       <Border Stroke="Black"
               Padding="5">
           <HorizontalStackLayout Spacing="15">
               <Rectangle Fill="Blue"
                          HeightRequest="30"
                          WidthRequest="30" />
               <Label Text="Blue"
                      FontSize="18" />
           </HorizontalStackLayout>
       </Border>
    </VerticalStackLayout>
</ContentPage>

In diesem Beispiel enthält das übergeordnete VerticalStackLayout Objekt geschachtelte HorizontalStackLayout Objekte in Border Objekten: