Layouts

Layoutklassen der .NET Multi-Platform App UI (.NET MAUI) ermöglichen ihnen das Anordnen und Gruppieren von UI-Steuerelementen in Ihrer Anwendung. Das Auswählen einer Layoutklasse erfordert Kenntnisse darüber, wie das Layout seine untergeordneten Elemente positioniert und dimensioniert. Darüber hinaus kann es erforderlich sein, Layouts zu verschachteln, um das gewünschte Layout zu erstellen.

StackLayout

A StackLayout organisiert Elemente in einem eindimensionalen Stapel, entweder horizontal oder vertikal. Die Orientation Eigenschaft gibt die Richtung der Elemente an, und die Standardausrichtung ist Vertical. StackLayout wird in der Regel verwendet, um einen Unterabschnitt der Benutzeroberfläche auf einer Seite anzuordnen.

Der folgende XAML-Code zeigt, wie Sie eine vertikale Struktur StackLayout erstellen, die drei Label Objekte enthält:

<StackLayout Margin="20,35,20,25">
    <Label Text="The StackLayout has its Margin property set, to control the rendering position of the StackLayout." />
    <Label Text="The Padding property can be set to specify the distance between the StackLayout and its children." />
    <Label Text="The Spacing property can be set to specify the distance between views in the StackLayout." />
</StackLayout>

Wenn die Größe eines Elements in einem StackLayout nicht explizit festgelegt ist, wird es erweitert, um die verfügbare Breite auszufüllen, oder die verfügbare Höhe, wenn die Orientation-Eigenschaft auf Horizontal gesetzt ist.

A StackLayout wird häufig als übergeordnetes Layout verwendet, das andere untergeordnete Layouts enthält. Man sollte jedoch StackLayout nicht verwenden, um ein Grid Layout mithilfe einer Kombination von StackLayout Objekten zu reproduzieren. Der folgende Code zeigt ein Beispiel für diese fehlerhafte Vorgehensweise:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Details.HomePage"
             Padding="0,20,0,0">
    <StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Name:" />
            <Entry Placeholder="Enter your name" />
        </StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Age:" />
            <Entry Placeholder="Enter your age" />
        </StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Occupation:" />
            <Entry Placeholder="Enter your occupation" />
        </StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Address:" />
            <Entry Placeholder="Enter your address" />
        </StackLayout>
    </StackLayout>
</ContentPage>

Dies ist verschwenderisch, da unnötige Layoutberechnungen durchgeführt werden. Stattdessen kann das gewünschte Layout besser mit einem Grid-Element erreicht werden.

Weitere Informationen finden Sie unter StackLayout.

HorizontalStackLayout

Ein HorizontalStackLayout organisiert untergeordnete Ansichten in einem eindimensionalen horizontalen Stack und ist eine performantere Alternative zu einem StackLayout. HorizontalStackLayout wird in der Regel verwendet, um einen Unterabschnitt der Benutzeroberfläche auf einer Seite anzuordnen.

Der folgende XAML-Code zeigt, wie Sie eine HorizontalStackLayout mit unterschiedlichen untergeordneten Ansichten erstellen:

<HorizontalStackLayout Margin="20">
   <Rectangle Fill="Red"
              HeightRequest="30"
              WidthRequest="30" />
   <Label Text="Red"
          FontSize="18" />
</HorizontalStackLayout>

Wenn die Größe eines Elements in einem HorizontalStackLayoutElement nicht explizit festgelegt ist, wird es erweitert, um die verfügbare Höhe auszufüllen.

Weitere Informationen finden Sie unter HorizontalStackLayout.

Vertikale Stapelgestaltung

Ein VerticalStackLayout organisiert untergeordnete Ansichten in einem eindimensionalen vertikalen Stapel und ist eine leistungsfähigere Alternative zu einem StackLayout. VerticalStackLayout wird in der Regel verwendet, um einen Unterabschnitt der Benutzeroberfläche auf einer Seite anzuordnen.

Der folgende XAML-Code zeigt, wie Sie ein VerticalStackLayout enthaltende drei Label Objekte erstellen:

<VerticalStackLayout Margin="20,35,20,25">
    <Label Text="The VericalStackLayout has its Margin property set, to control the rendering position of the VerticalStackLayout." />
    <Label Text="The Padding property can be set to specify the distance between the VerticalStackLayout and its children." />
    <Label Text="The Spacing property can be set to specify the distance between views in the VerticalStackLayout." />
</VerticalStackLayout>

Wenn die Größe eines Elements in einem VerticalStackLayoutElement nicht explizit festgelegt ist, wird es erweitert, um die verfügbare Breite auszufüllen.

Weitere Informationen finden Sie unter VerticalStackLayout.

Grid

A Grid wird zum Anzeigen von Elementen in Zeilen und Spalten verwendet, die proportionale oder absolute Größen aufweisen können. Die Zeilen und Spalten eines Rasters werden mit den Eigenschaften RowDefinitions und ColumnDefinitions festgelegt.

