Xamarin.Forms Tutorial de grade

Artigo
Developer (Iniciante)
9 minutos para concluir

Antes de tentar realizar este tutorial, você deve ter concluído com sucesso:

Crie seu primeiro Xamarin.Forms aplicativo de início rápido.

Neste tutorial, você aprenderá a:

Crie um Xamarin.FormsGrid em XAML.
Especificar colunas e linhas para Grid.
Distribuir o conteúdo em diversas colunas ou linhas em Grid.

Você usará o Visual Studio 2019 ou Visual Studio para Mac para criar um aplicativo simples que demonstra como dispor controles em um Grid. Estas capturas de tela mostram o aplicativo final:

Você também usará o XAML Hot Reload para Xamarin.Forms ver as alterações da interface do usuário sem recriar seu aplicativo.

Criar uma grade

8 minutos restantes

Uma Grid é um layout que organiza filhos em linhas e colunas que podem ter tamanhos proporcionais ou absolutos. Por padrão, a Grid contém uma linha e uma coluna.

Visual Studio
Visual Studio para Mac

Para concluir este tutorial, você precisará ter o Visual Studio 2019 (versão mais recente) com a carga de trabalho Desenvolvimento mobile com .NET instalada. Além disso, você precisará de um Mac emparelhado para compilar o aplicativo do tutorial no iOS. Para obter informações sobre como instalar a plataforma Xamarin, confira Instalando o Xamarin. Para obter informações sobre como conectar o Visual Studio 2019 a um host de build Mac, confira Emparelhar com o Mac para desenvolvimento no Xamarin.iOS.

Inicie o Visual Studio e crie um novo aplicativo em branco Xamarin.Forms chamado GridTutorial.

Importante

Os snippets de C# e XAML neste tutorial exigem que a solução seja denominada GridTutorial. Usar um nome diferente causará erros de build ao copiar o código deste tutorial para a solução.

Para obter mais informações sobre a biblioteca do .NET Standard que é criada, consulte Anatomia Xamarin.Forms de um Xamarin.Forms aplicativo no Quickstart Deep Dive.
No Gerenciador de Soluções, no projeto GridTutorial, clique duas vezes em MainPage.xaml para abri-lo. Em seguida, em MainPage.xaml, remova todo o código do modelo e substitua-o pelo código a seguir:
```
<?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>
```
Esse código define declarativamente a interface do usuário para a página, que é composta por um Label em um Grid. Por padrão, o Grid posiciona suas exibições filho em uma única localização. Portanto, uma Grid que contém vários filhos devem especificar colunas e linhas, que serão abordadas no próximo exercício. Além disso, a propriedade Margin indica a posição da renderização de Grid dentro de ContentPage.

Observação

Além da propriedade Margin, a propriedade Padding também pode ser definida em um Grid. O valor da propriedade Padding especifica a distância entre os limites do Grid e dos respectivos filhos. Para saber mais, confira Margens e preenchimento.
Na barra de ferramentas do Visual Studio, pressione o botão Iniciar (o botão triangular que se parece com um botão Reproduzir) para iniciar o aplicativo dentro do simulador de iOS remoto ou Android Emulator escolhido:

Para obter mais informações sobre o Grid, consulte Xamarin.Forms Grade.

Para concluir este tutorial, você precisará ter o Visual Studio para Mac (versão mais recente), com suporte para plataforma iOS e Android, instalado. Além disso, você também precisará do Xcode (versão mais recente). Para obter mais informações sobre como instalar a plataforma Xamarin, confira Instalando o Xamarin.

Inicie o Visual Studio para Mac e crie um novo aplicativo em branco Xamarin.Forms chamado GridTutorial.

Importante

Os snippets de C# e XAML neste tutorial exigem que a solução seja denominada GridTutorial. Usar um nome diferente causará erros de build ao copiar o código deste tutorial para a solução.

