Alinhamento, margem, preenchimento

Em aplicativos XAML, a maioria dos elementos da interface do usuário (UI) herda da classe FrameworkElement. Cada FrameworkElement tem dimensões, alinhamento, margem e propriedades de preenchimento, que influenciam o comportamento do layout. As diretrizes a seguir fornecem uma visão geral de como usar essas propriedades de layout para garantir que a interface do usuário do seu aplicativo seja legível e fácil de usar em qualquer contexto.

Dimensões (Altura, Largura)

O dimensionamento adequado garante que todo o conteúdo seja claro e legível. Os usuários não devem ter que rolar ou ampliar para decifrar o conteúdo principal.

• Altura e Largura especificar o tamanho de um elemento. Os valores padrão são matematicamente NaN (Não um número). Você pode definir valores fixos medidos em pixels efetivos, ou pode usar automático ou dimensionamento proporcional para um comportamento fluido.

• ActualHeight e ActualWidth são propriedades somente leitura que fornecem o tamanho de um elemento em tempo de execução. Se os layouts fluidos crescerem ou encolherem, os valores serão alterados num evento SizeChanged. Observe que um RenderTransform não alterará os valores ActualHeight e ActualWidth.

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

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

Alinhamento

O alinhamento faz com que sua interface do usuário pareça limpa, organizada e equilibrada e também pode ser usada para estabelecer hierarquia visual e relacionamentos.

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

  • Os valores para HorizontalAlignment são Esquerda, Centro, Direita, e Expandir.
  • Os valores para VerticalAlignment são Top, Center, Bottome Stretch.

• Stretch é o padrão para ambas as propriedades, e os elementos preenchem todo o espaço que lhes é fornecido no contentor pai. A Altura real e a Largura real anulam um valor de Alongamento, que em vez disso funcionarão como um valor de Centro. Alguns controles, como Button, substituem o valor Stretch padrão em seu estilo padrão.

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

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

• Os elementos de texto usam a propriedade TextAlignment. Geralmente, recomendamos o uso do alinhamento à esquerda, o valor padrão. Para obter mais informações sobre como estilizar texto, consulte Tipografia.

Margem e espaçamento

As propriedades de margem e preenchimento impedem que a interface pareça muito confusa ou esparsa, e também facilitam o uso de entradas como toque e caneta. Aqui está uma ilustração que exibe margens e acolchoamento para um recipiente e o seu conteúdo.

Margem

Margem controla a quantidade de espaço vazio ao redor de um elemento. A margem não adiciona pixels a ActualHeight e ActualWidth e não é considerada parte do elemento para testes de acerto e geração de eventos de entrada.

• Os valores de margem podem ser uniformes ou distintos. Com Margin="20", uma margem uniforme de 20 pixels seria aplicada ao elemento nos lados esquerdo, superior, direito e inferior. Com Margin="0,10,5,25", os valores são aplicados a esquerda, topo, direita e parte inferior (nessa ordem).
• As margens são aditivas. Se dois elementos especificarem uma margem uniforme de 10 pixels e forem pares adjacentes em qualquer orientação, a distância entre eles será de 20 pixels.
• São permitidas margens negativas. No entanto, usar uma margem negativa muitas vezes pode causar recorte, ou sobreposição de elementos, portanto, não é comum utilizar margens negativas.
• Os valores de margem são restringidos por último, portanto, tenha cuidado com as margens, pois os contêineres podem cortar ou restringir elementos. Um valor de margem pode ser a causa de um elemento que não parece renderizar; com uma Margem aplicada, a dimensão de um elemento pode ser restringida a 0.

Preenchimento

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

Ao contrário de Margin, Padding não é uma propriedade de FrameworkElement. Existem várias classes que definem cada uma a sua própria propriedade Padding :

• Control.Padding: herda para todas as Control classes derivadas. Nem todos os controles têm conteúdo, portanto, para esses controles, definir a propriedade não faz nada. Se o controle tiver uma borda, o preenchimento se aplica dentro dessa borda.
• Border.Padding: define-se o espaço entre a linha retangular criada por BorderThickness/BorderBrush e o elemento filho.
• ItemsPresenter.Padding: contribui para a aparência dos itens nos controles de itens, aplicando o preenchimento especificado em torno de cada item.
• TextBlock.Padding e RichTextBlock.Padding: expanda a caixa delimitadora ao redor do texto do elemento de texto. Esses elementos de texto não têm um de plano de fundo, portanto, pode ser visualmente difícil de ver. Por esse motivo, use as configurações de margem nos contentores de bloco .

Em cada um desses casos, os elementos também têm uma propriedade Margin. Se tanto a Margem quanto o Espaçamento interno forem aplicados, eles são somados: a distância aparente entre um recipiente externo e qualquer conteúdo interno será a margem mais o espaçamento interno.

Exemplo

Vejamos os efeitos da Margem e do Espaçamento nos controlos reais. Aqui está uma TextBox dentro de um Grid com os valores padrão de margem e preenchimento de 0.

Aqui está o mesmo TextBox e Grid com valores de Margin e Padding no TextBox, como exibido 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 os valores de propriedade num recurso de estilo e aplicar o estilo a um controlo. Isso é especialmente verdadeiro quando você precisa aplicar os mesmos valores de propriedade a muitos controles. Para saber mais sobre como usar estilos, veja estilos XAML.

Recomendações gerais

• Aplique apenas valores de medição a determinados elementos-chave e use um comportamento de layout fluido para os outros elementos. Isso fornece de interface do usuário responsiva quando a largura da janela muda.
• Se utilizar valores de medição, todas as dimensões, margens e espaçamento devem estar em multiplicidades de 4 epx. Quando o XAML usa pixels efetivos e de dimensionamento para tornar seu aplicativo legível em todos os dispositivos e tamanhos de tela, ele dimensiona os elementos da interface do usuário em múltiplos de 4. Usar valores em incrementos de 4 resulta na melhor renderização, alinhando-se com pixels inteiros.
• Para larguras de janela pequenas (menos de 640 pixels), recomendamos calhas de 12 epx, e para larguras de janela maiores, recomendamos calhas de 24 epx.

Tópicos relacionados

• FrameworkElement.Height
• FrameworkElement.Width
• FrameworkElement.HorizontalAlignment
• FrameworkElement.VerticalAlignment
• FrameworkElement.Margin
• Control.Padding