Tutorial: Organizar controles en formularios Windows Forms mediante líneas de ajuste
La posición precisa de los controles en el formulario es de alta prioridad para muchas aplicaciones. El Diseñador de Windows Forms ofrece muchas herramientas de diseño para realizarlo. Una de las más importantes es la característica SnapLine.
Las líneas de ajuste muestran precisamente dónde alinear controles con otros controles. También le muestran las distancias recomendadas para los márgenes entre los controles, tal como está especificado en las Instrucciones de la interfaz de usuario de Windows. Para obtener información detallada, vea User Interface Design and Development.
Las líneas de ajuste facilitan la alineación de los controles, para obtener una apariencia y comportamiento nítido y profesional.
Las tareas ilustradas en este tutorial incluyen:
Crear un proyecto de formularios Windows Forms
Espaciar y alinear controles mediante guías de alineación
Alinear a márgenes del contenedor y formulario
Alinear a controles agrupados
Utilizar líneas de ajuste para colocar un control esquematizando el tamaño
Utilizar líneas de ajuste al arrastrar un control en el Cuadro de herramientas
Cambiar el tamaño de los controles utilizando guías de alineación
Alinear una etiqueta a un texto de control
Utilizar líneas de ajuste con la navegación mediante el teclado
Líneas de ajuste y paneles de diseño
Deshabilitar líneas de ajuste
Al finalizar, podrá entender la función que desempeña esta importante característica de líneas de ajuste en el diseño.
Nota
Los cuadros de diálogo y comandos de menú que se ven pueden diferir de los descritos en la Ayuda, en función de los valores de configuración o de edición activos. Para cambiar la configuración, elija la opción Importar y exportar configuraciones del menú Herramientas. Para obtener más información, vea Trabajar con valores de configuración.
Crear el proyecto
El primer paso es crear el proyecto y configurar el formulario.
Para crear el proyecto
Cree un proyecto de aplicación basada en Windows llamado a "SnaplineExample." Para obtener información detallada, vea Cómo: Crear un nuevo proyecto de aplicación de Windows Forms.
Seleccione el formulario en el diseñador de formularios.
Espaciar y alinear controles mediante guías de alineación
Las líneas de ajuste ofrecen una manera precisa e intuitiva de alinear controles en el formulario. Aparecen cuando está moviendo un control o controles seleccionados cerca de una posición que podría alinear con otro control o conjunto de controles. La selección se "ajustará" a la posición sugerida cuando la mueve más allá de los demás controles.
Para organizar controles mediante las líneas de ajuste
Arrastre un control Button desde el Cuadro de herramientas al formulario.
Mueva el control Button a la esquina inferior derecha del formulario. Observe las líneas de ajuste que aparecen cuando el control Button se acerca los bordes inferior y derecho del control. Estas líneas de ajuste muestran la distancia recomendada entre los bordes del control y el formulario.
Mueva el control Button alrededor de los bordes del formulario y observe dónde aparecen las líneas de ajuste. Cuando finalice, mueva el control Button cerca del centro del formulario.
Arrastre otro control Button desde el Cuadro de herramientas al formulario.
Mueva el segundo control Button hasta que esté casi al mismo nivel que el primero. Observe la línea de ajuste que aparece en la línea base del texto de ambos botones, y observe que el control que está moviendo se ajusta a la posición que está exactamente al mismo nivel que el otro control.
Mueva el segundo control Button hasta que se coloque directamente sobre el primero. Observe la línea de ajuste que aparece en los bodes derecho e izquierdo de ambos botones, y observe que el control que está moviendo se ajusta a la posición que está alineada exactamente con el otro control.
Seleccione uno de los controles Button y muévalo cerca del otro, hasta que casi se toquen. Observe la línea de ajuste que aparece entre ellos. Ésta es la distancia recomendada entre los bordes de los controles. También tenga en cuenta que el control que está moviendo se ajusta a esta posición.
Arrastre dos controles Panel desde el Cuadro de herramientas al formulario.
Mueva uno de los controles Panel hasta que esté prácticamente al mismo nivel que el primero. Observe la línea de ajuste que aparece junto a los bordes superior e inferior de ambos botones, y observe que el control que está moviendo se ajusta a la posición que está exactamente al mismo nivel que el otro control.
Alinear a márgenes del contenedor y formulario
Las líneas de ajuste le ayudan a alinear los controles a los márgenes del contenedor y del formulario de una manera coherente.
Para alinear controles a los márgenes del contenedor y del formulario
- Seleccione uno de los controles Button y muévalo cerca del borde derecho del formulario hasta que aparezca una línea de ajuste. La distancia de la línea de ajuste del borde derecho es la suma de los valores de la propiedad Margin del control y de la propiedad del formulario Padding.
Nota
Si la propiedad Padding del formulario se establece en 0,0,0,0, el Diseñador de Windows Forms proporciona al formulario el valor 9,9,9,9 de la propiedad Padding sombreada. Para invalidar este comportamiento, asigne un valor distinto de 0,0,0,0.
Cambie el valor de la propiedad Margin del control Button expandiendo la entrada Margin en la ventana Propiedades y estableciendo la propiedad All en 0. Para obtener información detallada, vea Tutorial: Diseñar controles de formularios Windows Forms con relleno, márgenes y la propiedad AutoSize.
Mueva el control Button cerca del borde derecho del formulario hasta que aparezca una línea de ajuste. El valor de la propiedad Padding del formulario proporciona ahora esta distancia.
Arrastre un control GroupBox desde el Cuadro de herramientas al formulario.
Cambie el valor de la propiedad Padding del control GroupBox expandiendo la entrada Padding en la ventana Propiedades y estableciendo la propiedad All en 10.
Arrastre un control Button desde el Cuadro de herramientas al control GroupBox.
Mueva el control Button cerca del borde derecho del formulario del control GroupBox hasta que aparezca una línea de ajuste. Mueva el control Button dentro del control GroupBox y observe dónde aparecen las líneas de ajuste.
Alinear a controles agrupados
Puede utilizar las líneas de ajuste para alinear controles agrupados así como a controles dentro de un control GroupBox.
Para alinear a los controles agrupados
Seleccione dos de los controles en el formulario. Mueva la selección alrededor y observe las líneas de ajuste que aparecen entre la selección y los demás controles.
Arrastre un control GroupBox desde el Cuadro de herramientas al formulario.
Arrastre un control Button desde el Cuadro de herramientas al control GroupBox.
Seleccione uno de los controles Button y muévalo alrededor del control GroupBox. Observe las líneas de ajuste que aparecen en los bordes del control GroupBox. También observe las líneas de ajuste que aparecen en los bordes del control Button contenido en el control GroupBox. Los controles secundarios de un control contenedor también admiten líneas de ajuste.
Utilizar líneas de ajuste para colocar un control esquematizando el tamaño
Las líneas de ajuste le ayudan a alinear los controles cuando los coloca por primera vez en un formulario.
Para utilizar líneas de ajuste para colocar un control esquematizando su tamaño
En el Cuadro de herramientas, haga clic en el icono de control Button. No lo arrastre hacia el formulario.
Mueva el puntero del mouse sobre la superficie de diseño del formulario. Observe que el puntero cambia a una forma de cruz con el icono de control Button adjuntado. Observe también las líneas de ajuste que sugieren las posiciones alineadas para el control Button.
Haga clic y mantenga presionado el botón del mouse.
Arrastre el puntero del mouse alrededor del formulario. Observe que se dibuja un contorno, indicando la posición y el tamaño del control.
Arrastre el puntero hasta que alinee con otro control en el formulario. Observe que aparece una línea de ajuste para indicar la alineación.
Suelte el botón del mouse. Se crea el control en la posición y el tamaño indicado por el contorno.
Utilizar líneas de ajuste al arrastrar un control en el Cuadro de herramientas
Las líneas de ajuste le ayudan a alinear los controles cuando los arrastra del Cuadro de herramientas al formulario.
Para utilizar las líneas de ajuste al arrastrar un control desde el Cuadro de herramientas
Arrastre un control Button desde el Cuadro de herramientas al formulario, pero no suelte el botón del mouse.
Mueva el puntero del mouse sobre la superficie de diseño del formulario. Observe que el puntero cambia para indicar la posición en la que se creará el nuevo control Button.
Arrastre el puntero del mouse alrededor del formulario. Observe las líneas de ajuste que sugieren las posiciones alineadas para el control Button. Encuentre una posición que se alinee con otros controles.
Suelte el botón del mouse. El control se crea en la posición indicada por las líneas de ajuste.
Cambiar el tamaño de los controles utilizando guías de alineación
Las guías de alineación le ayudan a alinear los controles cuando cambia su tamaño.
Para cambiar el tamaño de un control mediante las líneas de ajuste
Arrastre un control Button desde el Cuadro de herramientas al formulario.
Cambie el tamaño del control Button manteniendo sujeto uno de los cuadros de tamaño de esquina y arrastrándolo. Para obtener información detallada, vea Cómo: Cambiar el tamaño de los controles en formularios Windows Forms.
Arrastre el cuadro de tamaño hasta que uno de los bordes de control Button se alinee con otro control. Observe que aparece una línea de ajuste. También observe que el cuadro de tamaño se ajusta a la posición indicada por la línea de ajuste.
Cambie el tamaño del control Button en diferentes direcciones y alinee el cuadro de tamaño a los distintos controles. Observe cómo aparecen las guías de alineación en distintas orientaciones para indicar la alineación.
Alinear una etiqueta a un texto de control
Algunos controles proporcionan una línea de ajuste para alinear otros controles al texto mostrado.
Para alinear una etiqueta al texto de un control
Arrastre un control TextBox desde el Cuadro de herramientas hasta el formulario. Cuando coloca el control TextBox en el formulario, haga clic en el glifo de la etiqueta inteligente y seleccione la opción Establecer el texto en textBox1. Para obtener información detallada, vea Tutorial: Realizar tareas comunes utilizando etiquetas inteligentes en controles de formularios Windows Forms.
Arrastre un control Label desde el Cuadro de herramientas hasta el formulario.
Cambie el valor de la propiedad AutoSize del control Label a true. Observe que los bordes de control se ajustan para adaptarse el texto de la presentación.
Mueva el control Label a la izquierda del control TextBox, para que se alinee con el borde inferior del control TextBox. Observe la línea de ajuste que aparece a lo largo del borde inferior de los dos controles.
Mueva el control Label ligeramente hacia arriba, hasta que el texto Label y el texto TextBox estén alineados. Observe la línea de ajuste con estilo diferente que aparece, que indica cuándo se alinean los campos de texto de ambos controles.
Utilizar líneas de ajuste con la navegación con el teclado
Las líneas de ajuste le ayudan a alinear los controles cuando está organizándolos mediante las teclas de dirección del teclado.
Para utilizar las líneas de ajuste con navegación mediante el teclado
Arrastre un control Button desde el Cuadro de herramientas al formulario. Colóquelo en la esquina superior izquierda del formulario.
Presione CTRL+FLECHA ABAJO. Observe que el control se desplaza hacia abajo por el formulario hasta la primera posición de la alineación horizontal disponible.
Presione CTRL+FLECHA ABAJO hasta que el control alcance la parte inferior del formulario. Observe la posición que ocupa cuando se desplaza hacia abajo por el formulario.
Presione CTRL+FLECHA DERECHA. Observe que el control se desplaza horizontalmente por el formulario hasta la primera posición de la alineación vertical disponible.
Presione CTRL+FLECHA DERECHA hasta que el control alcance el lado del formulario. Observe la posición que ocupa cuando se desplaza horizontalmente por el formulario.
Mueva el control alrededor del formulario con una combinación de teclas de dirección. Tenga en cuenta las posiciones que ocupa el control así como las de las líneas de ajuste que lo acompañan.
Presione cualquier tecla de dirección + MAYÚS para cambiar el tamaño del control Button mediante incrementos de un píxel.
Presione la tecla de dirección de CTRL+MAYÚS +cualquier tecla de dirección para cambiar el tamaño del control Button en incrementos de línea de ajuste.
Líneas de ajuste y paneles de diseño
Las líneas de ajuste se deshabilitan dentro de los paneles de diseño.
Para deshabilitar selectivamente las líneas de ajuste
Arrastre un control TableLayoutPanel desde el Cuadro de herramientas al formulario.
Haga doble clic en el icono de control Button en el Cuadro de herramientas. Observe que aparece un nuevo control de botón en la primera celda del control TableLayoutPanel.
Haga doble clic dos veces más en el icono del control Button en el Cuadro de herramientas. Esta opción deja una celda vacía en el control TableLayoutPanel.
Arrastre un control Button desde el Cuadro de herramientas a la celda vacía del control TableLayoutPanel. Observe que no aparece ninguna línea de ajuste.
Arrastre el control Button fuera del control TableLayoutPanel y muévalo alrededor del control TableLayoutPanel. Observe que las líneas de ajuste aparecen de nuevo.
Deshabilitar líneas de ajuste
Las líneas de ajuste están activadas de manera predeterminada. Puede deshabilitar selectivamente las líneas de ajuste o deshabilitarlas en el entorno de diseño.
Para deshabilitar selectivamente las líneas de ajuste
Presione la tecla ALT mientras mueve un control alrededor del formulario.
Observe que no aparece ninguna línea de ajuste y que el control no se ajusta a ninguna posible posición de alineación.
Para deshabilitar las líneas de ajuste en el entorno de diseño
En el menú Herramientas, abra el cuadro de diálogo Opciones. Abra el cuadro de diálogo Diseñador de Windows Forms. Para obtener información detallada, vea General, Diseñador de Windows Forms, Opciones (Cuadro de diálogo).
Seleccione el nodo General. En la sección Modo diseño, cambie la selección de Líneas de ajuste a AjustarALaCuadrícula.
Haga clic en Aceptar para aplicar la configuración.
Seleccione un control en su formulario y muévalo alrededor de los demás controles. Observe que las líneas de ajuste no aparecen.
Pasos siguientes
Las líneas de ajuste proporcionan una forma intuitiva de alinear los controles en el formulario. Para una exploración más a fondo, pruebe estas sugerencias:
Pruebe a anidar un control GroupBox dentro de otro control GroupBox. Coloque un control Button dentro del control GroupBox secundario y otro dentro del control GroupBox principal. Mueva los controles Button para ver cómo se cruzan las líneas de ajuste con los límites del contenedor.
Cree una columna de controles TextBox y una columna correspondiente de controles Label. Establezca el valor de la propiedad AutoSize de los controles Label en true. Utilice las líneas de ajuste para mover los Labelcontroles para que el texto mostrado se alinee con el texto en los controles TextBox.
Para obtener información sobre el diseño de la interfaz de usuario de Windows, vea el libro Microsoft Windows User Experience: Official Guidelines for User Interface Developers and Designers, Redmond, WA: Microsoft Press, 1999. (USBN: 0-7356-0566-1).
Vea también
Tareas
Tutorial: Organizar controles en formularios Windows Forms mediante FlowLayoutPanel
Tutorial: Organizar controles en formularios Windows Forms mediante TableLayoutPanel