Cómo utilizar las propiedades Dock y Anchor en WinForms

Muchos desarrolladores que son nuevos en la programación WinForms tienen dificultades para mantener los diversos controles en sus formularios sincronizados entre sí y proporcionales al tamaño del formulario principal mientras este es redimensionado por el usuario. Esta puede ser una situación frustrante, especialmente para los desarrolladores que vienen de un background de programación web. Para aliviar este problema, el Framework .NET permite establecer propiedades en los controles secundarios para especificar su comportamiento al redimensionar el formulario principal. Las dos propiedades que se utilizan para especificar el comportamiento de redimensionamiento de un control son "Dock" y "Anchor".

La propiedad Anchor

Como su nombre lo indica, esta propiedad obliga al control a fijar su posición relativa o absoluta dentro del formulario o control principal. Esta propiedad tiene cuatro valores que se pueden activar o desactivar:

• Top: Indica que el control debe mantener su borde superior estacionario en relación al borde superior del formulario (o control) padre.
• Bottom: Indica que el control debe mantener su borde inferior estacionario en relación al borde inferior del formulario (o control) padre.
• Left: Indica que el control debe mantener su borde izquierdo estacionario en relación al borde izquierdo del formulario (o control) padre.
• Right: Indica que el control debe mantener su borde derecho estacionario en relación al borde derecho del formulario (o control) padre.

Para establecer la propiedad Anchor en un control, simplemente selecciona el control en el diseñador de Visual Studio y ve a la ventana de propiedades. Verás una propiedad etiquetada como "Anchor". Al hacer clic en la sección de valor de esta propiedad, aparecerá una ventana que te permitirá elegir los puntos de anclaje que deseas asignar al control. La Figura A muestra la ventana de configuración de anclaje con los valores "Top, Left" seleccionados. La Figura B muestra esta ventana con los valores "Bottom, Right" seleccionados.

Qué es un GUID y cómo se utiliza en el desarrollo de software

La configuración de anclaje predeterminada para un control cuando se coloca en un formulario en Visual Studio es "Top, Left". Esto indica que el control permanecerá estático en relación a los bordes superior e izquierdo del formulario.

Anclar no tiene mucho sentido hasta que en realidad veas cómo las diferentes configuraciones de anclaje afectan a los controles. Las siguientes imágenes deberían ayudar.

La Figura C muestra un formulario con 10 controles secundarios. Cada control secundario tiene diferentes valores para la propiedad Anchor y están etiquetados con su configuración de anclaje. El recuadro rojo oscuro detrás de los controles grises es otro control secundario, cuya propiedad Anchor está configurada como "Top, Bottom, Left, Right". La Figura D muestra el mismo formulario después de haber sido redimensionado a un área más grande.

Los mejores atajos de teclado para bash y zsh en la línea de comandos

Como puedes ver, cada control mantiene automáticamente su posición dentro del formulario principal. No se escribió código para lograr esto; simplemente configuramos la propiedad Anchor para cada control.

Es importante destacar un par de puntos aquí. Uno es que si no especificas que un control tiene anclaje izquierdo o derecho, mantendrá una posición izquierda/derecha relativa dentro del formulario principal. Lo mismo ocurre si no especificas si un control tiene anclaje superior o inferior. Un buen ejemplo de esto es el control etiquetado como "Anchor None". Ese control no tiene valores de anclaje, por lo que simplemente flota en el centro del formulario.

En el otro extremo, están los controles que tienen todos los valores de anclaje seleccionados (Top, Bottom, Left, Right). Un ejemplo de esto es el cuadro rojo oscuro visible detrás de los otros controles en la Figura C y la Figura D. Cuando se seleccionan todos los valores de anclaje, el control simplemente se agranda o reduce al redimensionar el formulario principal, manteniendo todos sus bordes estáticos en comparación con los bordes del formulario.

La propiedad Dock

La propiedad Dock hace que el control se adhiera a un borde específico del formulario principal (o control) como si estuviera pegado. Si bien esto también se puede lograr con la propiedad Anchor, la propiedad Dock te permite "apilar" controles secundarios uno encima (o al lado) del otro dentro del formulario principal. Si un control secundario cambia de tamaño, los otros controles acoplados junto a ese control se mueven junto con él.

