Xamarin.Forms StackLayout Tutorial

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.

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

   Importante

   Os snippets de C# e XAML neste tutorial exigem que a solução seja denominada StackLayoutTutorial. 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 .NET Standard que é criada, consulte Anatomia de um Xamarin.Forms aplicativo no Aprofundamento do Xamarin.Forms Início Rápido.

2. No Gerenciador de Soluções, no projeto StackLayoutTutorial, 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="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>
   

   Esse código define declarativamente a interface do usuário para a página, que consiste em três instâncias Label em um StackLayout. O StackLayout posiciona suas exibições filho (as instâncias Label) em uma única linha, que é orientada verticalmente por padrão. Além disso, a propriedade Margin indica a posição da renderização de StackLayout dentro de ContentPage.

   Observação

   Além da propriedade Margin, as propriedades Padding e Spacing também podem ser definidas em um StackLayout. O valor da propriedade Padding especifica a distância entre as exibições no StackLayout, e o valor da propriedade Spacing especifica a quantidade de espaço entre cada elemento filho no StackLayout. Para saber mais, confira Margens e preenchimento.

3. 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 remoto de iOS ou do Android Emulator escolhido:

   

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

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.

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

   Importante

   Os snippets de C# e XAML neste tutorial exigem que a solução seja denominada StackLayoutTutorial. 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 .NET Standard que é criada, consulte Anatomia de um Xamarin.Forms aplicativo no Aprofundamento do Xamarin.Forms Início Rápido.

2. No Painel de Soluções, no projeto StackLayoutTutorial, 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="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>
   

   Esse código define declarativamente a interface do usuário para a página, que consiste em três instâncias Label em um StackLayout. O StackLayout posiciona suas exibições filho (as instâncias Label) em uma única linha, que é orientada verticalmente por padrão. Além disso, a propriedade Margin indica a posição da renderização de StackLayout dentro de ContentPage.

   Observação

   Além da propriedade Margin, as propriedades Padding e Spacing também podem ser definidas em um StackLayout. O valor da propriedade Padding especifica a distância entre as exibições no StackLayout, e o valor da propriedade Spacing especifica a quantidade de espaço entre cada elemento filho no StackLayout. Para saber mais, confira Margens e preenchimento.

3. 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 StackLayout, consulte Xamarin.Forms StackLayout.

1. Em MainPage.xaml, modifique a declaração StackLayout para que seus elementos filho sejam alinhados horizontalmente, e não verticalmente:

   <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 define a propriedade Orientation como Horizontal.

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

   

   Observe que as instâncias de Label dentro do StackLayout agora estão alinhadas horizontalmente, e não verticalmente.

1. Em MainPage.xaml, modifique a declaração StackLayout para que seus elementos filho sejam alinhados horizontalmente, e não verticalmente:

   <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 define a propriedade Orientation como Horizontal.

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

   

   Observe que as instâncias de Label dentro do StackLayout agora estão alinhadas horizontalmente, e não verticalmente.

1. Em MainPage.xaml, modifique a declaração StackLayout para definir opções de alinhamento e expansão para cada Label:

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

   Esse código define preferências de alinhamento nas primeiras quatro instâncias de Label, bem como preferências de expansão nas quatro últimas instâncias de Label. Os campos Start, Center, End e Fill são usados para definir o alinhamento do das instâncias de Label dentro do StackLayout pai. Os campos StartAndExpand, CenterAndExpand, EndAndExpand e FillAndExpand são usados para definir a preferência de alinhamento e definir se a exibição ocupará mais espaço, se disponível, dentro do StackLayout pai.

   Observação

   O valor padrão das propriedades HorizontalOptions e VerticalOptions de uma exibição é Fill.

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

   

   Um StackLayout respeita somente as preferências de alinhamento em exibições filho que estão na direção oposta à orientação StackLayout. Portanto, as exibições filho de Label dentro do StackLayout orientado verticalmente definem suas propriedades HorizontalOptions como um dos campos de alinhamento:

   • Start, que posiciona o Label à esquerda do StackLayout.
   • Center, que centraliza o Label no StackLayout.
   • End, que posiciona o Label à direita do StackLayout.
   • Fill, que garante que o Label preencha a largura do StackLayout.

   Um StackLayout só pode expandir exibições filho na direção de sua orientação. Portanto, o StackLayout orientado verticalmente pode expandir exibições filho de Label que definem suas propriedades VerticalOptions como um dos campos de expansão. Isso significa que, para o alinhamento vertical, cada Label ocupa a mesma quantidade de espaço dentro do StackLayout. No entanto, somente o último Label, que define sua propriedade VerticalOptions como FillAndExpand tem um tamanho diferente.

   Importante

   Quando todo o espaço em um StackLayout é usado, as preferências de expansão não têm nenhum efeito.

   Interrompa o aplicativo no Visual Studio.

   Para obter mais informações sobre alinhamento e expansão, consulte Opções de layout no Xamarin.Forms.

1. Em MainPage.xaml, modifique a declaração StackLayout para definir opções de alinhamento e expansão para cada Label:

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

   Esse código define preferências de alinhamento nas primeiras quatro instâncias de Label, bem como preferências de expansão nas quatro últimas instâncias de Label. Os campos Start, Center, End e Fill são usados para definir o alinhamento do das instâncias de Label dentro do StackLayout pai. Os campos StartAndExpand, CenterAndExpand, EndAndExpand e FillAndExpand são usados para definir a preferência de alinhamento e definir se a exibição ocupará mais espaço, se disponível, dentro do StackLayout pai.

   Observação

   O valor padrão das propriedades HorizontalOptions e VerticalOptions de uma exibição é Fill.

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

   

   Um StackLayout respeita somente as preferências de alinhamento em exibições filho que estão na direção oposta à orientação StackLayout. Portanto, as exibições filho de Label dentro do StackLayout orientado verticalmente definem suas propriedades HorizontalOptions como um dos campos de alinhamento:

   • Start, que posiciona o Label à esquerda do StackLayout.
   • Center, que centraliza o Label no StackLayout.
   • End, que posiciona o Label à direita do StackLayout.
   • Fill, que garante que o Label preencha a largura do StackLayout.

   Um StackLayout só pode expandir exibições filho na direção de sua orientação. Portanto, o StackLayout orientado verticalmente pode expandir exibições filho de Label que definem suas propriedades VerticalOptions como um dos campos de expansão. Isso significa que, para o alinhamento vertical, cada Label ocupa a mesma quantidade de espaço dentro do StackLayout. No entanto, somente o último Label, que define sua propriedade VerticalOptions como FillAndExpand tem um tamanho diferente.

   Importante

   Quando todo o espaço em um StackLayout é usado, as preferências de expansão não têm nenhum efeito.

   Interrompa o aplicativo no Visual Studio para Mac.

   Para obter mais informações sobre alinhamento e expansão, consulte Opções de layout no Xamarin.Forms.