Ausrichten und Positionieren von .NET MAUI-Steuerelementen

Jedes .NET Multi-Platform App UI (.NET MAUI)-Steuerelement, das von View abgeleitet wird, das Ansichten und Layouts enthält, weist die Eigenschaften HorizontalOptions und VerticalOptions vom Typ LayoutOptions auf. Die LayoutOptions-Struktur kapselt die bevorzugte Ausrichtung einer Ansicht, die die Position und Größe innerhalb des übergeordneten Layouts bestimmt, wenn das übergeordnete Layout nicht verwendeten Platz enthält (d. h. das übergeordnete Layout ist größer als die kombinierte Größe aller untergeordneten Elemente).

Darüber hinaus positionieren die Eigenschaften Margin und Padding Steuerelemente relativ zu benachbarten oder untergeordneten Steuerelementen. Weitere Informationen finden Sie unter Positionieren von Steuerelementen.

Ausrichten von Ansichten in Layouts

Die Ausrichtung einer View, relativ zu ihrem übergeordneten Element, kann gesteuert werden, indem die Eigenschaft HorizontalOptions oder VerticalOptions der View auf eines der öffentlichen Felder aus der LayoutOptions-Struktur festgelegt wird. Die öffentlichen Felder sind Start, Center, End und Fill.

Die Felder Start, Center, End und Fill werden verwendet, um die Ausrichtung der Ansicht innerhalb des übergeordneten Layouts zu definieren.

• Für die horizontale Ausrichtung positioniert Start die View auf der linken Seite des übergeordneten Layouts, und bei vertikaler Ausrichtung wird die View am oberen Rand des übergeordneten Layouts positioniert.
• Bei horizontaler und vertikaler Ausrichtung zentriert Center die View.
• Für die horizontale Ausrichtung positioniert End die View auf der rechten Seite des übergeordneten Layouts, und bei vertikaler Ausrichtung wird die View am unteren Rand des übergeordneten Layouts positioniert.
• Bei horizontaler Ausrichtung stellt Fill sicher, dass View die Breite des übergeordneten Layouts ausfüllt, und für die vertikale Ausrichtung wird sichergestellt, dass View die Höhe des übergeordneten Layouts ausfüllt.

Hinweis

Der Standardwert der Eigenschaften HorizontalOptions und VerticalOptions einer Ansicht lautet LayoutOptions.Fill.

Eine StackLayout-Klasse respektiert ausschließlich die Felder Start, Center, End und FillLayoutOptions für Ansichten untergeordneter Elemente, die sich in entgegengesetzter Richtung zur StackLayout-Ausrichtung befinden. Deshalb legen die untergeordneten Ansichten innerhalb einer vertikal ausgerichteten StackLayout ihre HorizontalOptions-Eigenschaften auf eines der Felder Start, Center, End oder Fill fest. Entsprechend legen die untergeordneten Ansichten innerhalb einer horizontal ausgerichteten StackLayout ihre VerticalOptions-Eigenschaften auf eines der Felder Start, Center, End oder Fill fest.

Ein StackLayout respektiert nicht die Felder Start, Center, End und FillLayoutOptions für Ansichten untergeordneter Elemente, die sich in gleicher Richtung zur StackLayout-Ausrichtung befinden. Daher ignoriert ein vertikal ausgerichtetes StackLayout die Felder Start, Center, End oder Fill, wenn sie für die VerticalOptions-Eigenschaften untergeordneter Ansichten festgelegt sind. Entsprechend ignoriert ein horizontal ausgerichtetes StackLayout die Felder Start, Center, End oder Fill, wenn sie für die HorizontalOptions-Eigenschaften untergeordneter Ansichten festgelegt sind.

Wichtig

LayoutOptions.Fill setzt in der Regel Größenanforderungen außer Kraft, die mit den Eigenschaften HeightRequest und WidthRequest angegeben wurden.

