Compartir a través de

Guía: Organizar controles en formularios de Windows Forms mediante líneas de anclaje

La colocación precisa de controles en el formulario es una prioridad alta para muchas aplicaciones. El Diseñador de Windows Forms proporciona muchas herramientas de diseño para lograrlo. Una de las más importantes es la SnapLine característica.

Las líneas de ajuste muestran exactamente dónde alinear controles con otros controles. También muestran las distancias recomendadas para los márgenes entre controles, tal como se especifican en las directrices de la interfaz de usuario de Windows.

Las líneas de ajuste facilitan la alineación de los controles, para una apariencia y un comportamiento nítidos y profesionales (apariencia y experiencia de uso).

Creación del 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 formularios.

Espacio y alineación de controles

Las líneas de ajuste proporcionan una forma precisa e intuitiva de alinear controles en tu 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 desplazará a la posición sugerida cuando la muevas más allá de los otros controles.

Para organizar controles mediante líneas de ajuste

  1. Arrastre un Button control desde el Cuadro de herramientas hasta el formulario.

  2. Mueva el Button control a la esquina inferior derecha del formulario. Observe las líneas de ajuste que aparecen a medida que el Button control se aproxima a los bordes inferior y derecho del formulario. Estas líneas guía muestran la distancia recomendada entre los bordes del control y el formulario.

  3. Mueva el control Button a lo largo de los bordes del formulario y observe dónde aparecen las líneas guía. Cuando haya terminado, mueva el Button control cerca del centro del formulario.

  4. Arrastre otro Button control desde el Cuadro de herramientas hasta el formulario.

  5. Mueva el segundo Button control hasta que esté casi al nivel del primero. Observe la línea de ajuste que aparece en la línea base de texto de ambos botones y note que el control que mueve se alinea exactamente con la posición del otro control.

  6. Mueva el segundo Button control hasta que se coloque directamente encima del primero. Observe las líneas de ajuste que aparecen a lo largo de los bordes izquierdo y derecho de ambos botones y observe que el control que mueve se ajusta a una posición que se alinea exactamente con el otro control.

  7. Seleccione uno de los Button controles y muévalo cerca del otro, hasta que estén casi tocando. Observe la línea de ajuste que aparece entre ellas. Esta distancia es la distancia recomendada entre los bordes de los controles. Tenga en cuenta también que el control que está moviendo se desplaza automáticamente a esta posición.

  8. Arrastre dos Panel controles desde el Cuadro de herramientas hasta el formulario.

  9. Mueva uno de los Panel controles hasta que esté casi al nivel del primero. Observe las líneas de ajuste que aparecen a lo largo de los bordes superior e inferior de ambos controles, y tenga en cuenta que el control que se mueve se ajusta a una posición exactamente nivelada con el otro control.

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

Las líneas de ajuste le ayudan a alinear sus controles con los márgenes de los formularios y contenedores de forma coherente.

  1. Seleccione uno de los Button controles 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 desde el borde derecho es la suma de la propiedad del control Margin y la propiedad del formulario Padding.

    Nota:

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

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

  3. Mueva el Button control cerca del borde derecho del formulario hasta que aparezca una línea de ajuste. Esta distancia ahora viene dada por el valor de la propiedad del Padding formulario.

  4. Arrastre un GroupBox control desde el Cuadro de herramientas hasta el formulario.

  5. Cambie el valor de la GroupBox propiedad del Padding control expandiendo la Padding entrada en la ventana Propiedades y estableciendo la All propiedad en 10.

  6. Arrastre un Button control desde el Cuadro de herramientas al GroupBox control .

  7. Mueva el Button control cerca del borde derecho del GroupBox control hasta que aparezca una línea de ajuste. Mueva el control Button dentro del control GroupBox y anote dónde aparecen las líneas guía.

Alineación con controles agrupados

Puede usar líneas de ajuste para alinear controles agrupados, así como controles dentro de un GroupBox control.

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

  2. Arrastre un GroupBox control desde el Cuadro de herramientas hasta el formulario.

  3. Arrastre un Button control desde el Cuadro de herramientas al GroupBox control .

  4. Seleccione uno de los Button controles y muévalo alrededor del GroupBox control. Observe las líneas de ajuste que aparecen en los bordes del GroupBox control. Ten en cuenta también las líneas de acoplamiento que aparecen en los bordes del control Button que está contenido por el control GroupBox. Los controles que son elementos secundarios de un control de contenedor también admiten líneas de acoplamiento.

