Alinhamento, margem, preenchimento

Em aplicativos XAML, a maioria dos elementos de interface do usuário (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.

• Altura e largura especificam 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 dimensionamento automático ou proporcional para um comportamento fluido.

• ActualHeight e ActualWidth são propriedades somente leitura que fornecem o tamanho de um elemento em runtime. Se os layouts fluidos crescerem ou diminuírem, os valores mudarão durante 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.

• HorizontalAlignment e VerticalAlignment especificam como um elemento deve ser posicionado dentro de seu 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 fornecido 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 os elementos filho são posicionados dentro de 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.

• Os elementos de texto usam a propriedade TextAlignment . Em geral, recomendamos usar o alinhamento à esquerda, valor padrão. Para obter mais informações sobre texto de estilo, 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 toque. Esta é uma ilustração que exibe margens e preenchimento para um contêiner e seu conteúdo.

Margem

A margem controla a quantidade de espaço vazio em torno 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

O preenchimento controla a quantidade de espaço entre a borda interna de um elemento e o seu conteúdo ou elementos filho. 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 para todas as classes derivadas de Controle. 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 de retângulo criada por BorderThickness/BorderBrush e o elemento Child .
• ItemsPresenter.Padding: contribui para a aparência dos itens nos controles de item, colocando o preenchimento especificado em torno de cada item.
• TextBlock.Padding e RichTextBlock.Padding: expande a caixa delimitadora ao redor do texto do elemento de texto. Esses elementos de texto não têm um plano de fundo , portanto, pode ser visualmente difícil distingui-los. 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.

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>

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 Estilo 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 fornece de 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 o 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.

Tópicos relacionados

• FrameworkElement.Height
• FrameworkElement.Width
• FrameworkElement.HorizontalAlignment
• FrameworkElement.VerticalAlignment
• FrameworkElement.Margin
• Preenchimento de controle