Alineación, margen, espaciado internoAlignment, margin, padding

En aplicaciones para UWP, se heredan la mayoría de los elementos de la interfaz de usuario desde la clase FrameworkElement.In UWP apps, most user interface (UI) elements inherit from the FrameworkElement class. Cada FrameworkElement tiene dimensiones y propiedades de alineación, margen y espaciado interno que influyen en el comportamiento del diseño.Every FrameworkElement has dimensions, alignment, margin, and padding properties, which influence layout behavior. 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.The following guidance provides an overview of how to use these layout properties to make sure your app's UI is legible and easy to use in any context.

Dimensiones (alto y ancho)Dimensions (Height, Width)

Un tamaño correcto garantiza que todo el contenido sea claro y legible.Proper sizing ensures all content is clear and legible. Los usuarios no deberían desplazarse ni aplicar zoom para descifrar contenido principal.Users shouldn’t have to scroll or zoom to decipher primary content.

diagrama que muestra las dimensiones

  • Height y Width especifican el tamaño de un elemento.Height and Width specify the size of an element. Los valores predeterminados son, matemáticamente hablando, NaN (no es un número).The default values are mathematically NaN (Not A Number). 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.You can set fixed values measured in effective pixels, or you can use Auto or proportional sizing for fluid behavior.

  • ActualHeight y ActualWidth son propiedades de solo lectura que proporcionan el tamaño de un elemento en tiempo de ejecución.ActualHeight and ActualWidth are read-only properties that provide the size of an element at runtime. Si los diseños fluidos se amplían o se reducen, los valores cambian en un evento SizeChanged.If fluid layouts grow or shrink, then the values change in a SizeChanged event. Ten en cuenta que un control RenderTransform no cambiará los valores ActualHeight y ActualWidth.Note that a RenderTransform will not change the ActualHeight and ActualWidth values.

  • 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.MinWidth/MaxWidth and MinHeight/MaxHeight specify values that constrain the size of an element while allowing fluid resizing.

  • FontSize y otras propiedades de texto controlan el tamaño del diseño para los elementos de texto.FontSize and other text properties control layout size for text elements. Aunque los elementos de texto no tienen dimensiones declaradas de manera explícita, sí que han calculado ActualWidth y ActualHeight.While text elements don't have explicitly declared dimensions, they do have calculated ActualWidth and ActualHeight.

AsociaciónAlignment

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.Alignment makes your UI look neat, organized, and balanced and can also be used to establish visual hierarchy and relationships.

diagrama que muestra la alineación

  • HorizontalAlignment y VerticalAlignment especifican cómo debe colocarse un elemento en su contenedor principal.HorizontalAlignment and VerticalAlignment specify how an element should be positioned within its parent container.

    • Los valores de HorizontalAlignment son Left , Center , Right y Stretch.The values for HorizontalAlignment are Left , Center , Right , and Stretch.
    • Los valores de VerticalAlignment son Top , Center , Bottom y Stretch.The values for VerticalAlignment are Top , Center , Bottom , and Stretch.
  • Stretch es el valor predeterminado para ambas propiedades, y los elementos ocupan todo el espacio que se les proporciona en el contenedor principal.Stretch is the default for both properties, and elements fill all of the space they're provided in the parent container. Los valores de Height y Width con un número real anulan un valor Stretch, que en cambio actuará como un valor Center.Real-number Height and Width cancel a Stretch value, which will instead act as a Center value. Algunos controles, como Button, invalidan el valor predeterminado Stretch en su estilo predeterminado.Some controls, like Button, override the default Stretch value in their default style.

  • HorizontalContentAlignment y VerticalContentAlignment especifican cómo deben colocarse los elementos secundarios en un contenedor.HorizontalContentAlignment and VerticalContentAlignment specify how child elements are positioned within a container.

  • La alineación puede afectar a los recortes en un panel de diseño.Alignment can affect clipping within a layout panel. Por ejemplo, con HorizontalAlignment="Left", el lado derecho del elemento se recorta si el contenido es mayor que ActualWidth.For example, with HorizontalAlignment="Left", the right side of the element gets clipped if the content is larger than the ActualWidth.

  • Los elementos de texto usan la propiedad TextAlignment.Text elements use the TextAlignment property. Por lo general, te recomendamos que uses la alineación a la izquierda, el valor predeterminado.Generally, we recommend using left-alignment, the default value. Para obtener más información sobre cómo aplicar estilo al texto, consulta Tipografía.For more information about styling text, see Typography.

Margen y espaciadoMargin and padding

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.Margin and padding properties keep UI from looking too cluttered or too sparse, and they can also make it easier to use certain inputs like pen and touch. Esta ilustración muestra los márgenes y el espaciado interno de un contenedor y su contenido.Here's an illustration displaying margins and padding for a container and its content.

márgenes de XAML y diagrama de espaciado interno

MargenMargin