Visual Studio 2008: La nueva versión con la función Visual Studio Shell

A diferencia de la propiedad Anchor, puedes establecer el valor Dock en un único valor. Los valores válidos se muestran a continuación:

• Top: Fuerza al control a estar en la parte superior del formulario principal (o control). Si hay otros controles secundarios del mismo padre configurados para acoplarse en la parte superior, los controles se apilarán uno encima del otro.
• Bottom: Fuerza al control a estar en la parte inferior del formulario principal (o control). Si hay otros controles secundarios del mismo padre configurados para acoplarse en la parte inferior, los controles se apilarán uno encima del otro.
• Left: Fuerza al control a estar en la parte izquierda del formulario principal (o control). Si hay otros controles secundarios del mismo padre configurados para acoplarse en la parte izquierda, los controles se apilarán uno al lado del otro.
• Right: Fuerza al control a estar en la parte derecha del formulario principal (o control). Si hay otros controles secundarios del mismo padre configurados para acoplarse en la parte superior, los controles se apilarán uno al lado del otro.
• Fill: Fuerza al control a cubrir toda la parte superior del formulario principal (o control). Si hay otros controles secundarios del mismo padre configurados para acoplarse en la parte superior, los controles se apilarán uno encima del otro.
• None: Indica que el control se comportará normalmente.

Para establecer el valor Dock de un control, selecciona el control en Visual Studio y ve a la ventana de propiedades. Verás una propiedad etiquetada como "Dock". Al hacer clic en la sección de valor de esta propiedad, aparecerá una ventana que te permitirá especificar cómo deseas acoplar el control. Estas formas se muestran en las siguientes imágenes (Figuras E, F y G) con varios valores asignados:

Figura F

Seleccionado "Dock Fill"

15 formas de maximizar la duración de la batería de tu laptop

Al igual que con la propiedad Anchor, todo esto no tiene mucho sentido hasta que lo veas en acción. La Figura H muestra un formulario con cinco controles secundarios, todos ellos con valores de acoplamiento diferentes.

La Figura I muestra la misma ventana que la Figura H, pero ahora la ventana se ha redimensionado a un área más grande.

Cómo buscar archivos MP3 en Google utilizando una consulta especial

La Figura J muestra nuevamente la misma ventana que la Figura H, pero esta vez los controles en la parte inferior, superior, izquierda y derecha del formulario se han hecho más pequeños. Observa que el control en el medio, que está configurado para acoplar "Fill", creció automáticamente.

Es importante tener en cuenta que el orden en que se agregan los controles al formulario puede afectar la forma en que se acoplan. Por ejemplo, si agregas un ControlA al formulario, lo configuras para acoplar "Fill", y luego agregas un ControlB al formulario y lo configuras para acoplar "Top", ControlB parecerá cubrir la parte superior de ControlA. La razón de esto es que ControlB se considera "delante" de ControlA ya que fue agregado después de ControlA. Para solucionar esta situación, debes hacer clic derecho en ControlA en Visual Studio y seleccionar "Traer al frente" en el menú contextual. Esto hará que ControlA esté delante de ControlB y los controles se comportarán como se espera.

Cómo añadir un asistente de instalación a tu aplicación en Visual Studio .NET

Ejemplo de aplicación

Para comprender completamente cómo utilizar las propiedades Dock y Anchor, descarga la aplicación de ejemplo que se incluye en la versión descargable de este artículo. Hay varios formularios dentro de la aplicación que demuestran diferentes usos de Dock y Anchor. La mejor manera de aprender sobre este tipo de funcionalidad es adentrarse en el código y ensuciarse las manos.

En Newsmatic nos especializamos en tecnología de vanguardia, contamos con los artículos mas novedosos sobre Desarrollo, allí encontraras muchos artículos similares a Cómo utilizar las propiedades Dock y Anchor en WinForms , tenemos lo ultimo en tecnología 2023.