Tutorial sobre la cuadrícula 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
Griden XAML. - Especificar columnas y filas de la
Grid. - Distribuir contenido en varias columnas o varias filas en la
Grid.
Va a usar Visual Studio 2019, o Visual Studio para Mac, para crear una aplicación sencilla que demuestre cómo diseñar controles dentro de un Grid. 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 la aplicación.
Creación de una cuadrícula
Las vistas Grid son un diseño que permite organizar los elementos secundarios en filas y columnas, que pueden tener tamaños proporcionales o absolutos. De forma predeterminada, las vistas Grid contienen una fila y una columna.
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 GridTutorial.
Importante
Los fragmentos de código de C# y XAML en este tutorial necesitan que la solución se denomine GridTutorial. 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 GridTutorial, 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="GridTutorial.MainPage"> <Grid Margin="20,35,20,20"> <Label Text="The Grid has its Margin property set, to control the rendering position of the Grid." /> </Grid> </ContentPage>Este código define mediante declaración la interfaz de usuario de la página, que consiste en un objeto
Labelen unGrid. De forma predeterminada,Gridcoloca las vistas secundarias en una única ubicación. Por lo tanto, un elementoGridque contiene varios elementos secundarios tiene que especificar columnas y filas, lo que se explicará en el próximo ejercicio. Además, la propiedadMarginindica la posición de representación delGridenContentPage.Nota
Además de la propiedad
Margin, la propiedadPaddingtambién se puede establecer en un elementoGrid. El valor de la propiedadPaddingespecifica la distancia entre los límites deGridy sus elementos secundarios. 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
Grid, vea Grid de Xamarin.Forms.
Especificación de columnas y filas
En MainPage.xaml, modifique la declaración
Gridpara definir columnas y filas, y coloque el contenido en las columnas y filas:<Grid Margin="20,35,20,20"> <Grid.ColumnDefinitions> <ColumnDefinition Width="0.5*" /> <ColumnDefinition Width="0.5*" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="50" /> <RowDefinition Height="50" /> </Grid.RowDefinitions> <Label Text="Column 0, Row 0" /> <Label Grid.Column="1" Text="Column 1, Row 0" /> <Label Grid.Row="1" Text="Column 0, Row 1" /> <Label Grid.Column="1" Grid.Row="1" Text="Column 1, Row 1" /> </Grid>Este código define las columnas y filas de
Gridy coloca las instancias deLabelen columnas y filas específicas. Los datos de las columna y las filas se almacenan en las propiedadesColumnDefinitionsyRowDefinitions, que son colecciones de objetosColumnDefinitionyRowDefinition, respectivamente. El ancho de cadaColumnDefinitionse establece mediante la propiedadColumnDefinition.Widthy el alto de cadaRowDefinition, mediante la propiedadRowDefinition.Height. Los valores de anchura y altura válidos son:Auto, que cambia el tamaño de la columna o la fila para que se ajuste al contenido.- Valores proporcionales, que cambian el tamaño de las columnas y las filas como una proporción del espacio restante. Los valores proporcionales se indican con un
*al final. - Valores absolutos, que cambian el tamaño de las columnas o las filas con valores específicos y fijos.
Por lo tanto, en el código anterior, cada columna tiene un ancho de la mitad de
Grid, mientras que cada fila tiene un alto de 50 unidades independientes del dispositivo.La posición de cada
Labelen laGridse especifica con las propiedades adjuntasGrid.ColumnyGrid.Row, mediante un índice de base cero. Por lo tanto, la primera columna es la 0 y la primera fila es la 0. La primeraLabelcarece de estas propiedades adjuntas porque cualquier vista secundaria que no las establezca se representará automáticamente en la columna 0, fila 0.Nota
El espaciado entre columnas y filas en una
Gridse puede establecer con las propiedadesColumnSpacingyRowSpacing. Para obtener más información, consulte Espaciado en la guía Grid de Xamarin.Forms.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:
Presentación de varias columnas o filas
En MainPage.xaml, modifique la declaración
Gridpara definir columnas y filas y coloque el contenido que abarca las columnas y filas:<Grid Margin="20,35,20,20"> <Grid.ColumnDefinitions> <ColumnDefinition Width="0.5*" /> <ColumnDefinition Width="0.5*" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="50" /> <RowDefinition Height="30" /> <RowDefinition Height="30" /> </Grid.RowDefinitions> <Label Grid.ColumnSpan="2" Text="This text uses the ColumnSpan property to span both columns." /> <Label Grid.Row="1" Grid.RowSpan="2" Text="This text uses the RowSpan property to span two rows." /> </Grid>Este código define las columnas y filas de
Gridy coloca las instancias deLabelen columnas y filas específicas. El primerLabelestablece la propiedad adjuntaColumnSpanpara que su texto abarque varias columnas. La propiedadColumnSpanestá establecida en 2, que representa el número de columnas que abarcaráLabel. El segundoLabelestablece la propiedad adjuntaRowSpanpara que su texto abarque varias filas. La propiedadRowSpanestá establecida en 2, que representa el número de filas que abarcaráLabel.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, 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:
En Visual Studio, detenga la aplicación.
Para obtener más información sobre la extensión de columnas y filas, vea la sección Filas y columnas de la guía Grid de Xamarin.Forms.
¡Enhorabuena!
Ha completado el tutorial, donde ha aprendido a:
- Crear Xamarin.Forms
Griden XAML. - Especificar columnas y filas de la
Grid. - Distribuir contenido en varias columnas o varias filas en la
Grid.
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 con el tutorial sobre CollectionView.
Vínculos relacionados
¿Tiene algún problema con esta sección? Si es así, envíenos sus comentarios para que podamos mejorarla.