Im folgenden XAML-Beispiel wird ein vertikal ausgerichtetes StackLayout veranschaulicht, in dem jedes untergeordnete Label seine HorizontalOptions-Eigenschaft auf eines der vier Ausrichtungsfelder aus der LayoutOptions-Struktur festlegt:

<StackLayout>
  ...
  <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>

Der folgende Screenshot zeigt die resultierende Ausrichtung der einzelnen Label:

Positionieren von Steuerelementen

Die Eigenschaften Margin und Padding positionieren Steuerelemente relativ zu benachbarten oder untergeordneten Steuerelementen. Rand- und Abstandskonzepte sind verwandte Layoutkonzepte:

• Die Margin-Eigenschaft stellt den Abstand zwischen einem Element und seinen angrenzenden Elementen dar und wird verwendet, um die Renderingposition des Elements und die Renderingposition seiner Nachbarn zu steuern. Margin-Werte können für Layouts und Ansichten angegeben werden.
• Die Padding-Eigenschaft stellt den Abstand zwischen einem Element und seinen untergeordneten Elementen dar und wird verwendet, um das Steuerelement von seinem eigenen Inhalt zu trennen. Padding-Werte können auf Seiten, Layouts und Ansichten angegeben werden.

Das folgende Diagramm veranschaulicht die beiden Konzepte.

Hinweis

Margin-Werte sind additiv. Wenn also zwei benachbarte Elemente einen Rand von 20 geräteunabhängigen Einheiten angeben, beträgt der Abstand zwischen den Elementen 40 geräteunabhängige Einheiten. Auch die Werte „Margin“ als auch „Padding“ sind additiv, wenn beide angewendet werden. Das hießt, der Abstand zwischen und beliebigem Inhalt beträgt Margin plus Padding.

Die Eigenschaften Margin und Padding sind beide vom Typ Thickness. Beim Erstellen einer Thickness-Struktur gibt es drei Möglichkeiten:

• Erstellen Sie eine Thickness-Struktur, die durch einen einzelnen einheitlichen Wert definiert ist. Der einzelne Wert wird auf die linke, obere, rechte und untere Seite des Elements angewendet.
• Erstellen Sie eine Thickness-Struktur, die durch horizontale und vertikale Werte definiert ist. Der horizontale Wert wird symmetrisch auf die linke und rechte Seite des Elements angewendet, wobei der vertikale Wert symmetrisch auf die oberen und unteren Seiten des Elements angewendet wird.
• Erstellen Sie eine Thickness-Struktur, die durch vier unterschiedliche Werte definiert ist, die auf die linke, obere, rechte und untere Seite des Elements angewendet werden.

Das folgende XAML-Beispiel zeigt alle drei Möglichkeiten:

<StackLayout Padding="0,20,0,0">
  <!-- Margin defined by a single uniform value. -->
  <Label Text=".NET MAUI" Margin="20" />
  <!-- Margin defined by horizontal and vertical values. -->  
  <Label Text=".NET for iOS" Margin="10,15" />
  <!-- Margin defined by four distinct values that are applied to the left, top, right, and bottom. -->  
  <Label Text=".NET for Android" Margin="0,20,15,5" />
</StackLayout>

Der entsprechende C#-Code lautet:

StackLayout stackLayout = new StackLayout
{
  Padding = new Thickness(0,20,0,0)
};
// Margin defined by a single uniform value.
stackLayout.Add(new Label { Text = ".NET MAUI", Margin = new Thickness(20) });
// Margin defined by horizontal and vertical values.
stackLayout.Add(new Label { Text = ".NET for iOS", Margin = new Thickness(10,25) });
// Margin defined by four distinct values that are applied to the left, top, right, and bottom.
stackLayout.Add(new Label { Text = ".NET for Android", Margin = new Thickness(0,20,15,5) });  

Hinweis

Thickness-Werte können negativ sein, was den Inhalt in der Regel ausklammert oder überzeichnet.