Tutorial: Organizar controles en formularios Windows Forms mediante FlowLayoutPanel

Artículo
10/07/2008

Actualización: noviembre 2007

Algunas aplicaciones precisan un formulario con un diseño que se organice a sí mismo apropiadamente a medida que cambia de tamaño o cuando el contenido cambia de tamaño. Cuando necesita un diseño dinámico y no desea controlar explícitamente los eventos Layout en el código, considere utilizar un panel de diseño.

El control FlowLayoutPanel y el control TableLayoutPanel proporcionan formas intuitivas de organizar los controles en el formulario. Ambos controles proporcionan una capacidad automática y configurable de controlar las posiciones relativas de los controles secundarios contenidos en ellos, y ambos ofrecen funciones de diseño dinámicas en tiempo de ejecución, de tal forma que puede cambiar el tamaño y la posición de los controles secundarios a medida que cambian las dimensiones del formulario principal. Los paneles de diseño se pueden anidar dentro de paneles de diseño, para habilitar la realización de interfaces de usuario más complejas.

TableLayoutPanel organiza su contenido en una cuadrícula, proporcionando una funcionalidad similar al elemento <table> de HTML. Las celdas se organizan en filas y columnas y éstas pueden tener distintos tamaños. Para obtener más información, vea Tutorial: Organizar controles en formularios Windows Forms mediante TableLayoutPanel.

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

Crear un proyecto de formularios Windows Forms
Organizar horizontal y verticalmente los controles
Cambiar la dirección de flujo
Insertar saltos de flujo
Organizar controles mediante el relleno y márgenes
Insertar controles haciendo doble clic en ellos en el Cuadro de herramientas
Insertar un control dibujando su contorno
Insertar controles mediante el símbolo de intercalación
Reasignar los controles existentes a un elemento primario diferente

Al finalizar, podrá entender la función que desempeñan estas importantes características de 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 la configuración activa o la edición. Para cambiar la configuración, elija la opción Importar y exportar configuraciones en el menú Herramientas. Para obtener más información, vea Valores de configuración de Visual Studio.

Crear el proyecto

El primer paso es crear el proyecto y configurar el formulario.

Para crear el proyecto

Cree un proyecto de aplicación basado en Windows llamado "FlowLayoutPanelExample". Para obtener más información, vea Cómo: Crear un proyecto de aplicación para Windows.
Seleccione el formulario en el Diseñador de formularios.

Organizar horizontal y verticalmente los controles

El control FlowLayoutPanel le permite colocar los controles a lo largo de filas o columnas sin que tenga que especificar con precisión la posición de cada control individual.

El control FlowLayoutPanel puede cambiar el tamaño o el flujo de los controles secundarios cuando cambien las dimensiones del formulario principal.

Organizar controles horizontal y verticalmente mediante un FlowLayoutPanel

Arrastre un control FlowLayoutPanel desde el Cuadro de herramientas al formulario.
Arrastre un control Button desde el Cuadro de herramientas al control FlowLayoutPanel. Observe que se mueve automáticamente a la esquina superior izquierda del control FlowLayoutPanel.
Arrastre otro control Button desde el Cuadro de herramientas al control FlowLayoutPanel. Observe que el control Button se mueve automáticamente a una posición al lado del 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.
Arrastre algunos controles Button más desde el Cuadro de herramientas a FlowLayoutPanel. Siga colocando los controles Button hasta que uno se ajuste a la fila siguiente.
Cambie el valor de la propiedad WrapContents del control FlowLayoutPanel a false. Observe que los controles secundarios ya no pasan a la fila siguiente. En su lugar, se desplazan a la primera fila y se recortan.
Cambie el valor de la propiedad WrapContents del control FlowLayoutPanel a true. Observe que los controles secundarios se ajustan de nuevo a la fila siguiente.
Disminuya el ancho del control FlowLayoutPanel hasta que todos los controles Button se muevan a la primera columna.
Aumente el ancho del control FlowLayoutPanel hasta que todos los controles Button se muevan a la primera fila. Es posible que tenga que cambiar el tamaño del formulario para adaptarse a un ancho mayor.

Cambiar la dirección de flujo

La propiedad FlowDirection le 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 de flujo en FlowLayoutPanel

Cambie el valor de la propiedad FlowDirection del control FlowLayoutPanel a TopDown. Observe que los controles secundarios se reorganizan en una o más columnas, dependiendo del alto del control.
Cambie el tamaño de FlowLayoutPanel para que el alto sea menor que la columna de los controles Button. Observe que FlowLayoutPanel reorganiza los controles secundarios para que fluyan en la columna siguiente. Siga disminuyendo el alto y observe que los controles secundarios fluyen en columnas consecutivas. Cambie el valor de la propiedad FlowDirection del control FlowLayoutPanel a RightToLeft. Observe que se invierten las posiciones de los controles secundarios. Observe el diseño cuando cambia el valor de la propiedad FlowDirection a BottomUp.

Insertar saltos de flujo

El control FlowLayoutPanel proporciona una propiedad FlowBreak a sus controles secundarios. El establecimiento de la propiedad FlowBreak en true hace que el control FlowLayoutPanel deje de diseñar controles en la dirección del flujo actual y se ajuste a la fila o columna siguiente.

