Alineación, margen, espaciado interno

  • Artículo

En las aplicaciones XAML, la mayoría de los elementos de la interfaz de usuario heredan de la clase FrameworkElement . Cada FrameworkElement tiene dimensiones, alineación, margen y propiedades de relleno, que influyen en el comportamiento del diseño. En las instrucciones siguientes se proporciona información general sobre cómo usar estas propiedades de diseño para asegurarse de que la interfaz de usuario de la aplicación es legible y fácil de usar en cualquier contexto.

Dimensiones (alto y ancho)

El ajuste de tamaño adecuado garantiza que todo el contenido sea claro y legible. Los usuarios no deben tener que desplazarse ni acercar para descifrar el contenido principal.

diagrama que muestra dimensiones

  • Height y Width especifican el tamaño de un elemento. Los valores predeterminados son naN matemáticamente (no un número). Puede establecer valores fijos medidos en píxeles efectivos, o puede usar el ajuste de tamañoautomático o proporcional para el comportamiento fluido.

  • ActualHeight y ActualWidth son propiedades de solo lectura que proporcionan el tamaño de un elemento en tiempo de ejecución. Si los diseños fluidos crecen o se reducen, los valores cambian en un evento SizeChanged . Tenga en cuenta que un RenderTransform no cambiará los valores ActualHeight y ActualWidth.

  • MinWidth/MaxWidth yMinHeight MaxHeight/ especifican valores que restringen el tamaño de un elemento al tiempo que permiten el cambio de tamaño fluido.

  • FontSize y otras propiedades de texto controlan el tamaño de diseño de los elementos de texto. Aunque los elementos de texto no tienen dimensiones declaradas explícitamente, se han calculado ActualWidth y ActualHeight.

Alineación

La alineación hace que la interfaz de usuario tenga un aspecto limpio, organizado y equilibrado y también se puede usar para establecer relaciones y jerarquías visuales.

diagrama que muestra la alineación

  • HorizontalAlignment y VerticalAlignment especifican cómo se debe colocar un elemento dentro de su contenedor primario.

    • Los valores de HorizontalAlignment son Left, Center, Right y Stretch.
    • Los valores de VerticalAlignment son Top, Center, Bottom y Stretch.

  • Stretch es el valor predeterminado para ambas propiedades y los elementos rellenan todo el espacio que se proporcionan en el contenedor primario. El alto y el ancho del número real cancelan un valor stretch, que en su lugar actuará como un valor central. Algunos controles, como Button, invalidan el valor predeterminado de Stretch en su estilo predeterminado.

  • HorizontalContentAlignment y VerticalContentAlignment especifican cómo se colocan los elementos secundarios dentro de un contenedor.

  • La alineación puede afectar al recorte dentro de un panel de diseño. Por ejemplo, con HorizontalAlignment="Left", el lado derecho del elemento se recorta si el contenido es mayor que ActualWidth.

  • Los elementos text usan la propiedad TextAlignment . Por lo general, se recomienda usar la alineación izquierda, el valor predeterminado. Para obtener más información sobre el estilo de texto, vea Tipografía.

Margen y relleno

Las propiedades de margen y relleno impiden que la interfaz de usuario se vea demasiado desordenada o demasiado dispersa, y también pueden facilitar el uso de determinadas entradas, como lápiz y entrada táctil. Esta es una ilustración en la que se muestran los márgenes y el relleno de un contenedor y su contenido.

Diagrama de márgenes xaml y relleno

Margen

Margin controla la cantidad de espacio vacío alrededor de un elemento. Margin no agrega píxeles a ActualHeight y ActualWidth y no se considera parte del elemento para pruebas de posicionamiento y aprovisionamiento de eventos de entrada.

  • Los valores de margen pueden ser uniformes o distintos. Con Margin="20", se aplicaría un margen uniforme de 20 píxeles al elemento de los lados izquierdo, superior, derecho e inferior. Con Margin="0,10,5,25", los valores se aplican a la izquierda, arriba, derecha e inferior (en ese orden).

  • Los márgenes se suman. Si dos elementos especifican un margen uniforme de 10 píxeles y son pares adyacentes en cualquier orientación, la distancia entre ellos es de 20 píxeles.

  • Se permiten los márgenes negativos. No obstante, a menudo el uso de un margen negativo puede provocar recortes o que se sobredibujen los elementos del mismo nivel. Por tanto, usar márgenes negativos no es una técnica habitual.

  • Los valores de margen están restringidos en último lugar, por lo que debe tener cuidado con los márgenes, ya que los contenedores pueden recortar o restringir elementos. Un valor Margin podría ser la causa de que un elemento no aparezca representado; con un margen aplicado, la dimensión de un elemento se puede restringir a 0.

Relleno

Relleno controla la cantidad de espacio entre el borde interno de un elemento y su contenido o elementos secundarios. Un valor Padding positivo disminuye el área de contenido del elemento.

A diferencia de Margin, Padding no es una propiedad de FrameworkElement. Hay varias clases que definen cada una su propia propiedad Padding:

  • Control.Padding: hereda en todas las clases derivadas de Control. No todos los controles tienen contenido, por lo que, para esos controles, establecer la propiedad no hace nada. Si el control tiene un borde, el relleno se aplica dentro de ese borde.
  • Border.Padding: define el espacio entre la línea de rectángulo creada por BorderThickness/BorderBrush y el elemento Child .
  • ItemsPresenter.Padding: contribuye a la apariencia de los elementos de los controles de elemento, colocando el relleno especificado alrededor de cada elemento.
  • TextBlock.Padding y RichTextBlock.Padding: expanda el cuadro de límite alrededor del texto del elemento de texto. Estos elementos de texto no tienen un fondo, por lo que puede ser visualmente difícil de ver. Por ese motivo, use la configuración de margen en Contenedores de bloques en su lugar.

En cada uno de estos casos, los elementos también tienen una propiedad Margin. Si se aplican margin y padding, son aditivos: la distancia aparente entre un contenedor externo y cualquier contenido interno será margen más relleno.

Ejemplo

Echemos un vistazo a los efectos de Margin y Padding en controles reales. Este es un TextBox dentro de una Grid con los valores predeterminados Margin y Padding establecidos en 0.

Cuadro de texto con margen y espaciado de 0

Este es el mismo TextBox y Grid con los valores Margin y Padding del TextBox, tal como se muestra en este código XAML.

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

Cuadro de texto con valores de margen y relleno positivos

Recursos de estilo

No hace falta establecer cada valor individualmente en un control. Suele ser más eficiente agrupar valores de propiedad en un recurso Style y aplicar el Style a un control. Esto es especialmente cierto cuando necesites aplicar los mismos valores de propiedad a muchos controles. Para obtener más información sobre el uso de estilos, consulta Estilos XAML.

Recomendaciones generales

  • Aplique únicamente valores de medida a determinados elementos clave y use el comportamiento de diseño fluido para los demás elementos. Esto proporciona una interfaz de usuario con capacidad de respuesta cuando cambia el ancho de la ventana.

  • Si usa valores de medida, todas las dimensiones, márgenes y relleno deben estar en incrementos de 4 epx. Cuando XAML usa píxeles efectivos y escalado para que la aplicación sea legible en todos los dispositivos y tamaños de pantalla, escala los elementos de la interfaz de usuario por múltiplos de 4. El uso de valores en incrementos de 4 da como resultado la mejor representación alineando con píxeles enteros.

  • Para anchos de ventana pequeños (menos de 640 píxeles), recomendamos 12 canalizaciones epx y para anchos de ventana más grandes, se recomienda 24 canalizaciones epx.

canalones recomendados