Compartir por

Guía paso a paso: Organizar controles en formularios Windows Forms mediante FlowLayoutPanel

Algunas aplicaciones requieren un formulario con un diseño que se organiza adecuadamente a medida que se cambia el tamaño del formulario o a medida que el contenido cambia de tamaño. Cuando necesite un diseño dinámico y no quiera controlar Layout eventos explícitamente en el código, considere la posibilidad de usar un panel de diseño.

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

TableLayoutPanel organiza su contenido en una cuadrícula, lo que proporciona una funcionalidad similar al elemento de tabla< HTML>. Sus celdas se organizan en filas y columnas, y pueden tener diferentes tamaños. Para obtener más información, vea Tutorial: Organizar controles en formularios Windows Forms mediante tableLayoutPanel.

FlowLayoutPanel organiza su contenido en una dirección de flujo específica: horizontal o vertical. Su contenido se puede encapsular de una fila a la siguiente o de una columna a la siguiente. Como alternativa, su contenido se puede recortar en lugar de encapsularse. Las tareas que se muestran en este tutorial incluyen:

  • Creación de un proyecto de Windows Forms

  • Organizar controles horizontal y verticalmente

  • Cambiar la dirección del flujo

  • Insertar saltos de flujo

  • Organizar controles mediante relleno y márgenes

  • Insertar controles con doble clic en el cuadro de herramientas

  • Insertar un control dibujando su contorno

  • Insertar controles mediante el cursor

  • Reasignación de controles existentes a un padre diferente

Cuando haya terminado, comprenderá el rol que desempeñan estas características de diseño importantes.

Creación del proyecto

  1. En Visual Studio, cree un proyecto de aplicación basado en Windows denominado "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 formularios.

Organizar controles horizontal y verticalmente

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

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

Para organizar los controles de manera horizontal y vertical mediante FlowLayoutPanel

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

  2. Arrastre un Button control desde el Cuadro de herramientas a .FlowLayoutPanel Tenga en cuenta que el control FlowLayoutPanel se mueve automáticamente a la esquina superior izquierda.

  3. Arrastre otro Button control desde el Cuadro de herramientas a .FlowLayoutPanel Tenga en cuenta que el Button control se mueve automáticamente a una posición junto al primer Button control. Si el espacio de FlowLayoutPanel es demasiado estrecho para colocar los dos controles en la misma línea, el nuevo control Button se mueve automáticamente a la siguiente línea.

  4. Arrastre varios controles más desde el Button al FlowLayoutPanel. Continúe colocando Button controles hasta que uno salte 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 siguiente fila. 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 trasladan nuevamente a la siguiente fila.

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

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

Cambiar la dirección del flujo

La FlowDirection propiedad 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 a abajo o de abajo a arriba.

Para cambiar la dirección del flujo en 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 varias columnas, según el alto del control.

  2. Redimensionar FlowLayoutPanel para que su altura sea más baja que la de la columna de controles Button. Tenga en cuenta que el FlowLayoutPanel reorganiza los controles secundarios para que fluyan a la columna siguiente. Continúe disminuyendo la altura y observe cómo los controles hijos se distribuyen en columnas consecutivas. Cambie el valor de la propiedad FlowLayoutPanel del control FlowDirection a RightToLeft. Tenga en cuenta que las posiciones de los controles secundarios se invierten. Observe el diseño al cambiar el valor de la FlowDirection propiedad a BottomUp.

Insertar saltos de flujo

El FlowLayoutPanel control proporciona una propiedad FlowBreak a sus controles secundarios. Al establecer el valor de la propiedad FlowBreak en true, el control FlowLayoutPanel deja de organizar controles en la dirección de flujo actual y se adapta 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 Button controles situados en el centro de la columna situada más a la izquierda.

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

Posicionamiento de controles mediante acoplamiento y anclaje

Los controles hijos tienen comportamientos de acoplamiento y anclaje que difieren de los de otros controles de contenedor. Tanto el acoplamiento como el anclaje son relativos al control más grande en la dirección del flujo.

