Layout auswählen Xamarin.FormsChoose a Xamarin.Forms Layout

Beispiel herunterladen Das Beispiel herunterladenDownload Sample Download the sample

Xamarin.Formsmit layoutklassen können Sie UI-Steuerelemente in Ihrer Anwendung anordnen und gruppieren. layout classes allow you to arrange and group UI controls in your application. Wenn Sie eine Layoutklasse auswählen, müssen Sie wissen, wie das Layout seine untergeordneten Elemente positioniert und wie das Layout seine untergeordneten Elemente ändert.Choosing a layout class requires knowledge of how the layout positions its child elements, and how the layout sizes its child elements. Außerdem kann es erforderlich sein, Layouts zu schachteln, um das gewünschte Layout zu erstellen.In addition, it may be necessary to nest layouts to create your desired layout.

Die folgende Abbildung zeigt typische Layouts, die mit den Haupt Xamarin.Forms layoutklassen erreicht werden können:The following image shows typical layouts that can be achieved with the main Xamarin.Forms layout classes:

Die hauptlayoutklassen inXamarin.FormsThe main layout classes in Xamarin.Forms

StackLayoutStackLayout

Ein StackLayout organisiert Elemente in einem eindimensionalen Stapel, entweder horizontal oder vertikal.A StackLayout organizes elements in a one-dimensional stack, either horizontally or vertically. Die Orientation -Eigenschaft gibt die Richtung der Elemente an, und die Standardausrichtung ist Vertical .The Orientation property specifies the direction of the elements, and the default orientation is Vertical. StackLayoutwird normalerweise verwendet, um einen unter Abschnitt der Benutzeroberfläche auf einer Seite anzuordnen.StackLayout is typically used to arrange a subsection of the UI on a page.

Der folgende XAML-Code zeigt, wie ein vertikal StackLayout mit drei Objekten erstellt wird Label :The following XAML shows how to create a vertical StackLayout containing three Label objects:

<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 in einer die StackLayout Größe eines Elements nicht explizit festgelegt ist, wird es erweitert, um die verfügbare Breite auszufüllen, oder die Höhe, wenn die- Orientation Eigenschaft auf festgelegt ist Horizontal .In a StackLayout, if an element's size is not explicitly set, it expands to fill the available width, or height if the Orientation property is set to Horizontal.

Eine StackLayout wird häufig als übergeordnetes Layout verwendet, das andere untergeordnete Layouts enthält.A StackLayout is often used as a parent layout, which contains other child layouts. Ein sollte jedoch StackLayout nicht zum reproduzieren eines Grid Layouts mithilfe einer Kombination von-Objekten verwendet werden StackLayout .However, a StackLayout should not be used to reproduce a Grid layout by using a combination of StackLayout objects. Der folgende Code zeigt ein Beispiel für diese fehl Vorgehensweise:The following code shows an example of this bad practice:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             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.This is wasteful because unnecessary layout calculations are performed. Stattdessen kann das gewünschte Layout besser mithilfe eines erreicht werden Grid .Instead, the desired layout can be better achieved by using a Grid.

Tipp

Wenn Sie einen verwenden StackLayout , stellen Sie sicher, dass nur ein untergeordnetes Element auf festgelegt ist LayoutOptions.Expands .When using a StackLayout, ensure that only one child element 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.

Weitere Informationen finden Sie unter Xamarin.Forms Stacklayout.For more information, see Xamarin.Forms StackLayout.

RasterGrid

Ein Grid wird zum Anzeigen von Elementen in Zeilen und Spalten verwendet, die eine proportionale oder absolute Größe aufweisen können.A Grid is used for displaying elements in rows and columns, which can have proportional or absolute sizes. Die Zeilen und Spalten eines Rasters werden mit der-Eigenschaft und der-Eigenschaft angegeben RowDefinitions ColumnDefinitions .A grid's rows and columns are specified with the RowDefinitions and ColumnDefinitions properties.

Um Elemente in bestimmten Zellen zu positionieren Grid , verwenden Sie die Grid.Column Grid.Row angefügten Eigenschaften und.To position elements in specific Grid cells, use the Grid.Column and Grid.Row attached properties. Um Elemente über mehrere Zeilen und Spalten hinweg zu spannen, verwenden Sie die Grid.RowSpan Grid.ColumnSpan angefügten Eigenschaften und.To make elements span across multiple rows and columns, use the Grid.RowSpan and Grid.ColumnSpan attached properties.

Hinweis

