Tutorial: Organizar controles en formularios Windows Forms mediante FlowLayoutPanel

  • Artículo

Algunas aplicaciones requieren un formulario con un diseño que se organice de manera adecuada y automática a medida que el formulario o el contenido cambien de tamaño. Si necesita un diseño dinámico y no desea controlar los eventos Layout de forma explícita en el código, considere la posibilidad de usar un panel de diseño.

El control FlowLayoutPanel y el control TableLayoutPanel proporcionan formas intuitivas para organizar los controles en el formulario. Ambos proporcionan una capacidad automática y configurable para controlar las posiciones relativas de los controles secundarios que contienen, y ambos ofrecen características de diseño dinámico en tiempo de ejecución, lo que permite cambiar el tamaño y la posición de los controles secundarios a medida que las dimensiones del formulario primario cambian. Los paneles de diseño se pueden anidar dentro de paneles de diseño para habilitar la creación de interfaces de usuario sofisticadas.

El control TableLayoutPanel organiza su contenido en una cuadrícula, lo que proporciona una funcionalidad similar al elemento de <tabla> HTML. Las celdas se organizan en filas y columnas, y pueden tener distintos tamaños. Para obtener más información, consulta Walkthrough: Arranging Controls on Windows Forms Using a TableLayoutPanel.

El control FlowLayoutPanel organiza su contenido en una dirección de flujo específica: horizontal o vertical. Su contenido puede ajustarse desde una fila a la siguiente o desde una columna a la siguiente. Además, el contenido puede recortarse en lugar de ajustarse. Las tareas ilustradas en este tutorial incluyen:

  • Creación de un proyecto de Windows Forms

  • Organizar los controles horizontal y verticalmente

  • Cambiar la dirección del flujo

  • Insertar saltos de flujo

  • Organizar los controles mediante Padding y Margin

  • Insertar controles mediante un doble clic en estos en el cuadro de herramientas

  • Insertar un control dibujando su contorno

  • Insertar controles mediante el símbolo de intercalación

  • Reasignar controles existentes en un elemento primario diferente

Cuando termine, comprenderá el rol de estas importantes características de diseño.