Para colocar controles mediante acoplamiento y anclaje

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

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

  3. Seleccione el segundo control Button. Cambie el valor de su Anchor propiedad a Right. Tenga en cuenta que se ha movido para que su borde derecho quede alineado con el borde derecho del primer control Button.

  4. Cambie el valor de su Anchor propiedad a Right y Left. Tenga en cuenta que tiene el mismo tamaño que el primer Button control.

  5. Seleccione el tercer Button control. Cambie el valor de su Dock propiedad a Fill. Tenga en cuenta que tiene el mismo tamaño que el primer Button control.

Organizar controles mediante relleno y márgenes

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

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

La Margin propiedad permite controlar el espaciado entre controles.

Para organizar controles utilizando las propiedades Padding y Margin

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

  2. Cambie el valor de la FlowLayoutPanel propiedad del Padding control expandiendo la Padding entrada en la ventana Propiedades y estableciendo la All propiedad 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 FlowLayoutPanel control. El aumento del valor de la Padding propiedad aleja los controles secundarios de los bordes del control FlowLayoutPanel.

  3. Seleccione todos los Button controles en el FlowLayoutPanel y establezca el valor de la propiedad Margin a 20. Tenga en cuenta que el espaciado entre los Button controles aumenta, por lo que se mueven más lejos. Es posible que tenga que cambiar el tamaño del FlowLayoutPanel control para que sea mayor para ver todos los controles secundarios.

Insertar controles con doble clic en el cuadro de herramientas

Puede rellenar su control FlowLayoutPanel mediante doble clic en los controles del Cuadro de herramientas.

Para insertar controles haciendo doble clic en el Cuadro de herramientas

  1. Haga doble clic en el Button icono de control del cuadro de herramientas. Tenga en cuenta que aparece un nuevo control Button en un control FlowLayoutPanel.

  2. Haga doble clic en varios controles más en el Cuadro de herramientas. Tenga en cuenta que los nuevos controles aparecen sucesivamente en el FlowLayoutPanel control .

Insertar un control dibujando su contorno

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

Para insertar un control dibujando su contorno

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

  2. Mueva el puntero del ratón sobre el control FlowLayoutPanel. Tenga en cuenta que el puntero cambia a una forma de cruz con el icono de control Button adjunto.

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

  4. Arrastre el puntero del mouse para dibujar el contorno del Button control. 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 posición disponible del control FlowLayoutPanel.

Insertar controles mediante la barra de inserción

Puede insertar controles en una posición específica dentro del control FlowLayoutPanel. Al arrastrar 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 cursor

  1. Arrastre un Button control desde el Cuadro de herramientas al FlowLayoutPanel control y apunte al espacio entre dos Button controles. Tenga en cuenta que se dibuja una barra de inserción, que indica dónde se colocará el Button cuando se coloque en el control FlowLayoutPanel. Antes de colocar el nuevo Button control en el FlowLayoutPanel control, mueva el puntero del mouse alrededor para observar cómo se mueve la barra de inserción.

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

Reasignación de controles existentes a un padre diferente

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

Para reparentar los controles existentes

  1. Arrastre tres Button controles desde el Cuadro de herramientas hasta el formulario. Colóquelos cerca uno del otro, pero déjelos desalineados.

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

  3. Mueva el puntero del mouse cerca de los tres Button controles. Tenga en cuenta que el puntero cambia a una forma de cruz con el icono de control FlowLayoutPanel adjunto.

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

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

  6. Suelte el botón del mouse. Tenga en cuenta que los tres Button controles se insertan en el FlowLayoutPanel control .

Pasos siguientes

Puede lograr un diseño complejo mediante una combinación de paneles y controles de diseño. Entre las sugerencias para más exploración se incluyen:

  • Cambie el tamaño de uno de los Button controles 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 al insertar un TableLayoutPanel control en el control existente.

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

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

Consulte también

  • Last updated on