Para obter mais informações sobre a biblioteca do .NET Standard que é criada, consulte Anatomia Xamarin.Forms de um Xamarin.Forms aplicativo no Quickstart Deep Dive.
No Painel de Soluções, no projeto GridTutorial, clique duas vezes em MainPage.xaml para abri-lo. Em seguida, em MainPage.xaml, remova todo o código do modelo e substitua-o pelo código a seguir:
```
<?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>
```
Esse código define declarativamente a interface do usuário para a página, que é composta por um Label em um Grid. Por padrão, o Grid posiciona suas exibições filho em uma única localização. Portanto, uma Grid que contém vários filhos devem especificar colunas e linhas, que serão abordadas no próximo exercício. Além disso, a propriedade Margin indica a posição da renderização de Grid dentro de ContentPage.

Observação

Além da propriedade Margin, a propriedade Padding também pode ser definida em um Grid. O valor da propriedade Padding especifica a distância entre as exibições na Grid. Para saber mais, confira Margens e preenchimento.
Na barra de ferramentas do Visual Studio para Mac, pressione o botão Iniciar (o botão triangular que se parece com o botão Reproduzir) para iniciar o aplicativo dentro do simulador de iOS ou do Android Emulator escolhido:

Para obter mais informações sobre o Grid, consulte Xamarin.Forms Grade.

Especificar colunas e linhas

6 minutos restantes

Visual Studio
Visual Studio para Mac

Em MainPage.xaml, modifique a declaração Grid para definir colunas e linhas e coloque o conteúdo nas colunas e linhas:
```
<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>
```
Esse código define as colunas e linhas para a Grid e posiciona as instâncias de Label em linhas e colunas específicas. Os dados das linhas e colunas são armazenados nas propriedades ColumnDefinitions e RowDefinitions, que são coleções de objetos ColumnDefinition e RowDefinition, respectivamente. A largura de cada ColumnDefinition é definida pela propriedade ColumnDefinition.Width e a altura de cada RowDefinition é definida pela propriedade RowDefinition.Height. Os valores válidos de largura e altura são:
- Auto, que dimensiona a coluna ou linha para que o conteúdo caiba nela.
- Valores proporcionais, que dimensionam as colunas e linhas de forma proporcional ao espaço restante. Valores proporcionais são indicados pela terminação com um *.
- Valores absolutos, que dimensionam as colunas ou linhas com valores fixos específicos.
Sendo assim, no código acima, cada coluna tem uma largura equivalente a metade de Grid, enquanto cada linha tem uma altura de 50 unidades independentes do dispositivo.

A posição de cada Label no Grid é especificada com as propriedades anexadas Grid.Column e Grid.Row, usando um índice baseado em zero. Portanto, a primeira coluna é a coluna 0 e a primeira linha é a linha 0. O primeiro Label não tem essas propriedades anexadas porque as exibições filho que não as definem são renderizadas automaticamente na coluna 0, linha 0.

Observação

O espaçamento entre colunas e linhas em uma Grid pode ser definido com as propriedades ColumnSpacing e RowSpacing. Para obter mais informações, consulte Espaçamento no Xamarin.Forms guia de grade .
Caso o aplicativo ainda esteja em execução, salve as alterações no arquivo. Dessa maneira, a interface do usuário do aplicativo será atualizada de modo automático em seu simulador ou emulador. Caso contrário, na barra de ferramentas do Visual Studio, clique no botão Iniciar (um botão triangular semelhante ao botão Reproduzir) para executar a inicialização do aplicativo dentro do simulador remoto de iOS ou do Android Emulator de sua preferência:

Em MainPage.xaml, modifique a declaração Grid para definir colunas e linhas e coloque o conteúdo nas colunas e linhas:
```
<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>
```
Esse código define as colunas e linhas para a Grid e posiciona as instâncias de Label em linhas e colunas específicas. Os dados das linhas e colunas são armazenados nas propriedades ColumnDefinitions e RowDefinitions, que são coleções de objetos ColumnDefinition e RowDefinition, respectivamente. A largura de cada ColumnDefinition é definida pela propriedade ColumnDefinition.Width e a altura de cada RowDefinition é definida pela propriedade RowDefinition.Height. Os valores válidos de largura e altura são:
- Auto, que dimensiona a coluna ou linha para que o conteúdo caiba nela.
- Valores proporcionais, que dimensionam as colunas e linhas de forma proporcional ao espaço restante. Valores proporcionais são indicados pela terminação com um *.
- Valores absolutos, que dimensionam as colunas ou linhas com valores fixos específicos.
Sendo assim, no código acima, cada coluna tem uma largura equivalente a metade de Grid, enquanto cada linha tem uma altura de 50 unidades independentes do dispositivo.

