Diseño con posición absoluta y dinámica

Artículo
08/10/2011

Al crear una ventana en una aplicación, debe decidir cómo va a disponer los controles en dicha ventana. También debe decidir el comportamiento de los controles en la ventana cuando el usuario cambie el tamaño de la misma. Éstas son cuestiones relacionadas con las posiciones absoluta y dinámica.

Cuando se crea una ventana en una aplicación, se establece su tamaño y los tamaños de los controles en esa ventana. Debe decidir cómo se van a comportar la ventana y los controles si el contenido cambia. Por ejemplo, si agrega un control de etiqueta a una ventana, puede especificar cómo se va a comportar la etiqueta si el texto se traduce a otro idioma. Éstas son cuestiones relacionadas con el cambio de tamaño dinámico.

Tipos de diseños

A continuación se enumeran tres tipos de diseños que puede crear en WPF Designer for Visual Studio:

Absoluto
Los elementos secundarios se organizan especificando sus ubicaciones exactas en relación con su elemento primario. Por ejemplo, los controles se organizan en un panel especificando las coordenadas izquierda y superior de los controles con relación al panel. Los elementos secundarios no se mueven cuando se cambia el tamaño del elemento primario. Para obtener más información, vea Cómo: Crear un diseño basándose en la posición absoluta o Tutorial: Crear un diseño basándose en la posición absoluta.
Dinámico
Los elementos secundarios se organizan especificando cómo deben organizarse y ajustarse en relación con su elemento primario. Por ejemplo, puede organizar los controles en un panel y especificar que deben ajustarse horizontalmente. Si se reduce el elemento primario, los elementos secundarios se mueven a la fila siguiente. Cuando se amplia el elemento primario, los elementos secundarios se mueven a la fila anterior. Para obtener más información, vea Cómo: Crear un diseño dinámico o Tutorial: Crear un diseño dinámico.
Dinámico controlado por datos
Enlace un control a los datos. El control se rellena con los datos, y las filas y columnas se forman automáticamente para ajustar los datos.

Siempre que sea posible, es preferible usar un diseño dinámico. Los diseños dinámicos son los más flexibles y permiten al usuario final un mayor control sobre el entorno. Los diseños dinámicos permiten adaptar el contenido a la localización y a otros cambios del contenido. Los diseños absolutos se deben reservar para los casos en los que es importante una posición precisa e inalterable de los elementos o para cuando sólo hay un elemento secundario único, como una imagen o un gráfico.

Nota

Los diseños absoluto y dinámico se pueden combinar. Por ejemplo, puede tener una ventana con un diseño dinámico general pero que tiene una parte que usa la posición absoluta.

Nota

Establezca la propiedad UseLayoutRounding para especificar cuándo se redondean a valores de píxel enteros los valores de píxel no enteros que se calculan durante las transferencias de Measure y Arrange. Los controles secundarios heredan esta propiedad.

Paneles

WPF proporciona muchos controles Panel que admiten la posición absoluta y dinámica. Los controles de panel se pueden combinar agregando un control de panel como elemento secundario de otro control. Puede usar los siguientes controles de panel para colocar los elementos en sus aplicaciones:

Panel	Tipo de diseño	Descripción
Grid	Dinámico	Define un área donde puede colocar los elementos secundarios en filas y columnas.
DockPanel	Dinámico	Define un área donde puede organizar y apilar los elementos secundarios en el borde superior, inferior, izquierdo o derecho.
WrapPanel	Dinámico	Organiza automáticamente los elementos secundarios en posición secuencial, moviendo el contenido a la línea siguiente en el borde del contenedor primario. El orden se produce secuencialmente desde la parte superior a la inferior y de izquierda a derecha, dependiendo de si la orientación está establecida en horizontal o en vertical.
StackPanel	Dinámico	Organiza automáticamente los elementos secundarios en una única línea que puede estar orientada horizontal o verticalmente.
UniformGrid	Dinámico	Organiza automáticamente los elementos secundarios en filas y columnas. Las filas y las columnas están uniformemente separadas. Si un elemento no se ajusta en una celda, se trunca.
Canvas	Absoluto	Define un área donde puede colocar explícitamente los elementos secundarios utilizando las coordenadas.

