Xamarin.Forms Layouts

Baixar Exemplo. Baixar o exemplo

Xamarin.Forms Os layouts são usados para compor controles de interface do usuário em estruturas visuais.

As Layout classes e no são Layout<T> Xamarin.Forms subtipos especializados de exibições que atuam como contêineres para exibições e outros layouts. A Layout própria classe deriva de View . Um Layout derivado normalmente contém lógica para definir a posição e o tamanho dos elementos filho em Xamarin.Forms aplicativos.

[! Xamarin.Forms Tipos de layout

As classes que derivam de Layout podem ser divididas em duas categorias:

Layouts com conteúdo único

Essas classes derivam de Layout , que define e Padding IsClippedToBounds propriedades:

Type Descrição Aparência
ContentView ContentView contém um único filho que é definido com a Content propriedade . A Content propriedade pode ser definida como qualquer View derivado, incluindo outros Layout derivados. ContentView é usado principalmente como um elemento estrutural e serve como uma classe base para Frame .

Documentação da API / Guia / Exemplo
! [Exemplo de ContentView] (layouts-images/ContentView.png "Exemplo de ContentView".
Código C# para esta página / Página XAML
Frame A Frame classe deriva de e exibe uma borda ou quadro em torno de seu ContentView filho. A Frame classe tem um valor padrão de Padding 20 e também define BorderColor as propriedades , e CornerRadius HasShadow .

Documentação da API / Guia / Exemplo
! [Exemplo de quadro] (layouts-images/Frame.png "Exemplo de quadro".
Código C# para esta página / Página XAML
ScrollView ScrollView é capaz de rolar seu conteúdo. De definir Content a propriedade como uma exibição ou layout muito grande para caber na tela. (O conteúdo de um ScrollView geralmente é StackLayout um .) De definir Orientation a propriedade para indicar se a rolagem deve ser vertical, horizontal ou ambas.

Documentação da API / Guia / Exemplo
! [Exemplo de ScrollView] (layouts-images/ScrollView.png "Exemplo de ScrollView".
Código C# para esta página / Página XAML
TemplatedView TemplatedView exibe o conteúdo com um modelo de controle e é a classe base para ContentView .

Documentação da API / Guia
! [Exemplo de TemplatedView] (layouts-images/TemplatedView.png "TemplatedView Example".
ContentPresenter ContentPresenter é um gerenciador de layout para exibições com modelo, usado em um para marcar onde o ControlTemplate conteúdo a ser apresentado é exibido.

Documentação da API / Guia
! [Exemplo de ContentPresenter] (layouts-images/ContentPresenter.png "ContentPresenter Example".

Layouts com vários filhos

Essas classes derivam de Layout<View> :

Type Descrição Aparência
StackLayout StackLayout posiciona elementos filho em uma pilha horizontal ou verticalmente com base na Orientation propriedade . A Spacing propriedade rege o espaçamento entre os filhos e tem um valor padrão de 6.

Documentação da API / Guia / Exemplo
! [Exemplo de StackLayout] (layouts-images/StackLayout.png "Exemplo de StackLayout".
Código C# para esta página / Página XAML
Grid Grid posiciona seus elementos filho em uma grade de linhas e colunas. A posição de um filho é indicada usando as propriedades anexadas Row , , e Column RowSpan ColumnSpan .

Documentação da API / Guia / Exemplo
! [Exemplo de grade] (layouts-images/Grid.png "Exemplo de grade".
Código C# para esta página / Página XAML
AbsoluteLayout AbsoluteLayout posiciona elementos filho em locais específicos em relação ao pai. A posição de um filho é indicada usando as propriedades anexadas LayoutBounds e LayoutFlags . Um AbsoluteLayout é útil para animar as posições das exibições.

Documentação da API / Guia / Exemplo
! [Exemplo de AbsoluteLayout] (layouts-images/AbsoluteLayout.png "Exemplo de AbsoluteLayout".
Código C# para esta página / Página XAML com code-behind
RelativeLayout RelativeLayout posiciona elementos filho RelativeLayout relativos ao próprio ou aos irmãos. A posição de um filho é indicada usando as propriedades anexadas que são definidas como objetos do tipo Constraint e BoundsConstraint .

Documentação da API / Guia / Exemplo
! [Exemplo de RelativeLayout] (layouts-images/RelativeLayout.png "Exemplo de RelativeLayout".
Código C# para esta página / Página XAML
FlexLayout FlexLayouté baseado no Módulo de Layout de CaixaFlexível css , normalmente conhecido como layout flexível ou flex-box. FlexLayout define seis propriedades acopladas e cinco propriedades acopladas que permitem que os filhos sejam empilhados ou empacotados com muitas opções de alinhamento e orientação.

Documentação da API / Guia / Exemplo
! [Exemplo de FlexLayout] (layouts-images/FlexLayout.png "Exemplo de FlexLayout".
Código C# para esta página / Página XAML