Tutorial sobre la cuadrícula Xamarin.Forms

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.

1. 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.

2. 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 Label en un Grid. De forma predeterminada, Grid coloca las vistas secundarias en una única ubicación. Por lo tanto, un elemento Grid que contiene varios elementos secundarios tiene que especificar columnas y filas, lo que se explicará en el próximo ejercicio. Además, la propiedad Margin indica la posición de representación del Grid en ContentPage.

   Nota

   Además de la propiedad Margin, la propiedad Padding también se puede establecer en un elemento Grid. El valor de la propiedad Padding especifica la distancia entre los límites de Grid y sus elementos secundarios. Para obtener más información, vea Márgenes y relleno.

3. 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.

Para completar este tutorial debe tener instalado Visual Studio para Mac (versión más reciente) con compatibilidad con la plataforma de iOS y Android. Además, también necesitará Xcode (versión más reciente). Para obtener más información sobre la instalación de la plataforma de Xamarin, consulte Instalación de Xamarin.

1. Inicie Visual Studio para Mac 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.

2. En el Panel de solución, 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 Label en un Grid. De forma predeterminada, Grid coloca las vistas secundarias en una única ubicación. Por lo tanto, un elemento Grid que contiene varios elementos secundarios tiene que especificar columnas y filas, lo que se explicará en el próximo ejercicio. Además, la propiedad Margin indica la posición de representación del Grid en ContentPage.

   Nota

   Además de la propiedad Margin, la propiedad Padding también se puede establecer en un elemento Grid. El valor de la propiedad Padding especifica la distancia entre las vistas en el elemento Grid. Para obtener más información, vea Márgenes y relleno.

3. En la barra de herramientas de Visual Studio para Mac, 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 de iOS elegido:

   

   Para obtener más información sobre Grid, vea Grid de Xamarin.Forms.

1. En MainPage.xaml, modifique la declaración Grid para 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 Grid y coloca las instancias de Label en columnas y filas específicas. Los datos de las columna y las filas se almacenan en las propiedades ColumnDefinitions y RowDefinitions, que son colecciones de objetos ColumnDefinition y RowDefinition, respectivamente. El ancho de cada ColumnDefinition se establece mediante la propiedad ColumnDefinition.Width y el alto de cada RowDefinition, mediante la propiedad RowDefinition.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 Label en la Grid se especifica con las propiedades adjuntas Grid.Column y Grid.Row, mediante un índice de base cero. Por lo tanto, la primera columna es la 0 y la primera fila es la 0. La primera Label carece 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 Grid se puede establecer con las propiedades ColumnSpacing y RowSpacing. Para obtener más información, consulte Espaciado en la guía Grid de Xamarin.Forms.

2. 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:

   

1. En MainPage.xaml, modifique la declaración Grid para 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 Grid y coloca las instancias de Label en columnas y filas específicas. Los datos de las columna y las filas se almacenan en las propiedades ColumnDefinitions y RowDefinitions, que son colecciones de objetos ColumnDefinition y RowDefinition, respectivamente. El ancho de cada ColumnDefinition se establece mediante la propiedad ColumnDefinition.Width y el alto de cada RowDefinition, mediante la propiedad RowDefinition.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 Label en la Grid se especifica con las propiedades adjuntas Grid.Column y Grid.Row, mediante un índice de base cero. Por lo tanto, la primera columna es la 0 y la primera fila es la 0. La primera Label carece 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 Grid se puede establecer con las propiedades ColumnSpacing y RowSpacing. Para obtener más información, consulte Espaciado en la guía Grid de Xamarin.Forms.

2. 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 para Mac, 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 de iOS elegido:

   

1. En MainPage.xaml, modifique la declaración Grid para 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 Grid y coloca las instancias de Label en columnas y filas específicas. El primer Label establece la propiedad adjunta ColumnSpan para que su texto abarque varias columnas. La propiedad ColumnSpan está establecida en 2, que representa el número de columnas que abarcará Label. El segundo Label establece la propiedad adjunta RowSpan para que su texto abarque varias filas. La propiedad RowSpan está establecida en 2, que representa el número de filas que abarcará Label.

2. 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.

1. En MainPage.xaml, modifique la declaración Grid para 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 Grid y coloca las instancias de Label en columnas y filas específicas. El primer Label establece la propiedad adjunta ColumnSpan para que su texto abarque varias columnas. La propiedad ColumnSpan está establecida en 2, que representa el número de columnas que abarcará Label. El segundo Label establece la propiedad adjunta RowSpan para que su texto abarque varias filas. La propiedad RowSpan está establecida en 2, que representa el número de filas que abarcará Label.

2. 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 para Mac, 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 de iOS elegido:

   

   En Visual Studio para Mac, 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.