Usar líneas de ajuste para colocar un control indicando su tamaño.

  1. En el Cuadro de herramientas, haga clic en el icono de control Button. No lo arrastres al formulario.

  2. Mueva el puntero del mouse sobre la superficie de diseño del formulario. Tenga en cuenta que el puntero cambia a una forma de cruz con el icono de control Button adjunto. Observe también las líneas de ajuste que parecen sugerir posiciones alineadas para el Button control.

  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, 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 línea de ajuste para indicar la alineación.

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

Usar líneas de ajuste al arrastrar un control desde el cuadro de herramientas

  1. Arrastre un Button control desde el Cuadro de herramientas hasta el 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 Button control.

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

  4. Suelte el botón del mouse. El control se crea en la posición indicada por las líneas de acoplamiento.

Cambio de tamaño de un control mediante líneas de ajuste

  1. Arrastre un Button control desde el Cuadro de herramientas hasta el formulario.

  2. Cambie el tamaño del Button control capturando uno de los controladores de ajuste de tamaño de la esquina y arrastrando. 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 ajuste de tamaño hasta que uno de los Button bordes del control esté alineado con otro control. Observe que aparece una línea guía. Tenga en cuenta también que el controlador de ajuste de tamaño se ajusta a la posición indicada por la línea de ajuste.

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

Alinear una etiqueta con el texto de un control

  1. Arrastre un TextBox control desde el Cuadro de herramientas hasta el formulario. Al colocar el TextBox control en el formulario, haga clic en el glifo de etiqueta inteligente y seleccione la opción Establecer texto en textBox1: Para obtener más información, consulte Tutorial: Realización de tareas comunes mediante acciones del diseñador.

  2. Arrastre un Label control desde el Cuadro de herramientas hasta el 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 adaptarse al texto que se muestra.

  4. Mueva el Label control a la izquierda del TextBox control, por lo que se alinea con el borde inferior del TextBox control. Observe la línea de ajuste que aparece en los bordes inferiores de los dos controles.

  5. Mueva el Label control ligeramente hacia arriba, hasta que el Label texto y el TextBox texto estén alineados. Tenga en cuenta la línea de ajuste que aparece con un estilo diferente, indicando cuándo los campos de texto de ambos controles están alineados.

Utilizar líneas de ajuste con la navegación por teclado

  1. Arrastre un Button control desde el Cuadro de herramientas hasta el formulario. Colóquelo en la esquina superior izquierda del formulario.

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

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

  4. Presione Ctrl+flecha derecha. Tenga en cuenta que el control se mueve a lo largo del 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 mueve 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 líneas de acoplamiento que las acompañan.

  7. Presione Mayús+teclas de dirección para cambiar el tamaño del Button control por incrementos de un píxel.

  8. Presione Ctrl+Mayús+teclas de dirección para cambiar el tamaño del Button control en incrementos de línea de ajuste.

Deshabilitar selectivamente las líneas de ajuste

  1. Arrastre un TableLayoutPanel control desde el Cuadro de herramientas hasta el formulario.

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

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

  4. Arrastre un Button control desde el Cuadro de herramientas a la celda vacía del TableLayoutPanel control. Tenga en cuenta que no aparecen líneas de ajuste.

  5. Arrastre el Button control fuera del TableLayoutPanel control y muévalo alrededor del TableLayoutPanel control. Tenga en cuenta que las líneas de ajuste aparecen de nuevo.

Deshabilitar líneas de ajuste

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

No aparecen líneas de ajuste y 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

  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 líneas de ajuste no aparecen.

Pasos siguientes

Las líneas de ajuste ofrecen un medio intuitivo de alinear los controles en tu formulario. Entre las sugerencias para más exploración se incluyen:

  • Pruebe a anidar un control GroupBox dentro de otro control GroupBox. Coloque el control Button dentro del control secundario GroupBox y otro dentro del control primario GroupBox. Mueva los Button controles para observar cómo las líneas de incrustación atraviesan los límites de los contenedores.

  • Cree una columna de controles TextBox y una columna correspondiente de controles Label. Establezca el valor de la propiedad Label de los controles AutoSize a true. Usa líneas de ajuste para mover los Label controles, de modo que su texto mostrado se alinee con el texto de los TextBox controles.

Consulte también