Compartilhar via

Alinhar e posicionar controles do .NET MAUI

  • Artigo

Todos os controles da .NET Multi-Platform App UI (.NET MAUI) que derivam de View, que inclui exibições e layouts, tem propriedades HorizontalOptions e VerticalOptions, do tipo LayoutOptions. A estrutura LayoutOptions encapsula o alinhamento preferencial de uma exibição, que determina sua posição e tamanho dentro de seu layout pai quando o layout pai contém espaço não utilizado (ou seja, o layout pai é maior que o tamanho combinado de todos os seus filhos).

Além disso, os controles de posição das propriedades Margin e Padding relativos a controles adjacentes ou filho. Para obter mais informações, confira Controles de posição.

Alinhar exibições em layouts

O alinhamento de um View, em relação ao pai, pode ser controlado definindo a propriedade HorizontalOptions ou VerticalOptions do View para um dos campos públicos da estrutura LayoutOptions. Os campos públicos são Start, Center, End e Fill.

Os campos Start, Center, End e Fill são usados para definir o alinhamento do modo de exibição dentro do layout pai:

  • Para alinhamento horizontal, o Start posiciona o View do lado esquerdo do layout pai e, para o alinhamento vertical, posiciona o View na parte superior do layout pai.
  • Para alinhamento horizontal e vertical, o Center centraliza horizontal ou verticalmente o View.
  • Para alinhamento horizontal, o End posiciona o View do lado direito do layout pai e, para o alinhamento vertical, posiciona o View na parte inferior do layout pai.
  • Para alinhamento horizontal, o Fill garante que o View preencha a largura do layout pai e, para o alinhamento vertical, ele garante que o View preencha a altura do layout pai.

Observação

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

Um StackLayout só respeita os campos Start, Center, End e Fill LayoutOptions em modos de exibição filhos que estejam na direção oposta à orientação StackLayout. Portanto, as exibições filho dentro de um StackLayout orientado verticalmente podem definir suas propriedades HorizontalOptions como um dos campos Start, Center, End ou Fill. Da mesma forma, os modos de exibição filho dentro de um StackLayout orientado horizontalmente podem definir suas propriedades VerticalOptions como um dos campos Start, Center, End ou Fill.

Um StackLayout não respeita os campos Start, Center, End e Fill LayoutOptions em modos de exibição filhos que estejam na mesma direção que a orientação StackLayout. Portanto, um StackLayout orientado verticalmente ignorará os campos Start, Center, End ou Fill se eles estiverem definidos nas propriedades VerticalOptions das exibições filho. Da mesma forma, um StackLayout orientado horizontalmente ignora os campos Start, Center, End ou Fill se eles estiverem definidos nas propriedades HorizontalOptions das exibições filho.

Importante

LayoutOptions.Fill geralmente substitui as solicitações de tamanho especificadas usando as propriedades HeightRequest ou WidthRequest.

O exemplo XAML a seguir demonstra um StackLayout orientado verticalmente em que cada Label filho define sua propriedade HorizontalOptions como um dos quatro campos de alinhamento da estrutura LayoutOptions:

<StackLayout>
  ...
  <Label Text="Start" BackgroundColor="Gray" HorizontalOptions="Start" />
  <Label Text="Center" BackgroundColor="Gray" HorizontalOptions="Center" />
  <Label Text="End" BackgroundColor="Gray" HorizontalOptions="End" />
  <Label Text="Fill" BackgroundColor="Gray" HorizontalOptions="Fill" />
</StackLayout>

A captura de tela a seguir mostra o alinhamento resultante de cada Label:

Captura de tela das opções de layout de alinhamento.

Controles de posição

Os controles de posição de propriedades Margin e Padding relativos a controles adjacentes ou filho. Margem e preenchimento são conceitos de layout relacionados:

  • A propriedade Margin representa a distância entre um elemento e seus elementos adjacentes e é usada para controlar a posição de renderização do elemento e a posição de renderização de seus vizinhos. Os valores Margin podem ser especificados em layouts e exibições.
  • A propriedade Padding representa a distância entre um elemento e seus elementos filho e é usada para separar o controle de seu próprio conteúdo. Os valores Padding podem ser especificados em páginas, layouts e exibições.

O diagrama a seguir ilustra os dois conceitos:

Conceitos de margem e preenchimento.

Observação

Os valores Margin são aditivos. Portanto, se dois elementos adjacentes especificarem uma margem de 20 unidades independentes de dispositivo, a distância entre os elementos será de 40 unidades independentes de dispositivo. Além disso, os valores de margem e preenchimento são aditivos quando ambos são aplicados, pois a distância entre um elemento e qualquer conteúdo será a margem mais o preenchimento.

As propriedades Margin e Padding são do tipo Thickness. Há três possibilidades ao criar uma estrutura Thickness:

  • Crie uma estrutura Thickness definida por um único valor uniforme. O valor único é aplicado aos lados esquerdo, superior, direito e inferior do elemento.
  • Crie uma estrutura Thickness definida por valores horizontais e verticais. O valor horizontal é aplicado simetricamente aos lados esquerdo e direito do elemento, com o valor vertical sendo aplicado simetricamente aos lados superior e inferior do elemento.
  • Crie uma estrutura Thickness definida por quatro valores distintos que são aplicados aos lados esquerdo, superior, direito e inferior do elemento.

O exemplo XAML a seguir mostra todas as três possibilidades:

<StackLayout Padding="0,20,0,0">
  <!-- Margin defined by a single uniform value. -->
  <Label Text=".NET MAUI" Margin="20" />
  <!-- Margin defined by horizontal and vertical values. -->  
  <Label Text=".NET for iOS" Margin="10,15" />
  <!-- Margin defined by four distinct values that are applied to the left, top, right, and bottom. -->  
  <Label Text=".NET for Android" Margin="0,20,15,5" />
</StackLayout>

Este é o código C# equivalente:

StackLayout stackLayout = new StackLayout
{
  Padding = new Thickness(0,20,0,0)
};
// Margin defined by a single uniform value.
stackLayout.Add(new Label { Text = ".NET MAUI", Margin = new Thickness(20) });
// Margin defined by horizontal and vertical values.
stackLayout.Add(new Label { Text = ".NET for iOS", Margin = new Thickness(10,25) });
// Margin defined by four distinct values that are applied to the left, top, right, and bottom.
stackLayout.Add(new Label { Text = ".NET for Android", Margin = new Thickness(0,20,15,5) });

Observação

Os valores Thickness podem ser negativos, o que normalmente corta ou sobrecarrega o conteúdo.