Controles

WPF proporciona controles que admiten la posición dinámica controlada por datos. Estos controles se pueden enlazar a datos y dimensionar automáticamente para ajustar los datos. Puede utilizar los siguientes controles para mostrar dinámicamente los datos en las aplicaciones:

Control	Tipo de diseño	Descripción
ListView	Dinámico controlado por datos	Muestra una lista de elementos de datos.
GridView	Dinámico controlado por datos	Muestra los elementos de datos en columnas para un control de vista de lista.

Cambio de tamaño dinámico

En el cambio de tamaño dinámico, los controles se configuran para que se expandan o se contraigan automáticamente para ajustar su contenido. Por ejemplo, si dimensiona un control de etiqueta para ajustar texto en un idioma y el texto se traduce a otro idioma, puede establecer la etiqueta para cambiar el tamaño automáticamente con el fin de ajustar el nuevo texto. La posición dinámica admite el cambio de tamaño dinámico al ajustar automáticamente la posición de los controles cuando sus tamaños cambian.

A continuación se enumeran algunas propiedades que puede establecer para facilitar la creación de diseños dinámicos:

Propiedad	Valores	Se aplica a	Notas
Width	double, Auto, *	Ventanas, controles, columnas de cuadrícula.	Use el ajuste del tamaño Automático o mediante asterisco para obtener la máxima flexibilidad. Vea la siguiente sección para obtener más información. * sólo se aplica a las columnas de la cuadrícula.
Height	double, Auto, *	Ventanas, controles, filas de cuadrícula.	Use el ajuste del tamaño Automático o mediante asterisco para obtener la máxima flexibilidad. Vea la siguiente sección para obtener más información. * sólo se aplica a las filas de la cuadrícula.
MinWidth	double	Ventanas, controles, columnas de cuadrícula.	Establezca en 0 para obtener la máxima flexibilidad.
MinHeight	double	Ventanas, controles, filas de cuadrícula.	Establezca en 0 para obtener la máxima flexibilidad.
MaxWidth	double, Infinity	Ventanas, controles, columnas de cuadrícula.	Establezca en Infinity para obtener la máxima flexibilidad.
MaxHeight	double, Infinity	Ventanas, controles, filas de cuadrícula.	Establezca en Infinity para obtener la máxima flexibilidad.
ResizeMode	NoResize CanMinimize CanResize CanResizeWithGrip	Ventanas	Establezca en CanResize para obtener la máxima flexibilidad. Esto permite al usuario cambiar el tamaño de la ventana.
SizeToContent	Manual Width Height WidthAndHeight	Ventanas	Establezca en WidthAndHeight para obtener la máxima flexibilidad. Esto permite cambiar automáticamente el tamaño de la ventana cuando su contenido se expande.

Ajuste del tamaño Automático o mediante asterisco

El ajuste del tamaño Automático se usa para que los controles se ajusten a su contenido, incluso si el contenido cambia de tamaño. El ajuste del tamaño Automático o mediante asterisco se utiliza para distribuir el espacio disponible entre las filas y las columnas de una cuadrícula en proporciones ponderadas. En lenguaje XAML, los valores de asterisco se expresan como * (o n*). Por ejemplo, si tiene una cuadrícula con 4 columnas, puede establecer los anchos de las columnas como sigue:

Columna 1	Auto	La columna se dimensionará para ajustar su contenido.
Columna 2	*	Una vez calculadas las columnas con la opción Automático, la columna obtiene parte del ancho restante. La columna 2 será la mitad de ancha que la columna 4.
Columna 3	Auto	La columna se dimensionará para ajustar su contenido.
Columna 4	2*	Una vez calculadas las columnas con la opción Automático, la columna obtiene parte del ancho restante. La columna 4 será dos veces más ancha que la columna 2.