Crear el proyecto

  1. En Visual Studio, cree un proyecto de aplicación basado en Windows llamado "FlowLayoutPanelExample" (Archivo>Nuevo>Proyecto>Visual C# o Visual Basic>Escritorio clásico>Aplicación de Windows Forms).

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

Organizar los controles horizontal y verticalmente

El control FlowLayoutPanel permite colocar controles en filas o columnas sin necesidad de especificar con precisión la posición de cada control individual.

El control FlowLayoutPanel puede cambiar el tamaño de sus controles secundarios o redistribuirlos a medida que las dimensiones del formulario primario cambian.

Para organizar controles horizontal y verticalmente mediante un control FlowLayoutPanel

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

  2. Arrastre un control Button del cuadro de herramientas al control FlowLayoutPanel. Tenga en cuenta que se mueve automáticamente a la esquina superior izquierda del control FlowLayoutPanel .

  3. Arrastre otro control Button del cuadro de herramientas al control FlowLayoutPanel. Tenga en cuenta que el control Button se mueve automáticamente a una posición junto al primer control Button . Si el control FlowLayoutPanel es demasiado estrecho para ajustar los dos controles en la misma fila, el nuevo control Button se mueve automáticamente a la fila siguiente.

  4. Arrastre algunos controles Button más del cuadro de herramientas al control FlowLayoutPanel. Siga colocando controles Button hasta que uno se ajuste a la fila siguiente.

  5. Cambie el valor de la propiedad FlowLayoutPanel del control WrapContents a false. Tenga en cuenta que los controles secundarios ya no fluyen a la fila siguiente. En su lugar, se mueven a la primera fila y se recortan.

  6. Cambie el valor de la propiedad FlowLayoutPanel del control WrapContents a true. Tenga en cuenta que los controles secundarios se ajustan de nuevo a la fila siguiente.

  7. Reduzca el ancho del control FlowLayoutPanel hasta que todos los controles Button se muevan a la primera columna.

  8. Aumente el ancho del control FlowLayoutPanel hasta que todos los controles Button se muevan a la primera fila. Es posible que deba cambiar el tamaño del formulario para alojar el ancho mayor.

Cambiar la dirección del flujo

La propiedad FlowDirection permite cambiar la dirección en la que se organizan los controles. Puede organizar los controles secundarios de izquierda a derecha, de derecha a izquierda, de arriba abajo o de abajo arriba.

Para cambiar la dirección del flujo en un control FlowLayoutPanel

  1. Cambie el valor de la propiedad FlowLayoutPanel del control FlowDirection a TopDown. Tenga en cuenta que los controles secundarios se reorganizan en una o más columnas, según el alto del control.

  2. Cambie el tamaño del control FlowLayoutPanel de modo que el alto sea menor que la columna de controles Button . Tenga en cuenta que el control FlowLayoutPanel reorganiza los controles secundarios para que fluyan a la columna siguiente. Siga disminuyendo el alto y observe que los controles secundarios fluyen a las columnas consecutivas. Cambie el valor de la propiedad FlowLayoutPanel del control FlowDirection a RightToLeft. Observe que las posiciones de los controles secundarios están invertidas. Observe el diseño al cambiar el valor de la propiedad FlowDirection a BottomUp.

Insertar saltos de flujo

El control FlowLayoutPanel proporciona una propiedad FlowBreak a sus controles secundarios. Al establecer el valor de la propiedad FlowBreak en true , el control FlowLayoutPanel deja de distribuir los controles en la dirección del flujo actual y ajusta a la siguiente fila o columna.

Para insertar saltos de flujo

  1. Cambie el valor de la propiedad FlowLayoutPanel del control FlowDirection a TopDown.

  2. Seleccione uno de los controles Button en el centro de la primera columna de la izquierda.

  3. Establezca el valor de la propiedad FlowBreak del control Button en true. Observe que la columna está rota y que los controles que siguen al control Button seleccionado fluyen a la columna siguiente. Establezca el valor de la propiedad FlowBreak del control Button en false para volver al comportamiento original.

Colocar controles mediante el acoplamiento y la delimitación

Los comportamientos de acoplamiento y delimitación de los controles secundarios difieren de los comportamientos de otros controles contenedor. El acoplamiento y la delimitación están relacionados con el control mayor en la dirección del flujo.

Para colocar controles mediante el acoplamiento y la delimitación

  1. Aumente el tamaño del control FlowLayoutPanel hasta que los controles Button estén organizados en una columna.

  2. Seleccione el control Button superior. Aumente su ancho hasta que doble el ancho de los demás controles Button .

  3. Seleccione el segundo control Button . Cambie el valor de su propiedad Anchor a Right. Observe que se mueve hasta que el borde derecho queda alineado con el borde derecho del primer control Button .

  4. Cambie el valor de su propiedad Anchor a Right y Left. Observe que su tamaño se ajusta al ancho del primer control Button .

  5. Seleccione el tercer control Button . Cambie el valor de su propiedad Dock a Fill. Observe que su tamaño se ajusta al ancho del primer control Button .

Organizar los controles mediante Padding y Margin

También puede organizar los controles del control FlowLayoutPanel cambiando las propiedades Padding y Margin .

La propiedad Padding permite controlar la colocación de controles dentro de una celda del control FlowLayoutPanel . Especifica el espaciado entre los controles secundarios y el borde del control FlowLayoutPanel .

La propiedad Margin permite controlar el espaciado entre los controles.

Para organizar los controles mediante las propiedades Padding y Margin

  1. Cambie el valor de la propiedad FlowLayoutPanel del control Dock a Fill. Si el formulario es suficientemente grande, los controles Button se moverán a la primera columna del control FlowLayoutPanel .

  2. Cambie el valor de la propiedad FlowLayoutPanel del control Padding mediante la expansión de la entrada Padding en la ventana Propiedades y la configuración de la propiedad All en 20. Para obtener más información, vea Tutorial: Diseñar controles de formularios Windows Forms con relleno, márgenes y la propiedad AutoSize. Tenga en cuenta que los controles secundarios se mueven hacia el centro del control FlowLayoutPanel . El valor aumentado de la propiedad Padding inserta los controles secundarios fuera de los bordes del control FlowLayoutPanel .

  3. Seleccione todos los controles Button del control FlowLayoutPanel y establezca el valor de la propiedad Margin en 20. Observe que el espaciado entre los controles Button aumenta, por lo que se separan más. Puede que necesite cambiar el tamaño del control FlowLayoutPanel para aumentarlo y ver todos los controles secundarios.

Insertar controles mediante un doble clic en estos en el cuadro de herramientas

Para rellenar el control FlowLayoutPanel puede hacer doble clic en los controles del cuadro de herramientas.

Para insertar controles mediante un doble clic en el cuadro de herramientas

  1. Haga doble clic en el icono del control Button en el Cuadro de herramientas. Observe que aparece un nuevo control Button en el control FlowLayoutPanel .

  2. Haga doble clic en algunos controles más en el cuadro de herramientas. Observe que los nuevos controles aparecen de manera consecutiva en el control FlowLayoutPanel .

Insertar un control dibujando su contorno

Puede insertar un control en un control FlowLayoutPanel y dibujar su contorno en una celda para especificar el tamaño.

Para insertar un control dibujando su contorno

  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 el control FlowLayoutPanel . Observe que el puntero cambia a una cruz con el icono del control Button agregado.

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

  4. Arrastre el puntero del mouse para dibujar el contorno del control Button . Cuando esté satisfecho con el tamaño, suelte el botón del mouse. Tenga en cuenta que el control Button se crea en la siguiente ubicación abierta del control FlowLayoutPanel .

Insertar controles mediante la barra de inserción

Puede insertar controles en una posición específica de un control FlowLayoutPanel . Cuando se arrastra un control en el área de cliente del control FlowLayoutPanel , aparece una barra de inserción para indicar la ubicación donde se insertará el control.

Para insertar un control mediante el símbolo de intercalación

  1. Arrastre un control Button desde el cuadro de herramientas al control FlowLayoutPanel y señale el espacio entre los dos controles Button . Observe que se dibuja una barra de inserción, que indica la posición del control Button cuando se coloca en el control FlowLayoutPanel. Antes de colocar el nuevo control Button en el control FlowLayoutPanel , mueva el puntero del mouse para observar cómo se mueve la barra de inserción.

  2. Coloque el nuevo control Button en el control FlowLayoutPanel . Tenga en cuenta que el nuevo control Button no está alineado con los demás, porque su propiedad Margin tiene un valor diferente.

Reasignar controles existentes en un elemento primario diferente

Puede asignar controles que existen en el formulario a un nuevo control FlowLayoutPanel .

Para cambiar el primario de los controles existentes

  1. Arrastre tres controles Button del cuadro de herramientas al formulario. Colóquelos cerca entre sí, pero sin alinearlos.

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

  3. Mueva el puntero del mouse cerca de los tres controles Button . Observe que el puntero cambia a una cruz con el icono del control FlowLayoutPanel agregado.

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

  5. Arrastre el puntero del mouse para dibujar el contorno del control FlowLayoutPanel . Dibuje el contorno alrededor de los tres controles Button .

  6. Suelte el botón del mouse (ratón). Observe que los tres controles Button se insertan en el control FlowLayoutPanel .

Pasos siguientes

Puede lograr un diseño complejo mediante una combinación de controles y paneles de diseño. Algunas sugerencias de investigación adicional son:

  • Cambie el tamaño de uno de los controles Button para aumentarlo y observe el efecto en el diseño.

  • Los paneles de diseño pueden contener otros paneles de diseño. Experimente colocando un control TableLayoutPanel en el control existente.

  • Acople el control FlowLayoutPanel al formulario primario. Cambie el tamaño del formulario y observe el efecto en el diseño.

  • Establezca la propiedad Visible de uno de los controles en false y observe cómo se distribuye FlowLayoutPanel en respuesta.

Vea también