Ein Grid Layout sollte nicht mit Tabellen verwechselt werden und ist nicht für die Darstellung von Tabellendaten vorgesehen.A Grid layout should not be confused with tables, and is not intended to present tabular data. Im Gegensatz zu HTML-Tabellen ist ein zum Anordnen Grid von Inhalt vorgesehen.Unlike HTML tables, a Grid is intended for laying out content. Zum Anzeigen von Tabellendaten sollten Sie die Verwendung von ListView, CollectionViewoder TableViewin Erwägung gezogen.For displaying tabular data, consider using a ListView, CollectionView, or TableView.

Der folgende XAML-Code zeigt, wie Sie einen Grid mit zwei Zeilen und zwei Spalten erstellen:The following XAML shows how to create a Grid with two rows and two columns:

<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:In this example, sizing works as follows:

  • Jede Zeile hat eine explizite Höhe von 50 geräteunabhängigen Einheiten.Each row has an explicit height of 50 device-independent units.
  • Die Breite der ersten Spalte wird auf festgelegt Auto und ist daher für die untergeordneten Elemente so breit wie erforderlich.The width of the first column is set to Auto, and is therefore as wide as required for its children. In diesem Fall handelt es sich um 200 geräteunabhängige Einheiten, die der Breite des ersten entsprechen Label .In this case, it's 200 device-independent units wide to accommodate the width of the first Label.

Der Speicherplatz kann in einer Spalte oder Zeile mithilfe der automatischen Größenanpassung verteilt werden, sodass die Größe von Spalten und Zeilen an ihren Inhalt angepasst werden kann.Space can be distributed within a column or row by using auto sizing, which lets columns and rows size to fit their content. Dies wird erreicht, indem die Höhe eines RowDefinition oder die Breite eines auf festgelegt wird ColumnDefinition Auto .This is achieved by setting the height of a RowDefinition, or the width of a ColumnDefinition, to Auto. Die proportionale Größenanpassung kann auch verwendet werden, um den verfügbaren Platz zwischen den Zeilen und Spalten des Rasters durch gewichtete Proportionen zu verteilen.Proportional sizing can also be used to distribute available space among the rows and columns of the grid by weighted proportions. Dies wird erreicht, indem die Höhe eines RowDefinition oder die Breite eines auf einen Wert festgelegt wird, ColumnDefinition der den * Operator verwendet.This is achieved by setting the height of a RowDefinition, or the width of a ColumnDefinition, to a value that uses the * operator.

Achtung

Stellen Sie sicher, dass so wenige Zeilen und Spalten wie möglich auf Größe festgelegt sind Auto .Try to ensure that as few rows and columns as possible are set to Auto size. Durch jede Zeile oder Spalte, deren Größe automatisch angepasst wird, wird verursacht, dass die Layout-Engine zusätzliche Layoutberechnungen durchführt.Each auto-sized row or column will cause the layout engine to perform additional layout calculations. Verwenden Sie stattdessen wenn möglich Zeilen und Spalten mit festen Größen.Instead, use fixed size rows and columns if possible. Alternativ können Sie Zeilen und Spalten festlegen, um eine proportionale Menge an Speicherplatz mit dem- GridUnitType.Star Enumerationswert zu belegen.Alternatively, set rows and columns to occupy a proportional amount of space with the GridUnitType.Star enumeration value.

Weitere Informationen finden Sie unter Xamarin.Forms Grid.For more information, see Xamarin.Forms Grid.

FlexLayoutFlexLayout

Ein FlexLayout ähnelt einem StackLayout in, dass untergeordnete Elemente entweder horizontal oder vertikal in einem Stapel angezeigt werden.A FlexLayout is similar to a StackLayout in that it displays child elements either horizontally or vertically in a stack. Allerdings FlexLayout kann ein auch seine untergeordneten Elemente einschließen, wenn zu viele für eine einzelne Zeile oder Spalte vorhanden sind, und eine präzisetere Steuerung der Größe, Ausrichtung und Ausrichtung der untergeordneten Elemente ermöglicht.However, a FlexLayout can also wrap its children if there are too many to fit in a single row or column, and also enables more granular control of the size, orientation, and alignment of its child elements.

Der folgende XAML-Code zeigt, wie ein erstellt wird FlexLayout , das seine Sichten in einer einzelnen Spalte anzeigt:The following XAML shows how to create a FlexLayout that displays its views in a single column:

<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:In this example, layout works as follows:

  • Die- Direction Eigenschaft ist auf festgelegt Column , was bewirkt, dass die unter FlexLayout geordneten Elemente von in einer einzelnen Spalte von Elementen angeordnet werden.The Direction property is set to Column, which causes the children of the FlexLayout to be arranged in a single column of items.
  • Die- AlignItems Eigenschaft ist auf festgelegt Center , was bewirkt, dass jedes Element horizontal zentriert wird.The AlignItems property is set to Center, which causes each item to be horizontally centered.
  • Die- JustifyContent Eigenschaft ist auf festgelegt. Dadurch wird der SpaceEvenly gesamte restliche vertikale Leerraum gleichmäßig zwischen allen Elementen und oberhalb des ersten Elements und unterhalb des letzten Elements zugeordnet.The JustifyContent property is set to SpaceEvenly, which allocates all leftover vertical space equally between all the items, and above the first item, and below the last item.

