Xamarin.Forms StackLayout Tutorial
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.Forms
StackLayoutem XAML. - Especificar a orientação de
StackLayout. - Controlar a expansão e o alinhamento da exibição filho dentro de
StackLayout.
Você usará o Visual Studio 2019 ou Visual Studio para Mac para criar um aplicativo simples que demonstra como alinhar controles em um StackLayout. 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 um stacklayout
Um StackLayout é um layout que organiza filhos em uma pilha unidimensional de modo horizontal ou vertical. Por padrão, a orientação do StackLayout é vertical.
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 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 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 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
Labelem umStackLayout. OStackLayoutposiciona suas exibições filho (as instânciasLabel) em uma única linha, que é orientada verticalmente por padrão. Além disso, a propriedadeMarginindica a posição da renderização deStackLayoutdentro deContentPage.Observação
Além da propriedade
Margin, as propriedadesPaddingeSpacingtambém podem ser definidas em umStackLayout. O valor da propriedadePaddingespecifica a distância entre as exibições noStackLayout, e o valor da propriedadeSpacingespecifica a quantidade de espaço entre cada elemento filho noStackLayout. 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 remoto de iOS ou do Android Emulator escolhido:
Para obter mais informações sobre o
StackLayout, consulte Xamarin.Forms StackLayout.
Especificar a orientação
Em MainPage.xaml, modifique a declaração
StackLayoutpara 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
OrientationcomoHorizontal.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
Labeldentro doStackLayoutagora estão alinhadas horizontalmente, e não verticalmente.
Controlar o alinhamento e a expansão
O tamanho e a posição dos modos de exibição filho dentro de um StackLayout dependem dos valores das exibições HeightRequest e WidthRequest propriedades filho e dos valores das HorizontalOptions propriedades e VerticalOptions delas.
As propriedades HorizontalOptions e VerticalOptions podem ser definidas como campos do struct LayoutOptions, que encapsula duas preferências de layout:
- Alinhamento – o alinhamento preferencial da exibição filho, que determina sua posição e tamanho dentro do layout pai.
- Expansão – indica se a exibição filho deve usar espaço extra se estiver disponível (usado apenas por um
StackLayout).
Em MainPage.xaml, modifique a declaração
StackLayoutpara definir opções de alinhamento e expansão 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>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 deLabel. Os camposStart,Center,EndeFillsão usados para definir o alinhamento do das instâncias deLabeldentro doStackLayoutpai. Os camposStartAndExpand,CenterAndExpand,EndAndExpandeFillAndExpandsão usados para definir a preferência de alinhamento e definir se a exibição ocupará mais espaço, se disponível, dentro doStackLayoutpai.Observação
O valor padrão das propriedades
HorizontalOptionseVerticalOptionsde uma exibição éFill.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
StackLayoutrespeita somente as preferências de alinhamento em exibições filho que estão na direção oposta à orientaçãoStackLayout. Portanto, as exibições filho deLabeldentro doStackLayoutorientado verticalmente definem suas propriedadesHorizontalOptionscomo um dos campos de alinhamento:Start, que posiciona oLabelà esquerda doStackLayout.Center, que centraliza oLabelnoStackLayout.End, que posiciona oLabelà direita doStackLayout.Fill, que garante que oLabelpreencha a largura doStackLayout.
Um
StackLayoutsó pode expandir exibições filho na direção de sua orientação. Portanto, oStackLayoutorientado verticalmente pode expandir exibições filho deLabelque definem suas propriedadesVerticalOptionscomo um dos campos de expansão. Isso significa que, para o alinhamento vertical, cadaLabelocupa a mesma quantidade de espaço dentro doStackLayout. No entanto, somente o últimoLabel, que define sua propriedadeVerticalOptionscomoFillAndExpandtem 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.
Parabéns!
Parabéns por concluir este tutorial, no qual você aprendeu a:
- Crie um Xamarin.Forms
StackLayoutem XAML. - Especificar a orientação de
StackLayout. - Controlar a expansão e o alinhamento da exibição filho dentro de
StackLayout.
Próximas etapas
Para saber mais sobre os conceitos básicos da criação de aplicativos móveis com Xamarin.Formso , continue no tutorial Rótulo.
Links relacionados
Tem algum problema com essa seção? Se tiver, envie seus comentários para que possamos melhorar esta seção.