Layoutoptionen in Xamarin.Forms
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
-HorizontalOptions
Eigenschaft von View
auf eines der öffentlichen Felder der LayoutOptions
-Struktur festgelegt wird. Die öffentlichen Felder sind wie folgt:
Die Start
Felder , Center
, End
und Fill
werden verwendet, um die Ausrichtung der Ansicht innerhalb des übergeordneten Layouts zu definieren:
- Positioniert für die horizontale Ausrichtung
Start
dieView
auf der linken Seite des übergeordneten Layouts, und für die vertikale Ausrichtung positioniert es amView
oberen Rand des übergeordneten Layouts. - Für die horizontale und vertikale Ausrichtung
Center
zentriert derView
horizontal oder vertikal. - Positioniert für die horizontale Ausrichtung
End
dieView
auf der rechten Seite des übergeordneten Layouts, und für die vertikale Ausrichtung positioniert er amView
unteren Rand des übergeordneten Layouts. - Stellt für die horizontale Ausrichtung sicher,
Fill
dass dieView
die Breite des übergeordneten Layouts ausfüllt, und bei vertikaler Ausrichtung wird sichergestellt, dass dieView
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 StackLayout
verfü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 Start
Felder , Center
, End
und Fill
LayoutOptions
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 Start
Felder , Center
, End
oder Fill
festlegen. Auf ähnliche Weise können untergeordnete Ansichten innerhalb einer horizontal ausgerichteten StackLayout
Ansicht ihre VerticalOptions
Eigenschaften auf eines der Start
Felder , Center
, End
oder Fill
festlegen.
A StackLayout
berücksichtigt die Start
Felder , Center
, End
und Fill
LayoutOptions
in untergeordneten Ansichten, die sich in derselben Richtung wie die StackLayout
Ausrichtung befinden, nicht. Daher ignoriert ein vertikal ausgerichtetes StackLayout
die Start
Felder , Center
, End
oder Fill
, wenn sie für die VerticalOptions
Eigenschaften untergeordneter Ansichten festgelegt sind. Ebenso ignoriert ein horizontal ausgerichtetes StackLayout
Start
Die Felder , Center
, End
oder 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:
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 StartAndExpand
Felder , CenterAndExpand
, EndAndExpand
oder 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 StartAndExpand
Felder , CenterAndExpand
, EndAndExpand
oder 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:
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 BoxView
getrennt, 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 Start
Felder , Center
, End
und Fill
werden verwendet, um die Ausrichtung der Ansicht innerhalb des übergeordneten Layouts zu definieren, und die StartAndExpand
Felder , CenterAndExpand
EndAndExpand
, und FillAndExpand
werden verwendet, um die Ausrichtungseinstellung zu definieren und zu bestimmen, ob die Ansicht mehr Platz belegt, falls verfügbar, innerhalb eines StackLayout
.