Tutorial: Organizar controles en Windows Forms mediante guías de alineación

  • Artículo

La posición precisa de los controles del formulario es de alta prioridad para muchas aplicaciones. Para poder conseguirla, el Diseñador de Windows Forms proporciona muchas herramientas de diseño. Una de las más importantes es la característica SnapLine.

Las guías de alineación muestran exactamente dónde alinear controles con otros controles. También muestran las distancias recomendadas para los márgenes entre los controles, según lo especificado por las directrices de la interfaz de usuario de Windows.

Las guías de alineación facilitan la alineación de los controles, para una apariencia y un comportamiento nítidos y profesionales (aspecto y sensación).

Crear el proyecto

  1. En Visual Studio, cree un proyecto de aplicación basado en Windows denominado "SnaplineExample".

  2. Seleccione el formulario en el Diseñador de Windows Forms.

Espacios y alineación de controles

Las guías de alineación proporcionan una manera precisa e intuitiva de alinear los controles en el formulario. Aparecen cuando se mueve un control o controles seleccionados cerca de una posición que se alinearía con otro control o conjunto de controles. La selección se "ajustará" a la posición sugerida a medida que la mueva más allá de los demás controles.

Para organizar controles mediante guías de alineación

  1. Arrastre un control Button del cuadro de herramientas al formulario.

  2. Mueva el control Button a la esquina inferior derecha del formulario. Observe las guías de alineación que aparecen cuando el control Button se aproxima a los bordes inferior y derecho del formulario. Estas guías de alineación muestran la distancia recomendada entre los bordes del control y el formulario.

  3. Mueva el control Button alrededor de los bordes del formulario y observe dónde aparecen las guías de alineación. Cuando haya terminado, mueva el control Button cerca del centro del formulario.

  4. Arrastre otro control Button desde el cuadro de herramientas al formulario.

  5. Mueva el segundo control Button hasta que esté casi al nivel del primero. Tenga en cuenta la guía de alineación que aparece en la línea base de texto de ambos botones y también que el control que está moviendo se ajusta a una posición que está exactamente nivelada con el otro control.

  6. Mueva el segundo control Button hasta que se sitúe justo encima del primero. Observe las guías de alineación que aparecen a lo largo de los bordes izquierdo y derecho de ambos botones, y tenga en cuenta que el control que se mueve se ajusta a una posición que se alinea exactamente con el otro control.

  7. Seleccione uno de los controles Button y muévalo cerca del otro, hasta que estén casi tocándose. Fíjese en la guía de alineación que aparece entre ellos. Esta distancia es la distancia recomendada entre los bordes de los controles. Tenga en cuenta también que el control que mueve se ajusta a esta posición.

  8. Arrastre dos controles Panel desde el cuadro de herramientas al formulario.

  9. Mueva uno de los controles Panel hasta que esté casi al nivel del primero. Observe las guías de alineación que aparecen a lo largo de los bordes superior e inferior de ambos controles, y observe que el control que está moviendo se ajusta en una posición que está exactamente nivelada con el otro control.

Alineación con los márgenes de formulario y contenedor

Las guías de alineación le ayudan a alinear los controles con los márgenes de formulario y contenedor de forma coherente.

  1. Seleccione uno de los controles Button y muévalo cerca del borde derecho del formulario hasta que aparezca una guía de alineación. La distancia de la guía de alineación desde el borde derecho es la suma de los valores de la propiedad Margin del control y de la propiedad Padding del formulario.

    Nota:

    Si la propiedad Padding del formulario se establece en 0,0,0,0, el Diseñador de Windows Forms proporciona al formulario un valor Padding sombreado de 9,9,9,9. Para invalidar este comportamiento, asigne un valor distinto de 0,0,0,0.

  2. Cambie el valor de la propiedad Button del control Margin mediante la expansión de la entrada Margin en la ventana Propiedades y la configuración de la propiedad All en 0. Para obtener más información, vea Tutorial: Diseñar controles de formularios Windows Forms con relleno, márgenes y la propiedad AutoSize.

  3. Mueva el control Button cerca del borde derecho del formulario hasta que aparezca una guía de alineación. Esta distancia viene dada por el valor de la propiedad Padding del formulario.

  4. Arrastre un control GroupBox del cuadro de herramientas al formulario.

  5. Cambie el valor de la propiedad GroupBox del control Padding mediante la expansión de la entrada Padding en la ventana Propiedades y la configuración de la propiedad All en 10.

  6. Arrastre un control Button del cuadro de herramientas al control GroupBox.

  7. Mueva el control Button cerca del borde derecho del control GroupBox hasta que aparezca una guía de alineación. Mueva el control Button dentro del control GroupBox y observe dónde aparecen las guías de alineación.