Para insertar los saltos de flujo

Cambie el valor de la propiedad FlowDirection del control FlowLayoutPanel a TopDown.
Seleccione uno de los controles Button en medio de la columna situada más a la izquierda.
Establezca el valor de la propiedad FlowBreak del control Button en true. Observe que la columna se segmenta y que los controles siguientes al flujo del control Button seleccionado pasan 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 anclaje

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

Para colocar controles mediante el acoplamiento y anclaje

Aumente el tamaño de FlowLayoutPanel hasta que los controles Button estén todos organizados en una columna.
Seleccione el control Button superior. Aumente su ancho para que sea dos veces más ancho que el resto de controles Button.
Seleccione el segundo control Button. Cambie el valor de su propiedad Anchor a Right. Observe que se mueve para que su borde derecho se alinee con el primer borde derecho del control Button.
Cambie el valor de su propiedad Anchor a Right y Left. Observe que el tamaño cambia al mismo ancho que el primer control Button.
Seleccione el tercer control Button. Cambie el valor de su propiedad Dock a Fill. Observe que el tamaño cambia al mismo ancho que el primer control Button.

Organizar controles mediante el relleno y márgenes

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

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

La propiedad Margin le permite controlar el espaciado entre los controles.

Para organizar controles mediante las propiedades Padding y Margin

Cambie el valor de la propiedad Dock del control FlowLayoutPanel a Fill. Si el formulario es bastante grande, los controles Button se moverán a la primera columna del control FlowLayoutPanel.
Cambie el valor de la propiedad Padding del control FlowLayoutPanel ampliando la entrada Padding en la ventana Propiedades y estableciendo 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. Observe que los controles secundarios se acercan al centro del control FlowLayoutPanel. El mayor valor de la propiedad Padding aleja los controles secundarios de los bordes de control FlowLayoutPanel.
Seleccione todos los controles Button de FlowLayoutPanel y establezca el valor de la propiedad Margin en 20. Observe que aumenta el espaciado entre los controles Button, por lo que se separarán más. Es posible que tenga que aumentar el tamaño del control FlowLayoutPanel para que pueda ver todos los controles secundarios.

Insertar controles haciendo doble clic en ellos en el Cuadro de herramientas

Puede rellenar el control FlowLayoutPanel haciendo doble clic en los controles en el Cuadro de herramientas.

Para insertar controles haciendo doble clic en el Cuadro de herramientas

Haga doble clic en el icono de control Button en el Cuadro de herramientas. Observe que aparece un nuevo control Button en el control FlowLayoutPanel.
Haga doble clic en otros controles en el Cuadro de herramientas. Observe que aparecen los nuevos controles sucesivamente en el control FlowLayoutPanel.

Insertar un control dibujando su contorno

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

Para insertar un control dibujando su contorno

En el Cuadro de herramientas, haga clic en el icono de control Button. No lo arrastre hacia el formulario.
Coloque el puntero del mouse (ratón) sobre el control FlowLayoutPanel. Observe que el puntero cambia a una forma de cruz con el icono de control Button adjuntado.
Haga clic y mantenga presionado el botón del mouse.
Arrastre el puntero del mouse para dibujar el contorno del control Button. Cuando alcance el tamaño deseado, suelte el botón del mouse. Observe que se crea el control Button en la siguiente ubicación abierta del control FlowLayoutPanel.

Insertar controles mediante la barra de inserción

Puede insertar controles en una posición determinada de un control FlowLayoutPanel. Cuando arrastra un control al área de cliente del control FlowLayoutPanel, aparece una barra de inserción para indicar dónde se insertará el control.

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

Arrastre un control Button en el Cuadro de herramientas al control FlowLayoutPanel y seleccione el espacio entre los dos controles Button. Observe que se dibuja una barra de inserción, que indica dónde se colocará 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.
Coloque el nuevo control Button en el control FlowLayoutPanel. Observe que el nuevo control Button no se alinea con el resto, porque su propiedad Margin tiene un valor distinto.

Reasignar los controles existentes a un elemento primario diferente

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

Para volver a asignar controles existentes

Arrastre tres controles Button desde el Cuadro de herramientas al formulario. Colóquelos uno cerca del otro, pero sin alinear.
En el Cuadro de herramientas, haga clic en el icono de control FlowLayoutPanel. No lo arrastre hacia el formulario.
Mueva el puntero del mouse cerca de los tres controles Button. Observe que el puntero cambia a una forma de cruz con el icono de control FlowLayoutPanel adjuntado.
Haga clic y mantenga presionado el botón del mouse.
Arrastre el puntero del mouse para dibujar el contorno del control FlowLayoutPanel. Dibuje el contorno alrededor de los tres controles Button.
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 paneles de diseño y controles. Sugerencias para una exploración más a fondo incluyen las siguientes:

Cambie el tamaño de uno de los controles Button a un tamaño mayor y observe el efecto en el diseño.
Los paneles de diseño pueden contener otros paneles de diseño. Experimente con colocar un control TableLayoutPanel en el control existente.
Acople el control FlowLayoutPanel en el formulario principal. 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 FlowLayoutPanel cambia su flujo en respuesta.

Vea también

Compartir a través de