Layoutoptionen in Xamarin.Forms

Beispiel herunterladen Das Beispiel herunterladen

Jede Xamarin.Forms Ansicht verfügt über die Eigenschaften HorizontalOptions und VerticalOptions vom Typ LayoutOptions. In diesem Artikel wird erläutert, welche Auswirkungen die einzelnen LayoutOptions-Werte auf die Ausrichtung und Erweiterung einer Ansicht haben.

Übersicht

Die LayoutOptions -Struktur kapselt zwei Layouteinstellungen:

  • Ausrichtung : Die bevorzugte Ausrichtung der Ansicht, die ihre Position und Größe innerhalb des übergeordneten Layouts bestimmt.
  • Erweiterung – wird nur von verwendet StackLayout, und gibt an, ob die Ansicht zusätzlichen Speicherplatz verwenden soll, sofern verfügbar.

Diese Layouteinstellungen können relativ zu seinem Viewübergeordneten Element angewendet werden, indem die - oder VerticalOptions -HorizontalOptionsEigenschaft von View auf eines der öffentlichen Felder der LayoutOptions -Struktur festgelegt wird. Die öffentlichen Felder sind wie folgt:

Die StartFelder , Center, Endund Fill werden verwendet, um die Ausrichtung der Ansicht innerhalb des übergeordneten Layouts zu definieren:

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

Die StartAndExpand-, CenterAndExpand-, EndAndExpand- und FillAndExpand -Werte werden verwendet, um die Ausrichtungseinstellung zu definieren und zu bestimmen, ob die Ansicht mehr Platz belegt, wenn sie innerhalb des übergeordneten -Elements StackLayoutverfügbar ist.

Hinweis

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

Ausrichtung

Die Ausrichtung steuert, wie eine Ansicht innerhalb ihres übergeordneten Layouts positioniert wird, wenn das übergeordnete Layout ungenutzten Platz enthält (das übergeordnete Layout ist also größer als die kombinierte Größe aller untergeordneten Elemente).

Ein StackLayout berücksichtigt nur die StartFelder , Center, Endund FillLayoutOptions in untergeordneten Ansichten, die sich in der entgegengesetzten Richtung zur StackLayout Ausrichtung befinden. Daher können untergeordnete Ansichten innerhalb einer vertikal ausgerichteten StackLayout Ansicht ihre HorizontalOptions Eigenschaften auf eines der StartFelder , Center, Endoder Fill festlegen. Auf ähnliche Weise können untergeordnete Ansichten innerhalb einer horizontal ausgerichteten StackLayout Ansicht ihre VerticalOptions Eigenschaften auf eines der StartFelder , Center, Endoder Fill festlegen.

A StackLayout berücksichtigt die StartFelder , Center, Endund FillLayoutOptions in untergeordneten Ansichten, die sich in derselben Richtung wie die StackLayout Ausrichtung befinden, nicht. Daher ignoriert ein vertikal ausgerichtetes StackLayout die StartFelder , Center, Endoder Fill , wenn sie für die VerticalOptions Eigenschaften untergeordneter Ansichten festgelegt sind. Ebenso ignoriert ein horizontal ausgerichtetes StackLayoutStartDie Felder , Center, Endoder Fill , wenn sie für die HorizontalOptions Eigenschaften untergeordneter Ansichten festgelegt sind.

Hinweis

LayoutOptions.Fill in der Regel überschreibt Größenanforderungen, die mithilfe der HeightRequest Eigenschaften und WidthRequest angegeben werden.

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

<StackLayout Margin="0,20,0,0">
  ...
  <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 entsprechende C#-Code ist unten dargestellt:

Content = new StackLayout
{
  Margin = new Thickness(0, 20, 0, 0),
  Children = {
    ...
    new Label { Text = "Start", BackgroundColor = Color.Gray, HorizontalOptions = LayoutOptions.Start },
    new Label { Text = "Center", BackgroundColor = Color.Gray, HorizontalOptions = LayoutOptions.Center },
    new Label { Text = "End", BackgroundColor = Color.Gray, HorizontalOptions = LayoutOptions.End },
    new Label { Text = "Fill", BackgroundColor = Color.Gray, HorizontalOptions = LayoutOptions.Fill }
  }
};

Der Code führt zu dem Layout, das in den folgenden Screenshots gezeigt wird:

Ausrichtungslayoutoptionen

Erweiterung

Die Erweiterung steuert, ob eine Ansicht mehr Platz belegt, sofern verfügbar, innerhalb eines StackLayout. Wenn der StackLayout nicht verwendete Speicherplatz enthält (d. h. größer StackLayout als die kombinierte Größe aller untergeordneten Elemente), wird der nicht verwendete Speicherplatz gleichermaßen von allen untergeordneten Ansichten gemeinsam genutzt, die eine Erweiterung anfordern, indem deren HorizontalOptions Eigenschaften oder VerticalOptions auf ein LayoutOptions Feld festgelegt werden, das das AndExpand Suffix verwendet. Beachten Sie, dass die Erweiterungsoptionen keine Auswirkungen haben, wenn der gesamte Platz in der StackLayout verwendet wird.

