Alinhamento, margem, preenchimento

  • Artigo

Em aplicativos XAML, a maioria dos elementos de interface do usuário herda da classe FrameworkElement . Cada FrameworkElement tem dimensões e propriedades de alinhamento, margem e preenchimento que influenciam o comportamento de layout. A orientação a seguir fornece 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 precisam rolar ou aplicar zoom para decifrar o conteúdo principal.

diagrama mostrando as dimensões

  • Height e Width especificam o tamanho de um elemento. Os valores padrão são matematicamente NaN (não numéricos). Você pode definir valores fixos medidos em pixels efetivos ou usar o dimensionamento Automático ou proporcional para o comportamento do fluido.

  • ActualHeight e ActualWidth são propriedades somente leitura que fornecem o tamanho de um elemento em tempo de execução. Se os layouts de fluido aumentam ou diminuem, os valores mudam em um 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, permitindo o redimensionamento de fluidos.

  • 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 declaradas explicitamente, eles calculam ActualWidth e ActualHeight.

Alinhamento

O alinhamento torna sua interface do usuário mais organizada e equilibrada e também pode ser usado para estabelecer hierarquia visual e relacionamentos.

diagrama mostrando alinhamento

  • HorizontalAlignment e VerticalAlignment especificam como um elemento deve ser posicionado no contêiner 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 oferecido no contêiner pai. Números reais Height e Width cancelam um valor Stretch, que atuarão, em vez disso, como valor Center. Alguns controles, como Button, substituem o valor padrão Stretch no seu estilo padrão.

  • HorizontalContentAlignment e VerticalContentAlignment especificam como elementos criança são posicionados em um contêiner.

  • O alinhamento pode afetar recortes em um painel de layout. Por exemplo, com HorizontalAlignment="Left", o lado direito do elemento será cortada se o conteúdo for maior do que o ActualWidth.

  • Elementos de texto usam a propriedade TextAlignment. Em geral, recomendamos usar o alinhamento à esquerda, valor padrão. Para obter mais informações sobre estilizar o texto, consulte Tipografia.

Margem e preenchimento

As propriedades de margem e preenchimento fazem com que a interface do usuário não pareça poluída ou esparsa demais, e elas também podem facilitar o uso de determinadas entradas, como caneta e touch. Esta é uma ilustração que exibe margens e preenchimento para um contêiner e seu conteúdo.

diagrama de preenchimento e margens de xaml

Margem

Margin controla a quantidade de espaço vazio ao redor de um elemento. Margin não adiciona pixels a ActualHeight e ActualWidth, além de não ser considerada parte do elemento para teste de acertos e eventos de entrada de origem.

  • 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 nos lados esquerdo, superior, direito e inferior (nessa ordem).

  • As margens são aditivas. Se dois elementos especificam uma margem uniforme de 10 pixels e são adjacentes em qualquer orientação, a distância entre eles é de 20 pixels.

  • Margens negativas são permitidas. Contudo, o uso de uma margem negativa costuma causar recortes, ou excesso de pares, por isso, o uso de margens negativas não é uma técnica comum.

  • Os valores de margem são limitados por último, por isso, tenha cuidado com as margens, pois os contêineres podem recortar ou restringir elementos. Um valor de Margem pode ser a causa de um elemento que parece não renderizar; Com a margem aplicada, a dimensão do elemento pode ser limitada a 0.

Preenchimento

Padding controla a quantidade de espaço entre a borda interna de um elemento e seus elementos ou conteúdos criança. Um valor de Preenchimento positivo diminui a área de conteúdo do elemento.

Ao contrário da Margem, o Preenchimento não é uma propriedade de FrameworkElement. Há várias classes que definem, cada qual, sua própria propriedade Preenchimento:

  • Control.Padding: herda todas as classes derivadas Control. Nem todos os controles têm conteúdo, portanto, para esses controles, a definição da propriedade não faz nada. Se o controle tiver uma borda, o preenchimento será aplicado dentro dessa borda.
  • Border.Padding: define o espaço entre a linha do retângulo criada por BorderThickness/BorderBrush e o elemento Child.
  • ItemsPresenter.Padding: contribui para a aparência de itens em controles de item, colocando o preenchimento especificado ao redor de cada item.
  • TextBlock.Padding e RichTextBlock.Padding: expandem a caixa delimitadora ao redor do texto do elemento de texto. Esses elementos de texto não têm Background, por isso, podem ser difíceis de visualizar. Por esse motivo, em vez disso, use as configurações Margin nos contêineres Block.

Em cada um desses casos, os elementos também possuem uma propriedade Margin. Se forem aplicados Margin and Padding, eles são aditivos: a distância aparente entre um contêiner externo e qualquer conteúdo interno será a margem mais o preenchimento.

Exemplo

Consultemos os efeitos de Margin e Padding sobre controles reais. Eis um TextBox dentro de um Grid com os valores padrão Margin e Padding iguais a 0.

TextBox com margem e preenchimento iguais a 0

Eis o mesmo TextBox e Grid com valores Margin e Padding no TextBox conforme mostrado neste XAML.

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

TextBox com valores de margem e preenchimento positivos

Recursos de estilo

Você não precisa definir cada valor de propriedade individualmente em um controle. Costuma ser 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 obter mais informações sobre como usar estilos, consulte Estilos XAML.

Recomendações gerais

  • Aplique valores de medição apenas em determinados elementos-chave e use o comportamento de layout fluido nos outros elementos. Isso prevê uma interface do usuário responsiva quando a largura da janela é alterada.

  • Se você usar valores de medição, todas as dimensões, margens e preenchimentos serão em incrementos de 4 epx. Quando o XAML usa pixels efetivos e 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 em melhor renderização em alinhamento com pixels inteiros.

  • Com relação a pequenas larguras de janela (menos de 640 pixels), recomendamos 12 epx medianizes e, para larguras de janela maiores, recomendamos 24 epx medianizes.

medianizes recomendadas