Compartir a través de

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 y propiedades de alineación, margen y espaciado interno que influyen en el comportamiento del diseño. En la siguiente guía se proporciona una introducción de cómo usar estas propiedades de diseño para asegurarte de que la interfaz de usuario de tu aplicación sea legible y fácil de usar en cualquier contexto.

Dimensiones (Alto, Ancho)

Un tamaño correcto garantiza que todo el contenido sea claro y legible. Los usuarios no deberían desplazarse ni aplicar zoom para descifrar contenido principal.

diagrama que muestra las dimensiones

  • Height y Width especifican el tamaño de un elemento. Los valores predeterminados son, matemáticamente hablando, NaN (no es un número). Puedes ajustar valores fijos medidos en píxeles efectivos, o bien puedes usar Auto o la variación de tamaño proporcional para un 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 se amplían o se reducen, los valores cambian en un evento SizeChanged. Ten en cuenta que un control RenderTransform no cambiará los valores ActualHeight y ActualWidth.

  • MinWidth/MaxWidth y MinHeight/MaxHeight especifican los valores que limitan el tamaño de un elemento al tiempo que permiten un cambio de tamaño fluido.

  • FontSize y otras propiedades de texto controlan el tamaño del diseño para los elementos de texto. Aunque los elementos de texto no tienen dimensiones declaradas de manera explícita, sí que han calculado ActualWidth y ActualHeight.

Alineación

La alineación hace que la apariencia de tu interfaz de usuario sea más interesante, organizada y equilibrada, y también puede usarse para establecer una jerarquía visual y relaciones.

diagrama que muestra la alineación

  • HorizontalAlignment y VerticalAlignment especifican cómo debe colocarse un elemento en su contenedor principal.

    • 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 ocupan todo el espacio que se les proporciona en el contenedor principal. Los valores de Height y Width con un número real anulan un valor Stretch, que en cambio actuará como un valor Center. Algunos controles, como Button, invalidan el valor predeterminado Stretch en su estilo predeterminado.

  • HorizontalContentAlignment y VerticalContentAlignment especifican cómo deben colocarse los elementos secundarios en un contenedor.

  • La alineación puede afectar a los recortes en 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 de texto usan la propiedad TextAlignment. Por lo general, te recomendamos que uses la alineación a la izquierda, el valor predeterminado. Para obtener más información sobre cómo aplicar estilo al texto, consulta Tipografía.

Margen y relleno

Las propiedades de margen y espaciado interno evitan que la interfaz de usuario parezca demasiado desordenada o demasiado dispersa, y también pueden conseguir que algunas entradas como el lápiz y la función táctil sean más fáciles de usar. Esta ilustración muestra los márgenes y el espaciado interno de un contenedor y su contenido.

márgenes de XAML y diagrama de espaciado interno

Margen

Margin controla la cantidad de espacio vacío alrededor de un elemento. El margen no agrega píxeles a ActualHeight y ActualWidth ni tampoco se considera como parte del elemento para las pruebas de acceso y el uso de eventos de entrada.

  • Los valores del margen pueden ser uniformes o diferentes. Con Margin="20", un margen uniforme de 20 píxeles se aplicaría al elemento a la izquierda, parte superior, derecha y parte inferior. Con Margin="0,10,5,25", los valores se aplicarían a la izquierda, parte superior, derecha y parte inferior (en este orden).

  • Los márgenes son aditivos. Si tenemos dos elementos y cada uno especifica un margen uniforme de 10 píxeles y son elementos adyacentes del mismo nivel en cualquier orientación, la distancia entre los elementos es de 20 píxeles.

  • Se permiten márgenes negativos. Sin embargo, el uso de un margen negativo a menudo puede provocar recortes o sobredraws de elementos del mismo nivel, por lo que no es una técnica común usar márgenes negativos.

  • Los valores de margen son los últimos en restringirse, por lo tanto, debes tener cuidado con los márgenes porque los contenedores pueden recortar o delimitar elementos. Un valor de margen podría ser la causa de que no aparezca un elemento para representar; con un margen aplicado, la dimensión de un elemento puede restringirse a 0.

Relleno

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

A diferencia del margen, el espaciado interno no es una propiedad de FrameworkElement. Existen varias clases que definen su propia propiedad de espaciado interno:

  • Control.Padding: hereda en todas las clases derivadas de Control. No todos los controles tienen contenido, de modo que, para algunos controles, establecer la propiedad no hace nada. Si el control tiene un borde, el espaciado interno se aplica dentro de dicho borde.
  • Border.Padding: define el espacio entre la línea de rectángulo creada por los objetos BorderThickness/BorderBrush y el elemento Child.
  • ItemsPresenter.Padding: contribuye a la apariencia de los efectos visuales generados para los elementos de los controles de elemento al colocar el espaciado interno especificado alrededor de cada elemento.
  • TextBlock.Padding y RichTextBlock.Padding: amplían el rectángulo de selección alrededor del texto del elemento de texto. Estos elementos de texto no tienen ningún Background, por lo que puede resultar difícil verlos. Por ello, usa la configuración Margin en contenedores Block en su lugar.

En cada uno de estos casos, los elementos también tienen una propiedad de margen. Si se aplica tanto el margen como el espaciado interno, se suman, es decir, la distancia aparente entre un contenedor externo y el contenido interno será el margen más el espaciado interno.

Ejemplo

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

TextBox con margen y relleno de 0

Este es el mismo TextBox y Grid con los valores Margin y Padding en textBox, como se muestra en este XAML.

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

TextBox con valores de margen positivo y relleno

Recursos de estilo

No es necesario establecer individualmente cada valor de propiedad en un control. Normalmente, es más eficaz agrupar los valores de propiedad en un recurso Style y aplicar el estilo a un control . Esto es especialmente cierto cuando es necesario aplicar los mismos valores de propiedad a muchos controles. Para más información sobre los estilos, consulta Estilos XAML.

Recomendaciones generales

  • Solo se aplican los valores de medida a ciertos elementos clave y se usa el comportamiento del diseño fluido para los demás elementos. Esto proporciona una interfaz de usuario dinámica cuando cambia el ancho de la ventana.

  • Si usas los valores de medida, todas las dimensiones, los márgenes y el espaciado interno deben aplicarse 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. Usar valores en incrementos de 4 ofrece la mejor representación mediante la alineación de píxeles completos.

  • Para el ancho de ventana pequeña (menos de 640 píxeles), te recomendamos medianiles de 12 epx, y para el ancho de ventana más grande, te recomendamos medianiles de 24 epx.

medianiles recomendados