Alinhamento, margem, almofadamento

Nas aplicações XAML, a maioria dos elementos da interface de utilizador (UI) herda da classe FrameworkElement . Cada ElementoFramework tem dimensões, alinhamento, margem e propriedades de preenchimento que influenciam o comportamento do layout. A orientação seguinte fornece uma visão geral de como usar estas propriedades de layout para garantir que a interface da sua aplicação é legível e fácil de usar em qualquer contexto.

Dimensões (Altura, Largura)

O tamanho adequado garante que todo o conteúdo é claro e legível. Os utilizadores não deveriam ter de fazer scroll ou zoom para decifrar o conteúdo principal.

• Altura e Largura especificam o tamanho de um elemento. Os valores padrão são matematicamente NaN (Não Um Número). Pode definir valores fixos medidos em píxeis efetivos, ou pode usar Auto ou dimensionamento proporcional para o comportamento fluido.

• ActualHeight e ActualWidth são propriedades de apenas leitura que fornecem o tamanho de um elemento em tempo de execução. Se os layouts fluidos crescerem ou diminuírem, então os valores mudam num evento SizeChanged. Note que um RenderTransform não altera os valores ActualHeight e ActualWidth.

• MinWidth/MaxWidth e MinHeight/MaxHeight especificam valores que limitam o tamanho de um elemento enquanto permitem o redimensionamento do fluido.

• O FontSize e outras propriedades de texto controlam o tamanho do layout dos elementos do texto. Embora os elementos de texto não tenham dimensões explicitamente declaradas, têm ActualWidth e ActualHeight calculadas.

Alinhamento

O alinhamento faz com que a sua interface de utilizador pareça arrumada, organizada e equilibrada e também pode ser usada para estabelecer hierarquia visual e relações.

• HorizontalAlignment e VerticalAlignment especificam como um elemento deve ser posicionado dentro do seu contentor pai.

  • Os valores para HorizontalAlignment são Left, Center, Right e Stretch.
  • Os valores para VerticalAlignment são Top, Center, Bottom e Stretch.

• Stretch é o padrão para ambas as propriedades, e os elementos preenchem todo o espaço que lhes é dado no contentor pai. Altura e Largura em números reais cancelam um valor de Estiramento, que em vez disso atuará como um valor central. Alguns controlos, como o Botão, sobrepõem o valor padrão de Esticar no seu estilo padrão.

• HorizontalContentAlignment e VerticalContentAlignment especificam como os elementos filhos estão posicionados dentro de um contentor.

• O alinhamento pode afetar o clipping dentro de um painel de layout. Por exemplo, com HorizontalAlignment="Left", o lado direito do elemento é cortado se o conteúdo for maior do que a LarguraAtual.

• Os elementos de texto utilizam a propriedade TextAlignment . De um modo geral, recomendamos usar o left-alignment, o valor padrão. Para mais informações sobre estilização de texto, consulte Tipografia.

Margem e preenchimento

As propriedades de margem e enchimento impedem que a interface pareça demasiado desordenada ou esparsa, e também podem facilitar o uso de certos inputs como caneta e toque. Aqui está uma ilustração que mostra as margens e o enchimento de um recipiente e o seu conteúdo.

Margin

A margem controla a quantidade de espaço vazio em redor de um elemento. A margem não adiciona píxeis ao ActualHeight e ao ActualWidth e não é considerada parte do elemento para o teste de colisão e captação de eventos de entrada.

