Alinhar e posicionar controles .NET MAUI

Cada controle .NET Multi-Platform App UI (.NET MAUI) que deriva de , que inclui modos de Viewexibição e layouts, tem HorizontalOptions e VerticalOptions propriedades, do tipo LayoutOptions. A LayoutOptions estrutura encapsula o alinhamento preferencial de um modo de 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 do que o tamanho combinado de todos os seus filhos).

Além disso, os Margin controles de posição e Padding propriedades em relação aos controles adjacentes ou filho. Para obter mais informações, consulte Controles de posição.

Alinhar modos de exibição em layouts

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

Os Startcampos , Center, Ende Fill são usados para definir o alinhamento do modo de exibição no layout pai:

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

Observação

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

A StackLayout apenas respeita os Startcampos , Center, Ende FillLayoutOptions em modos de exibição filho que estão na direção oposta à StackLayout orientação. Portanto, os modos de exibição filho dentro de um orientado StackLayout verticalmente podem definir suas HorizontalOptions propriedades para um dos Startcampos , Center, Endou Fill . Da mesma forma, os modos de exibição filho em uma orientação StackLayout horizontal podem definir suas VerticalOptions propriedades como um dos Startcampos , Center, Endou Fill .

A StackLayout não respeita os Startcampos , , EndCentere FillLayoutOptions em modos de exibição filho que estão na mesma direção que a StackLayout orientação. Portanto, um orientado StackLayout verticalmente ignora os Startcampos , Center, Endou Fill se eles estiverem definidos nas VerticalOptions propriedades de modos de exibição filho. Da mesma forma, uma orientação StackLayout horizontal ignora os Startcampos , , CenterEndou Fill se eles estiverem definidos nas HorizontalOptions propriedades de modos de exibição filho.

Importante

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

O exemplo XAML a seguir demonstra uma orientação StackLayout vertical em que cada filho Label define sua HorizontalOptions propriedade para um dos quatro campos de alinhamento da LayoutOptions estrutura:

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

Controles de posição

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

• A Margin propriedade 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. Margin Os valores podem ser especificados em layouts e modos de exibição.
• A Padding propriedade representa a distância entre um elemento e seus elementos filho e é usada para separar o controle de seu próprio conteúdo. Padding Os valores podem ser especificados em páginas, layouts e modos de exibição.

O diagrama a seguir ilustra os dois conceitos:

Observação

Margin os valores 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, em que a distância entre um elemento e qualquer conteúdo será a margem mais preenchimento.

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

• Crie uma Thickness estrutura definida por um único valor uniforme. O valor único é aplicado aos lados esquerdo, superior, direito e inferior do elemento.
• Crie uma Thickness estrutura 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 Thickness estrutura 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

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