Weitere Informationen finden Sie unter " Xamarin.Forms flexlayout".For more information, see Xamarin.Forms FlexLayout.

RelativeLayoutRelativeLayout

Eine RelativeLayout wird verwendet, um Elemente relativ zu den Eigenschaften des Layouts oder der gleich geordneten Elemente zu positionieren und zu verkleinern.A RelativeLayout is used to position and size elements relative to properties of the layout or sibling elements. Standardmäßig wird ein-Element in der oberen linken Ecke des Layouts positioniert.By default, an element is positioned in the upper left corner of the layout. Ein RelativeLayout kann verwendet werden, um Benutzeroberflächen zu erstellen, die proportional zwischen den Gerätegrößen skaliert werden.A RelativeLayout can be used to create UIs that scale proportionally across device sizes.

Innerhalb von RelativeLayout werden Positionen und Größen als Einschränkungen angegeben.Within a RelativeLayout, positions and sizes are specified as constraints. Einschränkungen verfügen über Factor -und- Constant Eigenschaften, die verwendet werden können, um Positionen und Größen als Vielfache (oder Bruch) von Eigenschaften anderer Objekte sowie eine Konstante zu definieren.Constraints have Factor and Constant properties, which can be used to define positions and sizes as multiples (or fractions) of properties of other objects, plus a constant. Außerdem können Konstanten eine negative Zahl sein.In addition, constants can be negative.

Hinweis

Ein RelativeLayout unterstützt die Positionierung von Elementen außerhalb ihrer eigenen Begrenzungen.A RelativeLayout supports positioning elements outside of its own bounds.

Der folgende XAML-Code zeigt, wie Elemente in einem angeordnet werden RelativeLayout :The following XAML shows how to arrange elements in a RelativeLayout:

<RelativeLayout>
    <BoxView Color="Blue"
             HeightRequest="50"
             WidthRequest="50"
             RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0}"
             RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0}" />
    <BoxView Color="Red"
             HeightRequest="50"
             WidthRequest="50"
             RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=.85}"
             RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0}" />
    <BoxView x:Name="pole"
             Color="Gray"
             WidthRequest="15"
             RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=.75}"
             RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=.45}"
             RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=.25}" />
    <BoxView Color="Green"
             RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=.10, Constant=10}"
             RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=.2, Constant=20}"
             RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=pole, Property=X, Constant=15}"
             RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=pole, Property=Y, Constant=0}" />
</RelativeLayout>

In diesem Beispiel funktioniert das Layout wie folgt:In this example, layout works as follows:

  • Der blaue Wert BoxView erhält eine explizite Größe von 50 x 50 geräteunabhängigen Einheiten.The blue BoxView is given an explicit size of 50x50 device-independent units. Sie befindet sich in der linken oberen Ecke des Layouts. Dies ist die Standardposition.It's placed in the upper left corner of the layout, which is the default position.
  • Die rote BoxView Größe erhält eine explizite Größe von 50 x 50 geräteunabhängigen Einheiten.The red BoxView is given an explicit size of 50x50 device-independent units. Sie befindet sich in der rechten oberen Ecke des Layouts.It's placed in the upper right corner of the layout.
  • Das graue BoxView erhält eine explizite Breite von 15 geräteunabhängigen Einheiten, und die Höhe wird auf 75% der Höhe des übergeordneten Elements festgelegt.The gray BoxView is given an explicit width of 15 device-independent units, and it's height is set to be 75% of the height of its parent.
  • Das Grün BoxView erhält keine explizite Größe.The green BoxView isn't given an explicit size. Seine Position wird relativ zum benannten fest BoxView gelegt pole .Its position is set relative to the BoxView named pole.

Warnung

Vermeiden Sie möglichst die Verwendung eines RelativeLayout.Avoid using a RelativeLayout whenever possible. Dies führt dazu, dass die CPU erheblich mehr Arbeit übernehmen muss.It will result in the CPU having to perform significantly more work.

Weitere Informationen finden Sie unter Xamarin.Forms relativelayout.For more information, see Xamarin.Forms RelativeLayout.

AbsoluteLayoutAbsoluteLayout

