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 wie das Layout seine untergeordneten Elemente ändert. 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 StackLayoutElement nicht explizit festgelegt ist, wird es erweitert, um die verfügbare Breite oder Höhe auszufüllen, wenn die Orientation Eigenschaft auf Horizontal".

A StackLayout wird häufig als übergeordnetes Layout verwendet, das andere untergeordnete Layouts enthält. Es sollte jedoch nicht verwendet werden, StackLayout 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 Vergeudung, da unnötige Layoutberechnungen durchgeführt werden. Stattdessen kann das gewünschte Layout mithilfe eines Grid.

Weitere Informationen finden Sie unter StackLayout.

HorizontalStackLayout

Ein HorizontalStackLayout organisiert untergeordnete Ansichten in einem eindimensionalen horizontalen Stapel und ist eine leistungsfähigere 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.

VerticalStackLayout

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 RowDefinitions Und-Eigenschaften ColumnDefinitions angegeben.

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

Hinweis

Ein Grid Layout sollte nicht mit Tabellen verwechselt werden und ist nicht für die Darstellung tabellarischer Daten vorgesehen.

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 Autound ist daher für die untergeordneten Elemente so breit wie erforderlich. 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 RowDefinitionoder der Breite eines ColumnDefinition, auf Auto. 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.

Achtung

Versuchen Sie, sicherzustellen, dass so wenige Zeilen und Spalten wie möglich auf Auto Größe festgelegt sind. Durch jede Zeile oder Spalte, deren Größe automatisch angepasst wird, wird verursacht, dass die Layout-Engine zusätzliche Layoutberechnungen durchführt. Verwenden Sie stattdessen wenn möglich Zeilen und Spalten mit festen Größen. Legen Sie alternativ Zeilen und Spalten so fest, dass sie einen proportionalen Abstand mit dem GridUnitType.Star Enumerationswert belegen.

Weitere Informationen finden Sie unter "Grid".

FlexLayout

Ein FlexLayout Element ähnelt einem StackLayout Element, in dem untergeordnete Elemente entweder horizontal oder vertikal in einem Stapel angezeigt werden. Eine FlexLayout kann die untergeordneten Elemente jedoch auch umschließen, wenn zu viele vorhanden sind, um in eine einzelne Zeile oder Spalte passen, und ermöglicht außerdem eine genauere Kontrolle der Größe, Ausrichtung und Ausrichtung der untergeordneten Elemente.

Der folgende XAML-Code zeigt, wie Sie eine FlexLayout Ansicht erstellen, die ihre Ansichten in einer einzelnen 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", wodurch die untergeordneten Elemente FlexLayout in einer einzelnen Spalte von Elementen angeordnet werden.
• Die AlignItems Eigenschaft ist auf Centerfestgelegt, wodurch jedes Element horizontal zentriert wird.
• Die JustifyContent Eigenschaft ist auf SpaceEvenly", die den gesamten vertikalen Abstand gleichmäßig zwischen allen Elementen und oberhalb des ersten Elements und unterhalb des letzten Elements zuweist.

Weitere Informationen finden Sie unter FlexLayout.

AbsoluteLayout

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

Es AbsoluteLayout sollte als spezielles Layout betrachtet werden, das nur verwendet werden kann, wenn Sie eine Größe für untergeordnete Elemente festlegen können oder wenn sich die Größe des Elements nicht auf die Positionierung anderer untergeordneter Elemente auswirkt. 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.

Wichtig

Die Eigenschaften HorizontalOptions und VerticalOptions haben keinen Effekt auf untergeordnete Elemente eines AbsoluteLayout.

Innerhalb einer AbsoluteLayoutangefügten AbsoluteLayout.LayoutBounds Eigenschaft wird verwendet, um die horizontale Position, vertikale Position, 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.
• Auf jeder BoxView, die AbsoluteLayout.LayoutFlags angefügte Eigenschaft ist auf festgelegt PositionProportional, die angibt, dass die Position proportional zum Um Standard Leerraum nach Breite und Höhe berücksichtigt wird.

Achtung

Vermeiden Sie die Verwendung der AbsoluteLayout.AutoSize Eigenschaft nach Möglichkeit, da das Layoutmodul zusätzliche Layoutberechnungen durchführt.

Weitere Informationen finden Sie unter AbsoluteLayout.

BindableLayout:

A BindableLayout ermöglicht eine beliebige Layoutklasse, die von der Layout Klasse abgeleitet wird, deren Inhalt durch Binden an eine Sammlung von Elementen zu generieren, wobei die Option zum Festlegen der Darstellung der einzelnen Elemente mit einer DataTemplate.

Ein bindungsfähiges IEnumerableLayout wird mit Daten aufgefüllt, indem seine ItemsSource Eigenschaft auf eine beliebige Sammlung festgelegt wird, die sie implementiert und an eine Layoutabgeleitete Klasse angefügt 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 eine StackLayout Ansammlung von Elementen gebunden und ihre Darstellung mit einem DataTemplate:

<StackLayout BindableLayout.ItemsSource="{Binding User.TopFollowers}"
             Orientation="Horizontal">
    <BindableLayout.ItemTemplate>
        <DataTemplate>
            <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 jede Ansicht im Layout auf IView.Measure und gibt die Gesamtgröße des Layouts aufgrund 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, um sicherzustellen, dass das Festlegen der InputTransparent Eigenschaft true auf eine Layoutklasse zu allen Elementen innerhalb des Layouts führt, die keine Eingabe erhalten.