A posição de cada Label no Grid é especificada com as propriedades anexadas Grid.Column e Grid.Row, usando um índice baseado em zero. Portanto, a primeira coluna é a coluna 0 e a primeira linha é a linha 0. O primeiro Label não tem essas propriedades anexadas porque as exibições filho que não as definem são renderizadas automaticamente na coluna 0, linha 0.

Observação

O espaçamento entre colunas e linhas em uma Grid pode ser definido com as propriedades ColumnSpacing e RowSpacing. Para obter mais informações, consulte Espaçamento no Xamarin.Forms guia de grade .
Caso o aplicativo ainda esteja em execução, salve as alterações no arquivo. Dessa maneira, a interface do usuário do aplicativo será atualizada de modo automático em seu simulador ou emulador. Caso contrário, na barra de ferramentas do Visual Studio para Mac, clique no botão Iniciar (um botão triangular semelhante ao botão Reproduzir) para executar a inicialização do aplicativo dentro do simulador de iOS ou do Android Emulator de sua preferência:

Distribuir conteúdo entre colunas ou linhas

2 minutos restantes

Visual Studio
Visual Studio para Mac

Em MainPage.xaml, modifique a declaração Grid para definir colunas e linhas e coloque o conteúdo que abrange as colunas e linhas:
```
<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>
```
Esse código define as colunas e linhas para a Grid e posiciona as instâncias de Label em linhas e colunas específicas. O primeiro Label define a propriedade ColumnSpan anexada para que seu texto se estenda por várias colunas. A propriedade ColumnSpan é definida como 2, o que representa o número de colunas que Label abrangerá. O segundo Label define a propriedade RowSpan anexada para que seu texto abranja várias linhas. A propriedade RowSpan é definida como 2, o que representa o número de linhas que Label abrangerá.
Caso o aplicativo ainda esteja em execução, salve as alterações no arquivo. Dessa maneira, a interface do usuário do aplicativo será atualizada de modo automático em seu simulador ou emulador. Caso contrário, na barra de ferramentas do Visual Studio, clique no botão Iniciar (um botão triangular semelhante ao botão Reproduzir) para executar a inicialização do aplicativo dentro do simulador remoto de iOS ou do Android Emulator de sua preferência:

Interrompa o aplicativo no Visual Studio.

Para obter mais informações sobre como abranger colunas e linhas, consulte Linhas e colunas no Xamarin.Forms guia Grade .

Em MainPage.xaml, modifique a declaração Grid para definir colunas e linhas e coloque o conteúdo que abrange as colunas e linhas:
```
<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>
```
Esse código define as colunas e linhas para a Grid e posiciona as instâncias de Label em linhas e colunas específicas. O primeiro Label define a propriedade ColumnSpan anexada para que seu texto se estenda por várias colunas. A propriedade ColumnSpan é definida como 2, o que representa o número de colunas que Label abrangerá. O segundo Label define a propriedade RowSpan anexada para que seu texto abranja várias linhas. A propriedade RowSpan é definida como 2, o que representa o número de linhas que Label abrangerá.
Caso o aplicativo ainda esteja em execução, salve as alterações no arquivo. Dessa maneira, a interface do usuário do aplicativo será atualizada de modo automático em seu simulador ou emulador. Caso contrário, na barra de ferramentas do Visual Studio para Mac, clique no botão Iniciar (um botão triangular semelhante ao botão Reproduzir) para executar a inicialização do aplicativo dentro do simulador de iOS ou do Android Emulator de sua preferência:

Interrompa o aplicativo no Visual Studio para Mac.

Para obter mais informações sobre como abranger colunas e linhas, consulte Linhas e colunas no Xamarin.Forms guia Grade .

Xamarin.Forms Tutorial de grade

Criar uma grade

Especificar colunas e linhas

Distribuir conteúdo entre colunas ou linhas

Parabéns!

Próximas etapas

Xamarin.Forms Tutorial de grade

Criar uma grade

Especificar colunas e linhas

Distribuir conteúdo entre colunas ou linhas

Parabéns!

Próximas etapas

Links relacionados