Verwenden Sie die angefügten Eigenschaften Grid.Column und Grid.Row, um Elemente in bestimmten Grid Zellen zu positionieren. Verwenden Sie die angefügten Eigenschaften Grid.RowSpan und Grid.ColumnSpan, um Elemente über mehrere Zeilen und Spalten zu spannen.

Der folgende XAML-Code zeigt, wie Sie eine Grid mit zwei Zeilen und zwei Spalten erstellen:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="50" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>    
    <Label Text="Column 0, Row 0"
           WidthRequest="200" />
    <Label Grid.Column="1"
           Text="Column 1, Row 0" />
    <Label Grid.Row="1"
           Text="Column 0, Row 1" />
    <Label Grid.Column="1"
           Grid.Row="1"
           Text="Column 1, Row 1" />
</Grid>

In diesem Beispiel funktioniert die Größenanpassung wie folgt:

• Jede Zeile hat eine explizite Höhe von 50 geräteunabhängigen Einheiten.
• Die Breite der ersten Spalte ist auf Auto und ist daher genauso breit, wie es für ihre untergeordneten Elemente erforderlich ist. In diesem Fall ist es 200 geräteunabhängige Einheiten breit, um die Breite des ersten Labelzu berücksichtigen.

Platz kann innerhalb einer Spalte oder Zeile mithilfe der automatischen Größenanpassung verteilt werden, wodurch Spalten und Zeilengröße an ihren Inhalt angepasst werden können. Dies wird erreicht, indem die Höhe eines RowDefinition oder die Breite eines ColumnDefinition auf Auto gesetzt wird. Proportionale Größenanpassung kann auch verwendet werden, um den verfügbaren Platz zwischen den Zeilen und Spalten des Rasters nach gewichteten Proportionen zu verteilen. Dies wird erreicht, indem die Höhe eines RowDefinitionoder der Breite eines Elements ColumnDefinitionauf einen Wert festgelegt wird, der den * Operator verwendet.

Weitere Informationen finden Sie unter "Grid".

FlexLayout

Ein FlexLayout ähnelt einem StackLayout, da es untergeordnete Elemente entweder horizontal oder vertikal in einem Stapel anzeigt. Eine FlexLayout kann die untergeordneten Elemente jedoch auch umbrechen, wenn zu viele vorhanden sind, um in eine einzelne Zeile oder Spalte zu passen, und ermöglicht außerdem eine genauere Kontrolle über die Größe, Orientierung und Ausrichtung der untergeordneten Elemente.

Der folgende XAML-Code zeigt, wie Sie eine FlexLayout erstellen, die ihre Ansichten in einer einzigen Spalte anzeigt.

<FlexLayout Direction="Column"
            AlignItems="Center"
            JustifyContent="SpaceEvenly">
    <Label Text="FlexLayout in Action" />
    <Button Text="Button" />
    <Label Text="Another Label" />
</FlexLayout>

In diesem Beispiel funktioniert das Layout wie folgt:

• Die Direction Eigenschaft ist auf Column gesetzt, wodurch die Kinderelemente des FlexLayout in einer einzigen Spalte angeordnet werden.
• Die AlignItems Eigenschaft ist auf Centerfestgelegt, wodurch jedes Element horizontal zentriert wird.
• Die JustifyContent-Eigenschaft ist auf SpaceEvenly gesetzt, wodurch der verbleibende vertikale Raum gleichmäßig zwischen allen Elementen verteilt wird, sowie oberhalb des ersten Elements und unterhalb des letzten Elements.

Weitere Informationen finden Sie unter FlexLayout.

AbsoluteLayout

AbsoluteLayout wird verwendet, um Elemente mithilfe expliziter Werte oder Werte relativ zur Größe des Layouts zu positionieren und zu skalieren. Die Position wird durch die obere linke Ecke des untergeordneten Elements relativ zur oberen linken Ecke des untergeordneten AbsoluteLayoutElements angegeben.

Ein AbsoluteLayout sollte als spezielles Layout betrachtet werden, das nur verwendet wird, wenn Sie eine Größe für Kinder-Elemente festlegen können, oder wenn die Größe des Elements die Positionierung anderer Kinder-Elemente nicht beeinflusst. Eine Standardmäßige Verwendung dieses Layouts besteht darin, eine Überlagerung zu erstellen, die die Seite mit anderen Steuerelementen abdeckt, um den Benutzer vor der Interaktion mit den normalen Steuerelementen auf der Seite zu schützen.

Innerhalb eines AbsoluteLayout wird die angefügte AbsoluteLayout.LayoutBounds-Eigenschaft verwendet, um die horizontale und vertikale Position sowie die Breite und Höhe eines Elements anzugeben. Darüber hinaus gibt die AbsoluteLayout.LayoutFlags angefügte Eigenschaft an, wie die Layoutgrenzen interpretiert werden.

Der folgende XAML-Code veranschaulicht das Anordnen von Elementen in einem AbsoluteLayout:

<AbsoluteLayout Margin="40">
    <BoxView Color="Red"
             AbsoluteLayout.LayoutFlags="PositionProportional"
             AbsoluteLayout.LayoutBounds="0.5, 0, 100, 100"
             Rotation="30" />
    <BoxView Color="Green"
             AbsoluteLayout.LayoutFlags="PositionProportional"
             AbsoluteLayout.LayoutBounds="0.5, 0, 100, 100"
             Rotation="60" />
    <BoxView Color="Blue"
             AbsoluteLayout.LayoutFlags="PositionProportional"
             AbsoluteLayout.LayoutBounds="0.5, 0, 100, 100" />
</AbsoluteLayout>

In diesem Beispiel funktioniert das Layout wie folgt:

• Jeder BoxView erhält eine explizite Größe von 100x100 und wird an derselben Position horizontal zentriert angezeigt.
• Das Rot BoxView wird um 30 Grad gedreht, und das Grün BoxView wird um 60 Grad gedreht.
• Bei jedem BoxViewwird die AbsoluteLayout.LayoutFlags angefügte Eigenschaft auf PositionProportionalfestgelegt, die angibt, dass die Position proportional zum verbleibenden Platz ist, nachdem Breite und Höhe berücksichtigt wurden.

Weitere Informationen finden Sie unter AbsoluteLayout.

BindableLayout:

Ein BindableLayout ermöglicht Layoutklassen, die von der Layout-Klasse abgeleitet sind, ihren Inhalt durch das Binden an eine Sammlung von Elementen zu generieren, wobei die Darstellung jedes Elements mit einem DataTemplate festgelegt werden kann.

Ein bindbares Layout wird mit Daten gefüllt, indem seine Eigenschaft ItemsSource auf eine beliebige Sammlung festgelegt wird, die IEnumerable implementiert, und es an eine von Layout abgeleitete Klasse angeschlossen wird. Die Darstellung der einzelnen Elemente im gebundenen Layout kann durch Festlegen der BindableLayout.ItemTemplate angefügten Eigenschaft auf eine DataTemplatedefiniert werden.

Der folgende XAML-Code zeigt, wie ein StackLayout an eine Sammlung von Elementen gebunden wird und deren Darstellung mit einem DataTemplate definiert wird.

<StackLayout BindableLayout.ItemsSource="{Binding User.TopFollowers}"
             Orientation="Horizontal">
    <BindableLayout.ItemTemplate>
        <DataTemplate x:DataType="sys:String">
            <Image Source="{Binding}"
                   Aspect="AspectFill"
                   WidthRequest="44"
                   HeightRequest="44" />
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</StackLayout>

Bindende Layouts sollten nur verwendet werden, wenn die anzuzeigende Sammlung von Elementen klein ist, und Das Scrollen und Auswählen ist nicht erforderlich.

Weitere Informationen finden Sie unter BindableLayout.

Benutzerdefinierte Layouts

In .NET MAUI leiten sich die Layoutklassen von der abstrakten Layout Klasse ab. Diese Klasse delegiert plattformübergreifendes Layout und Maß an eine Layout-Manager-Klasse. Jede Layout-Manager-Klasse implementiert die ILayoutManager Schnittstelle, die angibt, dass Measure und ArrangeChildren Implementierungen bereitgestellt werden müssen:

• Die Measure-Implementierung ruft IView.Measure für jede Ansicht im Layout auf und gibt die Gesamtgröße des Layouts unter Berücksichtigung der Einschränkungen zurück.
• Die ArrangeChildren Implementierung bestimmt, wo jede Ansicht innerhalb der Grenzen des Layouts platziert werden soll, und ruft Arrange jede Ansicht mit den entsprechenden Grenzen auf. Der Rückgabewert ist die tatsächliche Größe des Layouts.

Die Layouts von .NET MAUI verfügen über vordefinierte Layout-Manager, um ihr Layout zu verarbeiten. Manchmal ist es jedoch erforderlich, Seiteninhalte mithilfe eines Layouts zu organisieren, das nicht von .NET MAUI bereitgestellt wird. Dies kann erreicht werden, indem Sie Ihr eigenes benutzerdefiniertes Layout schreiben. Weitere Informationen finden Sie unter "Benutzerdefinierte Layouts".

Eingabetransparenz

Jedes visuelle Element verfügt über eine InputTransparent bindungsfähige Eigenschaft, die verwendet wird, um zu definieren, ob das Element Eingaben empfangen kann. Der Standardwert ist false, um sicherzustellen, dass das Element Eingaben empfangen kann. Wenn sich diese Eigenschaft auf einem Element befindet true , empfängt das Element keine Eingaben. Stattdessen werden Eingaben an alle Elemente übergeben, die sich visuell hinter dem Element befinden.

Die Layout Klasse, von der alle Layouts abgeleitet werden, verfügt über eine CascadeInputTransparent bindungsfähige Eigenschaft, die steuert, ob untergeordnete Elemente die Eingabetransparenz des Layouts erben. Der Standardwert ist true, wodurch sichergestellt wird, dass bei Festlegung der InputTransparent-Eigenschaft true auf eine Layoutklasse alle Elemente innerhalb des Layouts keine Eingabe erhalten.