Alinear con controles agrupados

Puede usar guías de alineación para alinear controles agrupados, así como controles dentro de un control GroupBox.

  1. Seleccione dos de los controles del formulario. Mueva la selección y anote las guías de alineación que aparecen entre la selección y los demás controles.

  2. Arrastre un control GroupBox del cuadro de herramientas al formulario.

  3. Arrastre un control Button del cuadro de herramientas al control GroupBox.

  4. Seleccione uno de los controles Button y muévalo por el control GroupBox. Observe las guías de alineación que aparecen en los bordes del control GroupBox. Observe también las guías de alineación que aparecen en los bordes del control Button que contiene el control GroupBox. Los controles que son elementos secundarios de un control de contenedor también admiten guías de alineación.

Usar guías de alineación para colocar un control mediante la esquematización de su tamaño

  1. En el cuadro de herramientas, haga clic en el icono del control Button . No lo arrastre hasta el formulario.

  2. Mueva el puntero del mouse sobre la superficie de diseño del formulario. Observe que el puntero cambia a una cruz con el icono del control Button agregado. Observe también las guías de alineación que parecen sugerir posiciones alineadas para el control Button.

  3. Haga clic y mantenga presionado el botón del mouse.

  4. Arrastre el puntero del mouse alrededor del formulario. Tenga en cuenta que se dibuja un contorno, lo que indica la posición y el tamaño del control.

  5. Arrastre el puntero hasta que se alinee con otro control del formulario. Tenga en cuenta que aparece una guía de alineación para indicar la alineación.

  6. Suelte el botón del mouse (ratón). El control se crea en la posición y el tamaño indicados por el contorno.

Usar guías e alineación al arrastrar un control desde el cuadro de herramientas

  1. Arrastre un control Button del Cuadro de herramientas a su formulario, pero no suelte el botón del mouse.

  2. Mueva el puntero del mouse sobre la superficie de diseño del formulario. Tenga en cuenta que el puntero cambia para indicar la posición en la que se creará el nuevo control Button.

  3. Arrastre el puntero del mouse alrededor del formulario. Observe las guías de alineación que parecen sugerir posiciones alineadas para el control Button. Busque una posición alineada con otros controles.

  4. Suelte el botón del mouse (ratón). El control se crea en la posición indicada por las guías de alineación.

Cambiar el tamaño de un control mediante guías de alineación

  1. Arrastre un control Button del cuadro de herramientas al formulario.

  2. Cambie el tamaño del control Button cogiendo uno de los controladores de tamaño de las esquinas y arrastrándolo. Para obtener más información, vea Cómo: Cambiar el tamaño de los controles en formularios Windows Forms.

  3. Arrastre el controlador de tamaño hasta que uno de los bordes del control Button esté alineado con otro control. Tenga en cuenta que aparece una guía de alineación. Tenga en cuenta también que el controlador de ajuste de tamaño se ajusta a la posición indicada por la guía de alineación.

  4. Cambie el tamaño del control Button en diferentes direcciones y alinee el controlador de ajuste de tamaño a distintos controles. Observe cómo aparecen las guías de alineación en varias orientaciones para indicar la alineación.

