Was ist der Unterschied zwischen Xamarin.Forms LayoutOptions, insbesondere Fill and Expand?

Kurze Antwort

Start, Center, End und Fill definieren die Ausrichtung der Ansicht innerhalb ihres Raums .

Expand definiert , ob mehr Platz belegt wird , falls verfügbar.

Theorie

Die Struktur LayoutOptions steuert zwei unterschiedliche Verhaltensweisen:

1. Ausrichtung: Wie ist die Ansicht in der übergeordneten Ansicht ausgerichtet?

   • Start: Bei vertikaler 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 Spracheinstellung von rechts nach links umgekehrt ist, d. H. 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 unterscheidet sich geringfügig. 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 von Bedeutung, wenn zusätzlicher Speicherplatz verfügbar ist.

2. Erweiterung: Wird das Element, falls verfügbar, mehr Platz belegen?

   • Suffix Expand: Wenn die übergeordnete Ansicht größer ist als die Gesamtgröße aller untergeordneten Ansichten, d. H. Zusätzlicher Speicherplatz verfügbar ist, wird der Speicherplatz unter den untergeordneten Ansichten mit diesem Suffix proportionalisiert. Diese Kinder "belegen" ihren Platz, "füllen" ihn aber nicht unbedingt. Wir werden uns dieses Verhalten im folgenden Beispiel ansehen.
   • Kein Suffix: Die untergeordneten Elemente ohne das Suffix Expand erhalten keinen zusätzlichen Speicherplatz, auch wenn mehr Speicherplatz verfügbar ist.

   Auch hier macht das Erweiterungssuffix keinen Unterschied, wenn die übergeordnete Ansicht nicht größer als die untergeordneten Ansichten ist.

Beispiel

Schauen wir uns das folgende Beispiel an, um den Unterschied zwischen allen acht Layoutoptionen zu erkennen.

Die App enthält ein dunkelgraues StackLayout mit acht verschachtelten weißen Tasten, von denen jede mit ihrer vertikalen Layoutoption beschriftet ist. Wenn Sie auf eine der Schaltflächen klicken, wird dem Stapel-Layout die Option für das vertikale Layout zugewiesen. Auf diese Weise können wir auf einfache Weise die Interaktion von Ansichten mit Eltern 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 die acht Schaltflächen klicken. Wir machen die folgenden Beobachtungen:

• Solange das übergeordnete stackLayout eng ist (nicht Fill die Seite), ist die vertikale Layoutoption jedes Button vernachlässigbar.
• Die vertikale Layoutoption ist nur von Bedeutung, wenn das stackLayout größer ist (z. B. über die Ausrichtung Fill) und die einzelnen Schaltflächen das Suffix Expand haben.
• Zusätzlicher Platz wird eventuell unter allen Schaltflächen mit dem Suffix Expand aufgeteilt. 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. Z.B. Sie sind 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 das VerticalOptions ändern.

Hier finden Sie die entsprechenden hochauflösenden Screenshots.