Alineación, margen, relleno

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, 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.

• Alto y Ancho especifican el tamaño de un elemento. Los valores predeterminados son matemáticamente NaN (no un número). Puede establecer valores fijos medidos en píxeles efectivos o puede usar elajuste de tamaño automá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 y MinHeight/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, sí han calculado ActualWidth y ActualHeight.

Alineación

La alineación hace que la interfaz de usuario se vea ordenada, organizada y equilibrada y también se puede usar para establecer una jerarquía visual y relaciones.

• 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. Alto y ancho del número real cancelan un valor Stretch, que actuará en su lugar como un valor central. Algunos controles, como Botón, invalidan el valor Stretch predeterminado 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 el lápiz y la 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.

Margin

El margen 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 detección de colisiones ni para detectar 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, la parte superior, la derecha y la parte inferior (en ese orden).
• Los márgenes son aditivos. 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 márgenes negativos. Sin embargo, el uso de un margen negativo a menudo puede provocar recorte o superposiciones de elementos pares, por lo que no es común usar márgenes negativos.
• Los valores de margen se restringen al final, por lo que debe tener cuidado con los márgenes, ya que los contenedores pueden recortar o limitar elementos. Un valor de margen podría ser la causa de que un elemento no parezca mostrarse; con un margen aplicado, las dimensiones de un elemento se pueden restringir a 0.

Relleno

El relleno 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 de Margin, Padding no es una propiedad de FrameworkElement. Hay varias clases que definen su propia propiedad Padding:

• Control.Padding: hereda todas las clases derivadas de Control . No todos los controles tienen contenido, por lo que, para dichos 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: expanden el cuadro delimitador 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 Bloquear contenedores en su lugar.

En cada uno de estos casos, los elementos también tienen una propiedad Margin. Si se aplican tanto márgenes como rellenos, son aditivos: la distancia aparente entre un contenedor externo y cualquier contenido interno será la suma de márgenes y rellenos.

Example

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

Aquí tienes el mismo TextBox y Grid con los valores de Margin y Padding en el 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>

Recursos de estilo

No es necesario establecer cada valor de propiedad individualmente 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 obtener más información sobre el uso de estilos, consulta Estilos XAML.

Recomendaciones generales

• Aplique solo 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 utiliza valores de medida, todas las dimensiones, márgenes y rellenos deben estar en múltiplos 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 al alinearse con píxeles completos.
• Para anchos de ventana pequeños (menos de 640 píxeles), se recomiendan 12 canalizaciones epx y para anchos de ventana más grandes, se recomienda 24 canalizaciones epx.

Temas relacionados

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