Margin controla la cantidad de espacio vacío alrededor de un elemento.Margin controls the amount of empty space around an element. 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.Margin does not add pixels to ActualHeight and ActualWidth and is not considered part of the element for hit testing and sourcing input events.

  • Los valores del margen pueden ser uniformes o diferentes.Margin values can be uniform or distinct. Con Margin="20", un margen uniforme de 20 píxeles se aplicaría al elemento a la izquierda, parte superior, derecha y parte inferior.With Margin="20", a uniform margin of 20 pixels would be applied to the element on the left, top, right, and bottom sides. Con Margin="0,10,5,25", los valores se aplicarían a la izquierda, parte superior, derecha y parte inferior (en este orden).With Margin="0,10,5,25", the values are applied to the left, top, right, and bottom (in that order).

  • Los márgenes se suman.Margins are additive. 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.If two elements both specify a uniform margin of 10 pixels and are adjacent peers in any orientation, the distance between them is 20 pixels.

  • Se permiten los márgenes negativos.Negative margins are permitted. 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.However, using a negative margin can often cause clipping, or overdraws of peers, so it's not a common technique to use negative margins.

  • 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.Margin values are constrained last, so be careful with margins because containers can clip or constrain elements. 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.A Margin value could be the cause of an element not appearing to render; with a Margin applied, an element's dimension can be constrained to 0.

Espaciado internoPadding

Padding controla la cantidad de espacio entre el borde interno de un elemento y su contenido o elementos secundarios.Padding controls the amount of space between the inner border of an element and its child content or elements. Un valor Padding positivo disminuye el área de contenido del elemento.A positive Padding value decreases the content area of the element.

A diferencia del margen, el espaciado interno no es una propiedad de FrameworkElement.Unlike Margin, Padding is not a property of FrameworkElement. Existen varias clases que definen su propia propiedad de espaciado interno:There are several classes which each define their own Padding property:

  • Control.Padding: hereda en todas las clases derivadas de Control.Control.Padding: inherits to all Control derived classes. No todos los controles tienen contenido, de modo que, para algunos controles, establecer la propiedad no hace nada.Not all controls have content, so for those controls, setting the property does nothing. Si el control tiene un borde, el espaciado interno se aplica dentro de dicho borde.If the control has a border, the padding applies inside that border.
  • Border.Padding: define el espacio entre la línea de rectángulo creada por los objetos BorderThickness/BorderBrush y el elemento Child.Border.Padding: defines space between the rectangle line created by BorderThickness/BorderBrush and the Child element.
  • 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.ItemsPresenter.Padding: contributes to appearance of the items in item controls, placing the specified padding around each item.
  • TextBlock.Padding y RichTextBlock.Padding: amplían el rectángulo de selección alrededor del texto del elemento de texto.TextBlock.Padding and RichTextBlock.Padding: expand the bounding box around the text of the text element. Estos elementos de texto no tienen ningún Background , por lo que puede resultar difícil verlos.These text elements don't have a Background , so it can be visually difficult to see. Por ello, usa la configuración Margin en contenedores Block en su lugar.For that reason, use Margin settings on Block containers instead.

En cada uno de estos casos, los elementos también tienen una propiedad de margen.In each of these cases, elements also have a Margin property. 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.If both Margin and Padding are applied, they are additive: the apparent distance between an outer container and any inner content will be margin plus padding.

EjemploExample

Echemos un vistazo a los efectos de Margin y Padding en controles reales.Let's look at the effects of Margin and Padding on real controls. Este es un TextBox dentro de una Grid con los valores predeterminados Margin y Padding establecidos en 0.Here’s a TextBox inside of a Grid with the default Margin and Padding values of 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.Here’s the same TextBox and Grid with Margin and Padding values on the TextBox as shown in this 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 estiloStyle resources

No hace falta establecer cada valor individualmente en un control.You don't have to set each property value individually on a control. Suele ser más eficiente agrupar valores de propiedad en un recurso Style y aplicar el Style a un control.It's typically more efficient to group property values into a Style resource and apply the Style to a control. Esto es especialmente cierto cuando necesites aplicar los mismos valores de propiedad a muchos controles.This is especially true when you need to apply the same property values to many controls. Para más información sobre los estilos, consulta Estilos XAML.For more info about using styles, see XAML styles.

Recomendaciones generalesGeneral recommendations

  • 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.Only apply measurement values to certain key elements and use fluid layout behavior for the other elements. Esto proporciona una interfaz de usuario dinámica cuando cambia el ancho de la ventana.This provides for responsive UI when the window width changes.

  • Si usas los valores de medida, todas las dimensiones, los márgenes y el espaciado interno deben aplicarse en incrementos de 4 epx.If you do use measurement values, all dimensions, margins, and padding should be in increments of 4 epx. Cuando la UWP usa píxeles efectivos y ajustes de escala para que tu aplicación sea legible en todos los dispositivos y tamaños de pantalla, ajusta la escala de los elementos de interfaz de usuario en múltiplos de 4.When UWP uses effective pixels and scaling to make your app legible on all devices and screen sizes, it scales UI elements by multiples of 4. Usar valores en incrementos de 4 ofrece la mejor representación mediante la alineación de píxeles completos.Using values in increments of 4 results in the best rendering by aligning with whole pixels.

  • 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.For small window widths (less than 640 pixels), we recommend 12 epx gutters, and for larger window widths, we recommend 24 epx gutters.

medianiles recomendados