• Os valores de margem podem ser uniformes ou distintos. Com Margin="20", uma margem uniforme de 20 píxeis seria aplicada ao elemento dos lados esquerdo, superior, direito e inferior. Com Margin="0,10,5,25", os valores são aplicados à esquerda, cima, direita e inferior (nessa ordem).
• As margens são aditivas. Se dois elementos especificarem uma margem uniforme de 10 píxeis e forem pares adjacentes em qualquer orientação, a distância entre eles é de 20 píxeis.
• Margens negativas são permitidas. No entanto, usar uma margem negativa pode muitas vezes causar clipping, ou sobreposições de elementos vizinhos, por isso não é uma técnica comum usar margens negativas.
• Os valores das margens são restringidos por último, por isso tenha cuidado com as margens porque os contêineres podem recortar ou restringir elementos. Um valor de Margem pode ser a causa de um elemento não ser exibido; com uma Margem aplicada, a dimensão de um elemento pode ser limitada a 0.

Preenchimento

Padding controla a quantidade de espaço entre a borda interior de um elemento e o seu conteúdo ou elementos filhos. Um valor positivo de preenchimento diminui a área de conteúdo do elemento.

Ao contrário do Margin, o Padding não é uma propriedade do FrameworkElement. Existem várias classes, cada qual define a sua própria propriedade de "Padding".

• Control.Padding: é herdada por todas as classes derivadas de Control. Nem todos os controlos têm conteúdo, por isso, para esses controlos, definir a propriedade não faz nada. Se o controlo tiver uma borda, o enchimento aplica-se dentro dessa borda.
• Border.Padding: define o espaço entre a linha retangular criada pelo BorderThickness/BorderBrush e o elemento Filho .
• ItemsPresenter.Padding: contribui para a apresentação dos itens nos controlos de itens, colocando a margem interna especificada em torno de cada item.
• TextBlock.Padding e RichTextBlock.Padding: expandem a caixa delimitadora em torno do texto do elemento de texto. Estes elementos de texto não têm Fundo, por isso pode ser visualmente difícil de ver. Por essa razão, use as definições de margem nos contentores de blocos em vez disso.

Em cada um destes casos, os elementos também possuem a propriedade Margin. Se forem aplicados tanto Margem como Espaçamento interno, são aditivos: a distância aparente entre um recipiente exterior e qualquer conteúdo interior será a soma da margem mais o espaçamento interno.

Example

Vamos analisar os efeitos da Margem e do Espaçamento nos controlos reais. Aqui está uma Caixa de Texto dentro de uma Grelha com os valores padrão de Margem e Preenchimento de 0.

Aqui está a mesma Caixa de Texto e Grelha com os valores de Margem e Preenchimento na Caixa de Texto, como mostrado neste XAML.

<Grid BorderBrush="Blue" BorderThickness="4" Width="200">
    <TextBox Text="This is text in a TextBox." Margin="20" Padding="16,24"/>
</Grid>

Recursos de estilo

Não é necessário definir cada valor de propriedade individualmente em um controle. Normalmente, é mais eficiente agrupar valores de propriedade em um recurso Style e aplicar o Style a um controle. Isso é especialmente verdadeiro quando você precisa aplicar os mesmos valores de propriedade a muitos controles. Para mais informações sobre o uso de estilos, veja estilos XAML.

Recomendações gerais

• Aplicar valores de medição apenas a certos elementos-chave e usar o comportamento de layout fluido para os outros elementos. Isto proporciona uma interface responsiva quando a largura da janela muda.
• Se usares valores de medição, todas as dimensões, margens e enchimento devem ser em incrementos de 4 epx. Quando o XAML usa píxeis eficazes e escalonamento para tornar a sua aplicação legível em todos os dispositivos e tamanhos de ecrã, escala elementos da interface por múltiplos de 4. Usar valores em incrementos de 4 resulta na melhor renderização ao alinhar com píxeis inteiros.
• Para janelas de largura pequena (menos de 640 píxeis), recomendamos espaços de 12 epx, e para janelas de largura maior, recomendamos espaços de 24 epx.

Tópicos relacionados

• FrameworkElement.Height
• FrameElement.Width
• ElementoDoFramework.AlinhamentoHorizontal
• FrameworkElement.VerticalAlignment
• FrameworkElement.Margin
• Control.Padding