Layoutoptionen inXamarin.FormsLayout Options in Xamarin.Forms

Beispiel herunterladen Herunterladen des BeispielsDownload Sample Download the sample

Jede Xamarin.Forms Ansicht verfügt über die Eigenschaften "horizontaloptions" und "verticaloptions" vom Typ "layoutoptions". In diesem Artikel werden die Auswirkungen der einzelnen layoutoptions-Werte auf die Ausrichtung und die Erweiterung einer Sicht erläutert.Every Xamarin.Forms view has HorizontalOptions and VerticalOptions properties, of type LayoutOptions. This article explains the effect that each LayoutOptions value has on the alignment and expansion of a view.

ÜbersichtOverview

Die LayoutOptions Struktur kapselt zwei Layouteinstellungen:The LayoutOptions structure encapsulates two layout preferences:

  • Ausrichtung – die bevorzugte Ausrichtung der Ansicht, die ihre Position und Größe innerhalb des übergeordneten Layouts bestimmt.Alignment – the view's preferred alignment, which determines its position and size within its parent layout.
  • Erweiterung – wird nur von einer verwendet StackLayout und gibt an, ob die Sicht zusätzlichen Speicherplatz verwenden soll, wenn Sie verfügbar ist.Expansion – used only by a StackLayout, and indicates if the view should use extra space, if it's available.

Diese Layouteinstellungen können relativ zu ihrem übergeordneten Element angewendet werden, View indem die- HorizontalOptions Eigenschaft oder die- VerticalOptions Eigenschaft des View auf eines der öffentlichen Felder aus der-Struktur festgelegt wird LayoutOptions .These layout preferences can be applied to a View, relative to its parent, by setting the HorizontalOptions or VerticalOptions property of the View to one of the public fields from the LayoutOptions structure. Die öffentlichen Felder lauten wie folgt:The public fields are as follows:

Die Start Center Felder,, End und Fill dienen zum Definieren der Ausrichtung der Ansicht innerhalb des übergeordneten Layouts:The Start, Center, End, and Fill fields are used to define the view's alignment within the parent layout:

  • Positioniert bei horizontaler Ausrichtung Start den View auf der linken Seite des übergeordneten Layouts, und bei vertikaler Ausrichtung wird der am View oberen Rand des übergeordneten Layouts positioniert.For horizontal alignment, Start positions the View on the left hand side of the parent layout, and for vertical alignment, it positions the View at the top of the parent layout.
  • Bei horizontaler und vertikaler Ausrichtung Center zentriert die horizontal oder vertikal View .For horizontal and vertical alignment, Center horizontally or vertically centers the View.
  • Positioniert bei horizontaler Ausrichtung End den View auf der rechten Seite des übergeordneten Layouts, und bei vertikaler Ausrichtung wird der am View unteren Rand des übergeordneten Layouts positioniert.For horizontal alignment, End positions the View on the right hand side of the parent layout, and for vertical alignment, it positions the View at the bottom of the parent layout.
  • Bei horizontaler Ausrichtung wird Fill von sichergestellt, dass die View Breite des übergeordneten Layouts füllt. bei vertikaler Ausrichtung wird dadurch sichergestellt, dass die View Höhe des übergeordneten Layouts füllt.For horizontal alignment, Fill ensures that the View fills the width of the parent layout, and for vertical alignment, it ensures that the View fills the height of the parent layout.

Die StartAndExpand CenterAndExpand -, EndAndExpand -,-und- FillAndExpand Werte werden verwendet, um die Ausrichtungs Einstellung zu definieren und anzugeben, ob die Ansicht mehr Platz einnimmt, wenn Sie im übergeordneten Element verfügbar ist StackLayout .The StartAndExpand, CenterAndExpand, EndAndExpand, and FillAndExpand values are used to define the alignment preference, and whether the view will occupy more space if available within the parent StackLayout.

Hinweis

Der Standardwert der Eigenschaften HorizontalOptions und VerticalOptions einer Ansicht lautet LayoutOptions.Fill.The default value of a view's HorizontalOptions and VerticalOptions properties is LayoutOptions.Fill.

AusrichtungAlignment

Ausrichtung steuert, wie eine Ansicht innerhalb des übergeordneten Layouts positioniert wird, wenn das übergeordnete Layout nicht verwendeten Platz enthält (das heißt, das übergeordnete Layout ist größer als die kombinierte Größe aller seiner untergeordneten Elemente).Alignment controls how a view is positioned within its parent layout when the parent layout contains unused space (that is, the parent layout is larger than the combined size of all its children).