Eine AbsoluteLayout wird verwendet, um Elemente mit expliziten Werten oder mit Werten relativ zur Größe des Layouts zu positionieren und zu verkleinern.An AbsoluteLayout is used to position and size elements using explicit values, or values relative to the size of the layout. Die Position wird von der linken oberen Ecke des untergeordneten Elements relativ zur linken oberen Ecke des angegeben AbsoluteLayout .The position is specified by the upper-left corner of the child relative to the upper-left corner of the AbsoluteLayout.

Ein AbsoluteLayout sollte als ein spezielles Layout angesehen werden, das nur verwendet werden kann, wenn Sie eine Größe für untergeordnete Elemente festlegen können, oder wenn die Größe des Elements die Positionierung anderer untergeordneter Elemente nicht beeinträchtigt.An AbsoluteLayout should be regarded as a special-purpose layout to be used only when you can impose a size on children, or when the element's size doesn't affect the positioning of other children. Standardmäßig wird dieses Layout verwendet, um 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.A standard use of this layout is to create an overlay, which covers the page with other controls, perhaps to protect the user from interacting with the normal controls on the page.

Wichtig

Die Eigenschaften HorizontalOptions und VerticalOptions haben keinen Effekt auf untergeordnete Elemente eines AbsoluteLayout.The HorizontalOptions and VerticalOptions properties have no effect on children of an AbsoluteLayout.

Innerhalb AbsoluteLayout AbsoluteLayout.LayoutBounds von wird die angefügte-Eigenschaft verwendet, um die horizontale Position, die vertikale Position, die Breite und die Höhe eines Elements anzugeben.Within an AbsoluteLayout, the AbsoluteLayout.LayoutBounds attached property is used to specify the horizontal position, vertical position, width and height of an element. Außerdem AbsoluteLayout.LayoutFlags gibt die angefügte-Eigenschaft an, wie die layoutbegrenzungen interpretiert werden.In addition, the AbsoluteLayout.LayoutFlags attached property specifies how the layout bounds will be interpreted.

Der folgende XAML-Code zeigt, wie Elemente in einem angeordnet werden AbsoluteLayout :The following XAML shows how to arrange elements in an 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:In this example, layout works as follows:

  • Jeder BoxView erhält eine explizite Größe von 100 x 100 und wird an derselben Position, horizontal zentriert, angezeigt.Each BoxView is given an explicit size of 100x100, and is displayed in the same position, horizontally centered.
  • Der rote BoxView wird um 30 Grad gedreht, und das grüne BoxView wird um 60 Grad gedreht.The red BoxView is rotated 30 degrees, and the green BoxView is rotated 60 degrees.
  • Auf jedem BoxView wird die AbsoluteLayout.LayoutFlags angefügte-Eigenschaft auf festgelegt PositionProportional . Dies gibt an, dass die Position proportional zum verbleibenden Bereich ist, nachdem Breite und Höhe berücksichtigt wurden.On each BoxView, the AbsoluteLayout.LayoutFlags attached property is set to PositionProportional, indicating that the position is proportional to the remaining space after width and height are accounted for.

Achtung

Vermeiden Sie die Verwendung der- AbsoluteLayout.AutoSize Eigenschaft, wenn dies möglich ist, da die Layout-Engine weitere Layoutberechnungen durchführt.Avoid using the AbsoluteLayout.AutoSize property whenever possible, as it will cause the layout engine to perform additional layout calculations.

Weitere Informationen finden Sie unter Xamarin.Forms AbsoluteLayout.For more information, see Xamarin.Forms AbsoluteLayout.

Eingabe TransparenzInput transparency

Jedes visuelle Element verfügt über eine InputTransparent -Eigenschaft, mit der definiert wird, ob das Element Eingaben empfängt.Each visual element has an InputTransparent property that's used to define whether the element receives input. Der Standardwert ist false . Dadurch wird sichergestellt, dass das Element Eingaben empfängt.Its default value is false, ensuring that the element receives input.

Wenn diese Eigenschaft für eine Layoutklasse festgelegt ist, wird Ihr Wert zu untergeordneten Elementen übertragen.When this property is set on a layout class, its value transfers to child elements. Das Festlegen der- InputTransparent Eigenschaft auf true für eine Layoutklasse führt daher dazu, dass alle Elemente innerhalb des Layouts keine Eingaben erhalten.Therefore, setting the InputTransparent property to true on a layout class will result in all elements within the layout not receiving input.

LayoutleistungLayout performance

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.

Außerdem kann die Seiten Rendering-Leistung mithilfe der layoutkomprimierung verbessert werden, die die angegebenen Layouts aus der visuellen Struktur entfernt.In addition, page rendering performance can also be improved by using layout compression, which removes specified layouts from the visual tree. Weitere Informationen finden Sie unter layoutkomprimierung.For more information, see Layout compression.