Alinhamento, margem, preenchimento

  • Artigo

Em aplicativos XAML, a maioria dos elementos da 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 nem 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 um número). É possível 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 runtime. 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 limitam o tamanho de um elemento e, ao mesmo tempo, 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 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 de HorizontalAlignment são Left, Center, Right e Stretch.
    • Os valores de 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 filhos 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á cortado 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 como estilizar o texto, confira 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 toque. Esta é uma ilustração que exibe margens e preenchimento para um contêiner e seu conteúdo.

diagrama de preenchimento e margens de xaml

Margin

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. No entanto, usar uma margem negativa geralmente pode causar recorte ou saques excessivos de pares, portanto, não é uma técnica comum usar margens negativas.
  • 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

Preenchimento controla a quantidade de espaço entre a borda interna de um elemento e seus elementos ou conteúdos filhos. 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, a 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 configuraçã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 tela de fundo, 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 têm uma propriedade Margin. Se forem aplicados Margin and Padding, eles serão aditivos: a distância aparente entre um contêiner externo e qualquer conteúdo interno será a margem mais o preenchimento.

Exemplo

Vejamos os efeitos de Margin e Padding em controles reais. Aqui está um TextBox dentro de uma Grid com os valores padrão de Margin e Padding de 0.

TextBox com margem e preenchimento de 0

Aqui está o mesmo TextBox e Grid com valores de 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 margem positiva e valores de preenchimento

Recursos de estilo

Você não precisa 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 obter mais informações sobre como usar estilos, confira 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 e dimensionamento efetivos 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. O uso de 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