Ein berücksichtigt StackLayout nur die Start Felder,, und in untergeordneten Sichten, die sich Center End Fill LayoutOptions in umgekehrter Richtung zur StackLayout Ausrichtung befinden.A StackLayout only respects the Start, Center, End, and Fill LayoutOptions fields on child views that are in the opposite direction to the StackLayout orientation. Daher können untergeordnete Sichten innerhalb eines vertikal ausgerichteten StackLayout Ihre HorizontalOptions Eigenschaften auf eines der Start Center Felder,, oder festlegen End Fill .Therefore, child views within a vertically oriented StackLayout can set their HorizontalOptions properties to one of the Start, Center, End, or Fill fields. Ebenso können untergeordnete Sichten innerhalb einer horizontalen Ausrichtung StackLayout Ihre VerticalOptions Eigenschaften auf eines der Start Center Felder,, oder festlegen End Fill .Similarly, child views within a horizontally oriented StackLayout can set their VerticalOptions properties to one of the Start, Center, End, or Fill fields.

StackLayoutDie Start Center -,-, End -und- Fill LayoutOptions Felder für untergeordnete Sichten, die die gleiche Richtung wie die Ausrichtung haben, werden von StackLayout nicht berücksichtigt.A StackLayout does not respect the Start, Center, End, and Fill LayoutOptions fields on child views that are in the same direction as the StackLayout orientation. Daher ignoriert ein vertikal orientierter StackLayout die Start Felder, Center , End oder, Fill Wenn Sie für die Eigenschaften von untergeordneten Ansichten festgelegt sind VerticalOptions .Therefore, a vertically oriented StackLayout ignores the Start, Center, End, or Fill fields if they are set on the VerticalOptions properties of child views. Analog dazu ignoriert eine horizontal ausgerichtete StackLayout die Start Center Felder,, oder, End Fill Wenn Sie für die Eigenschaften von untergeordneten Sichten festgelegt sind HorizontalOptions .Similarly, a horizontally oriented StackLayout ignores the Start, Center, End, or Fill fields if they are set on the HorizontalOptions properties of child views.

Hinweis

LayoutOptions.Fillin der Regel werden die mit den Eigenschaften und angegebenen Größenanforderungen überschrieben HeightRequest WidthRequest .LayoutOptions.Fill generally overrides size requests specified using the HeightRequest and WidthRequest properties.

Das folgende XAML-Codebeispiel veranschaulicht eine vertikale StackLayout Ausrichtung, bei der jedes untergeordnete Element Label seine- HorizontalOptions Eigenschaft auf eines der vier Ausrichtungs Felder aus der- LayoutOptions Struktur festlegt:The following XAML code example demonstrates a vertically oriented StackLayout where each child Label sets its HorizontalOptions property to one of the four alignment fields from the LayoutOptions structure:

<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 wird unten dargestellt:The equivalent C# code is shown below:

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 angezeigt wird:The code results in the layout shown in the following screenshots:

Ausrichtungs Layout-OptionenAlignment Layout Options

ErweiterungExpansion

Erweiterung steuert, ob eine Ansicht in einer mehr Speicherplatz einnimmt (falls verfügbar) StackLayout .Expansion controls whether a view will occupy more space, if available, within a StackLayout. Wenn der StackLayout nicht verwendeten Speicherplatz enthält (d. h., StackLayout ist größer als die kombinierte Größe aller seiner untergeordneten Elemente), wird der nicht verwendete Speicherplatz gleichmäßig von allen untergeordneten Sichten gemeinsam genutzt, die eine Erweiterung anfordern, indem die-Eigenschaft HorizontalOptions oder die-Eigenschaft VerticalOptions auf ein LayoutOptions Feld mit dem- AndExpand SuffixIf the StackLayout contains unused space (that is, the StackLayout is larger than the combined size of all of its children), the unused space is shared equally by all child views that request expansion by setting their HorizontalOptions or VerticalOptions properties to a LayoutOptions field that uses the AndExpand suffix. Beachten Sie, dass StackLayout die Erweiterungsoptionen keine Auswirkung haben, wenn der gesamte Speicherplatz in der verwendet wird.Note that when all the space in the StackLayout is used, the expansion options have no effect.

