Kurze Antwort
Start, Center, EndUnd Filldie Ansicht definieren Ausrichtung innerhalb seines Raumes .
Expanddefiniert, ob es mehr Platz einnimmt, falls verfügbar.
Theorie
Die Struktur LayoutOptionssteuert zwei unterschiedliche Verhaltensweisen:
Ausrichtung: Wie ist die Ansicht in der übergeordneten Ansicht ausgerichtet?
Start: Zur vertikalen Ausrichtung wird die Ansicht nach oben verschoben. Bei horizontaler Ausrichtung ist dies normalerweise die linke Seite. (Beachten Sie jedoch, dass dies bei Geräten mit einer Spracheinstellung von rechts nach links umgekehrt ist, dh rechtsbündig.)Center: Die Ansicht ist zentriert.End: Normalerweise ist die Ansicht unten oder rechts ausgerichtet. (Bei Sprachen von rechts nach links natürlich linksbündig.)Fill: Diese Ausrichtung ist etwas anders. Die Ansicht erstreckt sich über die gesamte Größe der übergeordneten Ansicht.
Wenn das übergeordnete Element jedoch nicht größer als die untergeordneten Elemente ist, werden Sie keinen Unterschied zwischen diesen Ausrichtungen feststellen. Die Ausrichtung ist nur für übergeordnete Ansichten mit zusätzlichem verfügbaren Speicherplatz von Bedeutung.
Erweiterung: Wird das Element mehr Platz einnehmen, falls verfügbar?
- Suffix
Expand : Wenn die übergeordnete Ansicht größer ist als die kombinierte Größe aller untergeordneten Ansichten, dh zusätzlicher Speicherplatz verfügbar ist, wird der Speicherplatz unter den untergeordneten Ansichten mit diesem Suffix aufgeteilt. Diese Kinder "besetzen" ihren Raum, "füllen" ihn aber nicht unbedingt. Wir werden uns dieses Verhalten im folgenden Beispiel ansehen.
- Kein Suffix: Die Kinder ohne
ExpandSuffix erhalten keinen zusätzlichen Speicherplatz, selbst wenn mehr Speicherplatz verfügbar ist.
Wenn die übergeordnete Ansicht nicht größer als die untergeordneten ist, macht das Erweiterungssuffix ebenfalls keinen Unterschied.
Beispiel
Schauen wir uns das folgende Beispiel an, um den Unterschied zwischen allen acht Layoutoptionen zu sehen.
Die App enthält ein Dunkelgrau StackLayoutmit acht verschachtelten weißen Schaltflächen, von denen jede mit ihrer vertikalen Layoutoption gekennzeichnet ist. Wenn Sie auf eine der Schaltflächen klicken, wird dem Stapellayout die Option für das vertikale Layout zugewiesen. Auf diese Weise können wir die Interaktion von Ansichten mit Eltern auf einfache Weise testen, beide mit unterschiedlichen Layoutoptionen.
(In den letzten Codezeilen werden zusätzliche gelbe Kästchen hinzugefügt. Wir werden gleich darauf zurückkommen.)
public static class App
{
static readonly StackLayout stackLayout = new StackLayout {
BackgroundColor = Color.Gray,
VerticalOptions = LayoutOptions.Start,
Spacing = 2,
Padding = 2,
};
public static Page GetMainPage()
{
AddButton("Start", LayoutOptions.Start);
AddButton("Center", LayoutOptions.Center);
AddButton("End", LayoutOptions.End);
AddButton("Fill", LayoutOptions.Fill);
AddButton("StartAndExpand", LayoutOptions.StartAndExpand);
AddButton("CenterAndExpand", LayoutOptions.CenterAndExpand);
AddButton("EndAndExpand", LayoutOptions.EndAndExpand);
AddButton("FillAndExpand", LayoutOptions.FillAndExpand);
return new NavigationPage(new ContentPage {
Content = stackLayout,
});
}
static void AddButton(string text, LayoutOptions verticalOptions)
{
stackLayout.Children.Add(new Button {
Text = text,
BackgroundColor = Color.White,
VerticalOptions = verticalOptions,
HeightRequest = 20,
Command = new Command(() => {
stackLayout.VerticalOptions = verticalOptions;
(stackLayout.ParentView as Page).Title = "StackLayout: " + text;
}),
});
stackLayout.Children.Add(new BoxView {
HeightRequest = 1,
Color = Color.Yellow,
});
}
}
Die folgenden Screenshots zeigen das Ergebnis, wenn Sie auf eine der acht Schaltflächen klicken. Wir machen folgende Beobachtungen:
- Solange das übergeordnete
stackLayoutElement eng ist (nicht Filldie Seite), wird jeweils die vertikale Layoutoption verwendetButton Element vernachlässigbar.
- Die vertikale Layoutoption ist nur wichtig, wenn die
stackLayoutgrößer ist (z. B. durch FillAusrichtung) und die einzelnen Schaltflächen das ExpandSuffix haben.
- Zusätzlicher Platz wird offensichtlich auf alle Schaltflächen mit
ExpandSuffix verteilt. Um dies deutlicher zu sehen, haben wir zwischen jeweils zwei benachbarten Schaltflächen gelbe horizontale Linien eingefügt.
- Schaltflächen mit mehr Platz als der gewünschten Höhe "füllen" sie nicht unbedingt aus. In diesem Fall wird das tatsächliche Verhalten durch ihre Ausrichtung gesteuert. ZB sind sie entweder oben, in der Mitte oder auf der Schaltfläche ihres Bereichs ausgerichtet oder füllen ihn vollständig aus.
- Alle Schaltflächen erstrecken sich über die gesamte Breite des Layouts, da wir nur die ändern
VerticalOptions.
Hier finden Sie die entsprechenden hochauflösenden Screenshots.
