c# - stacklayout - ¿Cuál es la diferencia entre LayoutOptions de Xamarin.Form, especialmente Fill and Expand?

xamarin stacklayout horizontal xaml

Question

En Xamarin.Forms cada View tiene las dos propiedades HorizontalOptions y VerticalOptions . Ambos son de tipo LayoutOptions y pueden tener uno de los siguientes valores:

• LayoutOptions.Start
• LayoutOptions.Center
• LayoutOptions.End
• LayoutOptions.Fill
• LayoutOptions.StartAndExpand
• LayoutOptions.CenterAndExpand
• LayoutOptions.EndAndExpand
• LayoutOptions.FillAndExpand

Aparentemente, controla la alineación de la vista en la vista principal. ¿Pero cómo exactamente es el comportamiento de cada opción individual? ¿Y cuál es la diferencia entre Fill y el sufijo Expand ?

Answer 1

Respuesta corta

Start , Center , End y Fill definen la alineación de la vista dentro de su espacio .

Expand define si ocupa más espacio si está disponible.

Teoría

La estructura LayoutOptions controla dos comportamientos distintos:

1. Alineación: ¿Cómo se alinea la vista dentro de la vista principal?

   • Start : para la alineación vertical, la vista se mueve hacia la parte superior. Para la alineación horizontal, este suele ser el lado izquierdo. (Pero tenga en cuenta que en dispositivos con configuración de idioma de derecha a izquierda esto es al revés, es decir, alineado a la derecha).
   • Center : la vista está centrada.
   • End : por lo general, la vista está alineada en la parte inferior o derecha. (En los idiomas de derecha a izquierda, por supuesto, alineado a la izquierda).
   • Fill : esta alineación es ligeramente diferente. La vista se extenderá en todo el tamaño de la vista principal.

   Si el padre, sin embargo, no es más grande que sus hijos, no notará ninguna diferencia entre esas alineaciones. La alineación solo es importante para las vistas de los padres con espacio adicional disponible.

2. Expansión: ¿El elemento ocupará más espacio si está disponible?

   • Sufijo Expand : si la vista principal es más grande que el tamaño combinado de todos sus elementos secundarios, es decir, hay espacio adicional disponible, entonces el espacio se dosifica entre las vistas secundarias con ese sufijo. Esos niños "ocuparán" su espacio, pero no necesariamente "lo llenarán". Echaremos un vistazo a este comportamiento en el siguiente ejemplo.
   • Sin sufijo: los niños sin sufijo Expand no obtendrán espacio adicional, incluso si hay más espacio disponible.

   Nuevamente, si la vista principal no es más grande que sus elementos secundarios, el sufijo de expansión tampoco hace ninguna diferencia.

Ejemplo

Echemos un vistazo al siguiente ejemplo para ver la diferencia entre las ocho opciones de diseño.

La aplicación contiene un StackLayout gris StackLayout con ocho botones blancos anidados, cada uno de los cuales está etiquetado con su opción de diseño vertical. Al hacer clic en uno de los botones, asigna su opción de diseño vertical al diseño de la pila. De esta forma, podemos probar fácilmente la interacción de vistas con los padres, ambos con diferentes opciones de diseño.

(Las últimas líneas de código agregan cuadros amarillos adicionales. Volveremos sobre esto en un momento).

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,
        });
    }
}

Las siguientes capturas de pantalla muestran el resultado al hacer clic en cada uno de los ocho botones. Nosotros hacemos las siguientes observaciones:

• Siempre que el stackLayout padre esté ajustado (no Fill la página), la opción de diseño vertical de cada Button es insignificante.
• La opción de diseño vertical solo importa si el stackLayout es más grande (por ejemplo, a través de la alineación de Fill ) y los botones individuales tienen el sufijo Expand .
• El espacio adicional es eventualmente proporcionado entre todos los botones con sufijo Expand . Para ver esto más claramente, agregamos líneas horizontales amarillas entre cada dos botones contiguos.
• Los botones con más espacio que su altura solicitada no necesariamente "llenan". En este caso, el comportamiento real está controlado por su alineación. Por ejemplo, están alineados en la parte superior, central o botón de su espacio o lo rellenan por completo.
• Todos los botones abarcan todo el ancho del diseño, ya que solo modificamos VerticalOptions .

Aquí encontrará las capturas de pantalla de alta resolución correspondientes.

Answer 2

Hay un pequeño error en la versión actual de Xamarin.Forms; tal vez ha estado allí un tiempo.

CenterAndExpand general, CenterAndExpand no se expande, y trabajar a su alrededor puede ser confuso.

Por ejemplo, si tiene un StackLayout establecido en CenterAndExpand , entonces coloca una etiqueta dentro que también se establece en CenterAndExpand y esperaría una etiqueta que tenga el ancho completo de StackLayout . Nop. No se expandirá. StackLayout establecer StackLayout en " FillAndExpand " para que el objeto Label anidado se expanda al ancho completo de StackLayout , luego diga a la etiqueta que centre el texto, no como un objeto, con HorizontalTextAlignment="Center" . En mi experiencia, necesita que el padre y el hijo anidado se configuren en FillAndExpand si realmente quiere asegurarse de que se expanda para que quepa.

        <StackLayout HorizontalOptions="FillAndExpand"
                     Orientation="Vertical"
                     WidthRequest="300">
            <Label BackgroundColor="{StaticResource TileAlerts}"
                   HorizontalOptions="FillAndExpand"
                   Style="{StaticResource LabelStyleReversedLrg}"
                   HorizontalTextAlignment="Center"
                   Text="Alerts" />