Eine StackLayout-Klasse kann Ansichten untergeordneter Elemente nur in die Orientierungsrichtung erweitern.A StackLayout can only expand child views in the direction of its orientation. Aus diesem Grund kann ein vertikal orientierter StackLayout untergeordnete Sichten erweitern, deren VerticalOptions Eigenschaften auf eines der StartAndExpand Felder,, oder festgelegt CenterAndExpand EndAndExpand FillAndExpand werden, wenn der nicht StackLayout verwendeten Speicherplatz enthält.Therefore, a vertically oriented StackLayout can expand child views that set their VerticalOptions properties to one of the StartAndExpand, CenterAndExpand, EndAndExpand, or FillAndExpand fields, if the StackLayout contains unused space. Auf ähnliche Weise kann eine horizontal ausgerichtete StackLayout untergeordnete Sichten erweitern, die Ihre HorizontalOptions Eigenschaften auf eines StartAndExpand der CenterAndExpand Felder,, EndAndExpand oder festlegen FillAndExpand , wenn der nicht StackLayout verwendeten Speicherplatz enthält.Similarly, a horizontally oriented StackLayout can expand child views that set their HorizontalOptions properties to one of the StartAndExpand, CenterAndExpand, EndAndExpand, or FillAndExpand fields, if the StackLayout contains unused space.

Ein StackLayout kann untergeordnete Sichten nicht in der Richtung erweitern, die der Ausrichtung entspricht.A StackLayout can't expand child views in the direction opposite to its orientation. Daher hat das Festlegen der-Eigenschaft in einer untergeordneten Ansicht auf eine vertikale Ausrichtung StackLayout HorizontalOptions StartAndExpand denselben Effekt wie das Festlegen der-Eigenschaft auf Start .Therefore, on a vertically oriented StackLayout, setting the HorizontalOptions property on a child view to StartAndExpand has the same effect as setting the property to Start.

Hinweis

Beachten Sie, dass durch das Aktivieren der Erweiterung die Größe einer Ansicht nur geändert wird, wenn Sie verwendet wird LayoutOptions.FillAndExpand .Note that enabling expansion doesn't change the size of a view unless it uses LayoutOptions.FillAndExpand.

Das folgende XAML-Codebeispiel veranschaulicht eine vertikale Ausrichtung StackLayout , bei der jedes untergeordnete Element Label seine- VerticalOptions Eigenschaft auf eines der vier Erweiterungs Felder aus der- LayoutOptions Struktur festlegt:The following XAML code example demonstrates a vertically oriented StackLayout where each child Label sets its VerticalOptions property to one of the four expansion fields from the LayoutOptions structure:

<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 wird unten dargestellt:The equivalent C# code is shown below:

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 angezeigt wird:The code results in the layout shown in the following screenshots:

Erweiterungs Layout-OptionenExpansion Layout Options

Jede Label beansprucht die gleiche Menge an Speicherplatz in StackLayout .Each Label occupies the same amount of space within the StackLayout. Allerdings hat nur die letzte Label-Klasse, die ihre VerticalOptions-Eigenschaft auf FillAndExpand festlegt, eine andere Größe.However, only the final Label, which sets its VerticalOptions property to FillAndExpand has a different size. Darüber hinaus wird jeder Label durch einen kleinen roten getrennt BoxView , wodurch der Platz, den die Label einnimmt, problemlos angezeigt werden kann.In addition, each Label is separated by a small red BoxView, which enables the space the Label occupies to be easily viewed.

ZusammenfassungSummary

In diesem Artikel wurde erläutert, wie sich jeder LayoutOptions Struktur Wert auf die Ausrichtung und Erweiterung einer Ansicht bezieht, relativ zum übergeordneten Element.This article explained the effect that each LayoutOptions structure value has on the alignment and expansion of a view, relative to its parent. Die Start Center Felder,, End und Fill werden verwendet, um die Ausrichtung der Ansicht innerhalb des übergeordneten Layouts zu definieren. StartAndExpand die CenterAndExpand Felder,, EndAndExpand und FillAndExpand werden verwendet, um die Ausrichtungs Einstellung zu definieren und um zu bestimmen, ob die Ansicht in einer mehr Speicherplatz einnimmt (falls verfügbar) StackLayout .The Start, Center, End, and Fill fields are used to define the view's alignment within the parent layout, and the StartAndExpand, CenterAndExpand, EndAndExpand, and FillAndExpand fields are used to define the alignment preference, and to determine whether the view will occupy more space, if available, within a StackLayout.