Tutorial sobre StackLayout Xamarin.Forms
Antes de intentar este tutorial, debe haber completado correctamente lo siguiente:
- Inicio rápido Compilación de la primera aplicación de Xamarin.Forms.
En este tutorial, aprenderá a:
- Crear Xamarin.Forms
StackLayouten XAML. - Especificar la orientación del elemento
StackLayout. - Controlar la alineación y expansión de las vistas secundarias y dentro del elemento
StackLayout.
Va a usar Visual Studio 2019, o Visual Studio para Mac, para crear una aplicación sencilla que demuestre cómo alinear controles dentro de un StackLayout. En las capturas de pantalla siguientes se muestra la aplicación final:
También usará la Recarga activa de XAML para Xamarin.Forms para ver cambios en la UI sin tener que volver a compilar su aplicación.
Creación de un diseño de pila
Las vistas StackLayout son un diseño que permite organizar los elementos secundarios en una pila unidimensional, ya sea horizontal o verticalmente. De forma predeterminada, las vistas StackLayout están orientadas verticalmente.
Para completar este tutorial debe tener Visual Studio 2019 (versión más reciente), con la carga de trabajo Desarrollo para dispositivos móviles con .NET instalada. Además, necesita un equipo Mac emparejado para compilar la aplicación del tutorial en iOS. Para obtener información sobre la instalación de la plataforma de Xamarin, consulte Instalación de Xamarin. Para obtener información sobre cómo conectar Visual Studio 2019 a un host de compilación de Mac, consulte Emparejar con Mac para el desarrollo de Xamarin.iOS.
Inicie Visual Studio y cree una aplicación de Xamarin.Forms en blanco llamada StackLayoutTutorial.
Importante
Los fragmentos de código de C# y XAML en este tutorial necesitan que la solución se denomine StackLayoutTutorial. El uso de otro nombre dará como resultado errores de compilación al copiar el código de este tutorial en la solución.
Para obtener más información sobre la biblioteca de .NET Standard creada, vea Anatomía de una aplicación de Xamarin.Forms en Análisis detallado de inicio rápido de Xamarin.Forms.
En el Explorador de soluciones, en el proyecto StackLayoutTutorial, haga doble clic en MainPage.xaml para abrirlo. Después, en MainPage.xaml, quite todo el código de plantilla y sustitúyalo por el código siguiente:
<?xml version="1.0" encoding="utf-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="StackLayoutTutorial.MainPage"> <StackLayout Margin="20,35,20,25"> <Label Text="The StackLayout has its Margin property set, to control the rendering position of the StackLayout." /> <Label Text="The Padding property can be set to specify the distance between the StackLayout and its children." /> <Label Text="The Spacing property can be set to specify the distance between views in the StackLayout." /> </StackLayout> </ContentPage>Este código define mediante declaración la interfaz de usuario de la página, que consiste en tres instancias de
Labelen unStackLayout. El elementoStackLayoutcoloca sus vistas secundarias (las instancias deLabel) en una misma línea, que tiene de forma predeterminada una orientación vertical. Además, la propiedadMarginindica la posición de representación delStackLayoutenContentPage.Nota
Además de la propiedad
Margin, las propiedadesPaddingySpacingtambién se pueden establecer en un elementoStackLayout. El valor de la propiedadPaddingespecifica la distancia entre las vistas enStackLayout, mientras que el valor de la propiedadSpacingespecifica la cantidad de espacio entre cada elemento secundario deStackLayout. Para obtener más información, vea Márgenes y relleno.En la barra de herramientas de Visual Studio, pulse el botón Iniciar (el botón triangular similar a un botón de reproducción) para iniciar la aplicación en Android Emulator o en el simulador remoto de iOS elegido:
Para obtener más información sobre la clase
StackLayout, consulte StackLayoutXamarin.Forms.
Especificación de la orientación
En MainPage.xaml, modifique la declaración de
StackLayoutde modo que alinee sus elementos secundarios en horizontal, en lugar de en vertical:<StackLayout Margin="20,35,20,25" Orientation="Horizontal"> <Label Text="The StackLayout has its Margin property set, to control the rendering position of the StackLayout." /> <Label Text="The Padding property can be set to specify the distance between the StackLayout and its children." /> <Label Text="The Spacing property can be set to specify the distance between views in the StackLayout." /> </StackLayout>Este código establece la propiedad
OrientationenHorizontal.Si la aplicación se sigue ejecutando, guarde los cambios hechos al archivo, y la interfaz de usuario de la aplicación se actualizará automáticamente en su simulador o emulador. De lo contrario, en la barra de herramientas de Visual Studio, presione el botón Iniciar (el botón triangular similar a un botón de reproducción) para iniciar la aplicación en Android Emulator o en el simulador remoto de iOS elegido:
Fíjese en que las instancias
Labeldentro deStackLayoutahora están alineadas horizontalmente, en lugar de verticalmente.
Control de la alineación y la expansión
El tamaño y la posición de las vistas secundarias dentro de un elemento StackLayout dependen de los valores de las propiedades HeightRequest y WidthRequest de las vistas secundarias, y de los valores de las propiedades HorizontalOptions y VerticalOptions.
Las propiedades HorizontalOptions y VerticalOptions se pueden establecer en los campos de la estructura LayoutOptions, que encapsula dos preferencias de diseño:
- Alineación: indica la alineación preferida de la vista secundaria, que determina su posición y su tamaño en el diseño principal.
- Expansión: indica si la vista secundaria debe usar espacio adicional, en caso de que esté disponible (solo lo usa
StackLayout).
En MainPage.xaml, modifique la declaración
StackLayoutpara establecer las opciones de alineación y expansión para cadaLabel:<StackLayout Margin="20,35,20,25"> <Label Text="Start" HorizontalOptions="Start" BackgroundColor="Gray" /> <Label Text="Center" HorizontalOptions="Center" BackgroundColor="Gray" /> <Label Text="End" HorizontalOptions="End" BackgroundColor="Gray" /> <Label Text="Fill" HorizontalOptions="Fill" BackgroundColor="Gray" /> <Label Text="StartAndExpand" VerticalOptions="StartAndExpand" BackgroundColor="Gray" /> <Label Text="CenterAndExpand" VerticalOptions="CenterAndExpand" BackgroundColor="Gray" /> <Label Text="EndAndExpand" VerticalOptions="EndAndExpand" BackgroundColor="Gray" /> <Label Text="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="Gray" /> </StackLayout>Este código establece las preferencias de alineación de las cuatro primeras instancias de
Labely las preferencias de expansión de las cuatro últimas instancias deLabel. Los camposStart,Center,EndyFillse usan para definir la alineación de las instancias deLabelen elStackLayoutprimario. Los camposStartAndExpand,CenterAndExpand,EndAndExpandyFillAndExpandse usan para definir la preferencia de alineación y para indicar si la vista ocupará más espacio, en caso de que esté disponible en elStackLayoutprimario.Nota:
El valor predeterminado de las propiedades
HorizontalOptionsyVerticalOptionsde una vista esFill.Si la aplicación se sigue ejecutando, guarde los cambios hechos al archivo, y la interfaz de usuario de la aplicación se actualizará automáticamente en su simulador o emulador. De lo contrario, en la barra de herramientas de Visual Studio, presione el botón Iniciar (el botón triangular similar a un botón de reproducción) para iniciar la aplicación en Android Emulator o en el simulador remoto de iOS elegido:
Un elemento
StackLayoutsolo respeta las preferencias de alineación de las vistas secundarias que tienen la dirección opuesta a la orientación delStackLayout. Por lo tanto, las vistas secundarias deLabeldentro delStackLayoutcon orientación vertical establecen sus propiedadesHorizontalOptionsen uno de los campos de alineación siguientes:Start, que colocaLabelen el lado izquierdo delStackLayout.Center, que centraLabelen elStackLayout.End, que colocaLabelen el lado derecho delStackLayout.Fill, que garantiza queLabelllena el ancho delStackLayout.
Un elemento
StackLayoutsolo puede expandir las vistas secundarias en la dirección de su orientación. Por lo tanto, unStackLayoutcon orientación vertical puede expandir las vistas secundarias deLabelque establecen sus propiedadesVerticalOptionsen uno de los campos de alineación. Esto significa que, para la alineación vertical, cadaLabelocupa la misma cantidad de espacio en elStackLayout. Aun así, solo el último elementoLabel, que establece su propiedadVerticalOptionsenFillAndExpand, tiene un tamaño diferente.Importante
Cuando se usa todo el espacio de un elemento
StackLayout, las preferencias de expansión no tienen ningún efecto.En Visual Studio, detenga la aplicación.
Para obtener más información sobre la alineación y la expansión, consulte Opciones de diseño de Xamarin.Forms.
¡Enhorabuena!
Ha completado el tutorial, donde ha aprendido a:
- Crear Xamarin.Forms
StackLayouten XAML. - Especificar la orientación del elemento
StackLayout. - Controlar la alineación y expansión de las vistas secundarias y dentro del elemento
StackLayout.
Pasos siguientes
Para obtener más información sobre los conceptos básicos de creación de aplicaciones móviles con Xamarin.Forms, continúe al tutorial sobre etiquetas.
Vínculos relacionados
¿Tiene algún problema con esta sección? Si es así, envíenos sus comentarios para que podamos mejorarla.