Alinear una etiqueta con el texto de un control

  1. Arrastre un control TextBox del cuadro de herramientas al formulario. Cuando coloque el control TextBox en el formulario, haga clic en el glifo de la etiqueta inteligente y seleccione la opción Establecer texto en textBox1. Para obtener más información, vea Tutorial: Realización de tareas comunes con acciones de diseño.

  2. Arrastre un control Label del cuadro de herramientas al formulario.

  3. Cambie el valor de la propiedad Label del control AutoSize a true. Tenga en cuenta que los bordes del control se ajustan para ajustarse al texto para mostrar.

  4. Mueva el control Label a la izquierda del control TextBox, para que quede alineado con el borde inferior del control TextBox. Observe la guía de alineación que aparece a lo largo de los bordes inferiores de los dos controles.

  5. Mueva el control Label ligeramente hacia arriba, hasta que el texto Label y el texto TextBox estén alineados. Observe la guía de alineación con estilo diferente que aparece, lo que indica cuándo se alinean los campos de texto de ambos controles.

Uso de guías de alineación con navegación mediante teclado

  1. Arrastre un control Button del cuadro de herramientas al formulario. Colócalo en la esquina superior izquierda del formulario.

  2. Presione Ctrl+flecha abajo. Tenga en cuenta que el control se desplaza hacia abajo del formulario hasta la primera posición de alineación horizontal disponible.

  3. Presione Ctrl+flecha abajo hasta que el control alcance la parte inferior del formulario. Observe las posiciones que ocupa a medida que se desplaza hacia abajo por el formulario.

  4. Presione Ctrl+flecha derecha. Observe que el control se desplaza por el formulario hasta la primera posición de alineación vertical disponible.

  5. Presione Ctrl+flecha derecha hasta que el control alcance el lado del formulario. Observe las posiciones que ocupa a medida que se desplaza por el formulario.

  6. Mueva el control alrededor del formulario con una combinación de teclas de dirección. Observe las posiciones que ocupa el control y las guías de alineación que las acompañan.

  7. Pulse Mayús+teclas de flecha para cambiar el tamaño del control Button en incrementos de un píxel.

  8. Pulse Ctrl+Mayús+ para cambiar el tamaño del control Button en incrementos de guía de alineación.

Deshabilitar selectivamente las guías de alineación

  1. Arrastre un control TableLayoutPanel del cuadro de herramientas al formulario.

  2. Haga doble clic en el icono del control Button en el Cuadro de herramientas. Observe que aparece un nuevo control de botón en la primera celda del control TableLayoutPanel.

  3. Haga doble clic en el icono del control Button en el Cuadro de herramientas dos veces más. Esto deja una celda vacía en el control TableLayoutPanel.

  4. Arrastre un control Button del Cuadro de herramientas a la celda vacía del control TableLayoutPanel. Tenga en cuenta que no aparecen guías de alineación.

  5. Arrastre el control Button fuera del control TableLayoutPanel y muévalo alrededor del control TableLayoutPanel. Tenga en cuenta que las guías de alineación aparecen de nuevo.

Deshabilitación de las guías de alineación

Presione la tecla Alt y mientras mueve un control alrededor del formulario.

No aparecen guías de alineación y el control no se ajusta a ninguna posible posición de alineación.

Para deshabilitar las guías de alineación en el entorno de diseño

  1. En el menú Herramientas, abra el cuadro de diálogo Opciones. Seleccione Diseñador de Windows Forms.

  2. Seleccione el nodo General. En la sección Modo de diseño, cambie la selección de SnapLines a SnapToGrid.

  3. Seleccione Aceptar para aplicar el ajuste.

  4. Seleccione un control en el formulario y muévalo alrededor de los demás controles. Tenga en cuenta que las guías de alineación no aparecen.

Pasos siguientes

Las guías de alineación ofrecen un medio intuitivo de alinear controles en el formulario. Algunas sugerencias de investigación adicional son:

  • Intente anidar un control GroupBox dentro de otro control GroupBox. Coloque un control Button dentro del control secundario GroupBox, y otro dentro del control primario GroupBox. Mueva los controles Button para ver cómo las guías de alineación cruzan 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. Use guías de alineación para mover los controles Label para que su texto mostrado esté alineado con el texto de los controles TextBox.

Vea también