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, 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 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 primário.

• 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 usar o dimensionamentoautomá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 fluidos crescerem ou diminuírem, os valores mudarão 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 calcularam ActualWidth e ActualHeight.

Alinhamento

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

• 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. As dimensões Altura e Largura de número real anulam um valor de estiramento, funcionando, em vez disso, como valor central. Alguns controles, como o Botão, substituem em seu estilo padrão o valor padrão de Stretch.

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

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

• Os elementos de texto usam a propriedade TextAlignment . Em geral, é recomendável usar o alinhamento esquerdo, o valor padrão. Para obter mais informações sobre texto de estilo, consulte Tipografia.

Margem e preenchimento

As propriedades de margem e preenchimento impedem que a interface do usuário pareça muito desordenada ou muito esparsa, e elas também podem facilitar o uso de determinadas entradas, como caneta e toque. Aqui está uma ilustração mostrando as margens e o preenchimento de um contêiner e de seu conteúdo.

Margin

A margem controla a quantidade de espaço vazio em torno de um elemento. A margem não adiciona pixels a ActualHeight e ActualWidth e não é considerada parte do elemento para detecção de clique e originaçã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 à esquerda, superior, direita e 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.
• Margens negativas são permitidas. No entanto, o uso de uma margem negativa geralmente pode causar cortes ou sobreposição de elementos, portanto, não é uma técnica comum usar margens negativas.
• Os valores de margem são restritos por último, portanto, 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 não parecer ser renderizado; com uma margem aplicada, a dimensão de um elemento pode ser limitada a 0.

Enchimento

O 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, o preenchimento não é uma propriedade do FrameworkElement. Há várias classes que definem suas próprias propriedades de Padding:

• Control.Padding: é herdado por todas as classes derivadas Control. 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 aplicará 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 itens, colocando o preenchimento especificado em torno de cada item.
• TextBlock.Padding e RichTextBlock.Padding: expanda a caixa delimitadora em torno do texto do elemento de texto. Esses elementos de texto não têm um Plano de Fundo, portanto, pode ser visualmente difícil de ver. Por esse motivo, use as configurações de margem em contêineres de bloco .

Em cada um desses casos, os elementos também têm uma propriedade Margin. Se a Margem e o Preenchimento forem aplicados, eles serão somados: a distância aparente entre um contêiner externo e qualquer conteúdo interno será a soma de margem e preenchimento.

Example

Vamos analisar os efeitos de Margin e Padding em controles reais. Aqui está um TextBox dentro de uma Grade, com os valores padrão de margem e preenchimento definidos como 0.

Aqui está a mesma Caixa de Texto e Grade com valores de Margem e Preenchimento na Caixa de Texto, 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 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 apenas valores de medida a determinados elementos-chave e use o comportamento de layout fluido para os outros elementos. Isso fornece uma interface do usuário responsiva quando a largura da janela é alterada.
• Se você usar valores de medida, todas as dimensões, margens e espaçamento interno deverão estar 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 UI 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 espaçamentos de 12 epx e, para larguras de janela maiores, recomendamos espaçamentos de 24 epx.

Tópicos relacionados

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