Eine StackLayout-Klasse kann Ansichten untergeordneter Elemente nur in die Orientierungsrichtung erweitern. Daher kann eine vertikal ausgerichtete StackLayout Ansicht untergeordnete Ansichten erweitern, die ihre VerticalOptions Eigenschaften auf eines der StartAndExpandFelder , CenterAndExpand, EndAndExpandoder FillAndExpand festlegen, wenn nicht StackLayout verwendeter Speicherplatz enthält. Auf ähnliche Weise kann eine horizontal ausgerichtete StackLayout Ansicht untergeordnete Ansichten erweitern, die ihre HorizontalOptions Eigenschaften auf eines der StartAndExpandFelder , CenterAndExpand, EndAndExpandoder FillAndExpand festlegen, wenn nicht StackLayout verwendeter Speicherplatz enthält.

Untergeordnete StackLayout Ansichten können nicht in der Richtung erweitert werden, die der Ausrichtung entgegengesetzt ist. Daher hat das Festlegen der HorizontalOptions -Eigenschaft in einer untergeordneten Ansicht auf eine vertikal ausgerichtete StackLayout-Eigenschaft StartAndExpand die gleiche Auswirkung wie das Festlegen der -Eigenschaft auf Start.

Hinweis

Beachten Sie, dass die Aktivierung der Erweiterung die Größe einer Ansicht nicht ändert, es sei denn, sie verwendet LayoutOptions.FillAndExpand.

Im folgenden XAML-Codebeispiel wird ein vertikal ausgerichtetes StackLayout Beispiel veranschaulicht, bei dem jedes untergeordnete Label Element seine VerticalOptions Eigenschaft auf eines der vier Erweiterungsfelder der LayoutOptions -Struktur festlegt:

<StackLayout Margin="0,20,0,0">
  ...
  <BoxView BackgroundColor="Red" HeightRequest="1" />
  <Label Text="Start" BackgroundColor="Gray" VerticalOptions="StartAndExpand" />
  <BoxView BackgroundColor="Red" HeightRequest="1" />
  <Label Text="Center" BackgroundColor="Gray" VerticalOptions="CenterAndExpand" />
  <BoxView BackgroundColor="Red" HeightRequest="1" />
  <Label Text="End" BackgroundColor="Gray" VerticalOptions="EndAndExpand" />
  <BoxView BackgroundColor="Red" HeightRequest="1" />
  <Label Text="Fill" BackgroundColor="Gray" VerticalOptions="FillAndExpand" />
  <BoxView BackgroundColor="Red" HeightRequest="1" />
</StackLayout>

Der entsprechende C#-Code ist unten dargestellt:

Content = new StackLayout
{
  Margin = new Thickness(0, 20, 0, 0),
  Children = {
    ...
    new BoxView { BackgroundColor = Color.Red, HeightRequest = 1 },
    new Label { Text = "StartAndExpand", BackgroundColor = Color.Gray, VerticalOptions = LayoutOptions.StartAndExpand },
    new BoxView { BackgroundColor = Color.Red, HeightRequest = 1 },
    new Label { Text = "CenterAndExpand", BackgroundColor = Color.Gray, VerticalOptions = LayoutOptions.CenterAndExpand },
    new BoxView { BackgroundColor = Color.Red, HeightRequest = 1 },
    new Label { Text = "EndAndExpand", BackgroundColor = Color.Gray, VerticalOptions = LayoutOptions.EndAndExpand },
    new BoxView { BackgroundColor = Color.Red, HeightRequest = 1 },
    new Label { Text = "FillAndExpand", BackgroundColor = Color.Gray, VerticalOptions = LayoutOptions.FillAndExpand },
    new BoxView { BackgroundColor = Color.Red, HeightRequest = 1 }
  }
};

Der Code führt zu dem Layout, das in den folgenden Screenshots gezeigt wird:

Erweiterungslayoutoptionen

Jede Label belegt den gleichen Speicherplatz innerhalb von StackLayout. Allerdings hat nur die letzte Label-Klasse, die ihre VerticalOptions-Eigenschaft auf FillAndExpand festlegt, eine andere Größe. Darüber hinaus ist jedes Label durch ein kleines rotes BoxViewgetrennt, wodurch der Raum, den das Label belegt, leicht zu sehen ist.

Zusammenfassung

In diesem Artikel wurde die Auswirkung erläutert, die jeder LayoutOptions Strukturwert auf die Ausrichtung und Erweiterung einer Ansicht relativ zum übergeordneten Element hat. Die StartFelder , Center, Endund Fill werden verwendet, um die Ausrichtung der Ansicht innerhalb des übergeordneten Layouts zu definieren, und die StartAndExpandFelder , CenterAndExpandEndAndExpand, und FillAndExpand werden verwendet, um die Ausrichtungseinstellung zu definieren und zu bestimmen, ob die Ansicht mehr Platz belegt, falls verfügbar, innerhalb eines StackLayout.