Tutorial: Organizar controles en formularios Windows Forms mediante TableLayoutPanel

  • 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 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. Para obtener más información, vea Tutorial: Organizar controles en Windows Forms mediante FlowLayoutPanel.

El control TableLayoutPanel organiza su contenido en una cuadrícula, lo que proporciona una funcionalidad similar al elemento HTML <table>. El control TableLayoutPanel permite colocar controles en un diseño de cuadrícula sin necesidad de especificar con precisión la posición de cada control individual. Las celdas se organizan en filas y columnas, y pueden tener distintos tamaños. Las celdas se pueden combinar en las filas y columnas. Las celdas pueden incluir cualquier cosa que un formulario pueda incluir, y se comportan en la mayoría de los demás aspectos como contenedores.

El control TableLayoutPanel también proporciona una funcionalidad de cambio de tamaño proporcional en tiempo de ejecución, por lo que el diseño puede cambiar sin problemas a medida que el tamaño del formulario vaya cambiando. Esto hace que el control TableLayoutPanel sea adecuado para usarlo como formularios de entrada de datos y aplicaciones localizadas. Para obtener más información, vea Tutorial: Crear un formulario de Windows Forms de tamaño variable para la entrada de datos y Tutorial: Crear un formulario de Windows Forms localizable.

En general, los controles TableLayoutPanel no deben usarse como contenedores de todo el diseño. Use controles TableLayoutPanel para proporcionar funcionalidades de cambio de tamaño proporcional a determinadas partes del diseño.

Las tareas ilustradas en este tutorial incluyen:

  • Creación de un proyecto de Windows Forms

  • Organizar controles en filas y columnas

  • Establecer propiedades de fila y de columna

  • Expandir filas y columnas con un control

  • Controlar desbordamientos automáticamente

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

  • Insertar un control dibujando su contorno

  • Reasignar controles existentes en un elemento primario diferente

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

Crear el proyecto

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

Para crear el proyecto

  1. Cree un proyecto de aplicación Windows llamado "TableLayoutPanelExample". Para obtener más información, vea Procedimiento para crear un proyecto de aplicación de Windows Forms.

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

Organización de controles en filas y columnas

El control TableLayoutPanel permite organizar los controles fácilmente en filas y columnas.

Para organizar controles en filas y columnas mediante TableLayoutPanel

  1. Arrastre un control TableLayoutPanel del cuadro de herramientas al formulario. Tenga en cuenta que el control TableLayoutPanel tiene cuatro celdas de forma predeterminada.

  2. Arrastre un control Button desde el cuadro de herramientas al control TableLayoutPanel y colóquelo en una de las celdas. Fíjese en que el control Button se crea dentro de la celda que ha seleccionado.

  3. Arrastre tres controles Button más desde el cuadro de herramientas al control TableLayoutPanel para que cada celda contenga un botón.

  4. Tome el controlador de tamaño vertical entre las dos columnas y muévalo a la izquierda. Fíjese que el ancho de los controles Button de la primera columna se reduce, mientras que el tamaño de los controles Button de la segunda no cambia.

  5. Tome el controlador de tamaño vertical entre las dos columnas y muévalo a la derecha. Fíjese en que los controles Button de la primera columna vuelven a su tamaño original, mientras que los controles Button de la segunda se desplazan hacia la derecha.

  6. Mueva el controlador de tamaño horizontal hacia arriba y hacia abajo para ver el efecto en los controles del panel.

Colocación de controles mediante acoplamiento y anclaje

El comportamiento de anclaje de los controles secundarios de TableLayoutPanel difiere del de otros controles de contenedor, mientras que el comportamiento de acoplamiento sí es el mismo que el de otros controles de contenedor.

Colocación de controles en celdas

  1. Seleccione el primer control Button. Cambie el valor de su propiedad Dock a Fill. Fíjese en que el control Button se expande hasta rellenar la celda.

  2. Seleccione uno de los otros controles Button. Cambie el valor de su propiedad Anchor a Right. Fíjese en que se mueve de forma que su borde derecho queda próximo al borde derecho de la celda. La distancia entre los bordes es la suma de la propiedad Button del control Margin y la propiedad Padding del panel.

  3. Cambie el valor de la propiedad Anchor del control Button a Right y Left. Fíjese en que el control cambia de tamaño al ancho de la celda, teniendo en cuenta los valores Margin y Padding.

  4. Repita los pasos 2 y 3 con los estilos Top y Bottom.

Establecimiento de las propiedades de fila y de columna

Puede establecer propiedades individuales de filas y de columnas mediante las colecciones RowStyles y ColumnStyles.

Para establecer las propiedades de fila y de columna

  1. Seleccione el control TableLayoutPanel en el Diseñador de Windows Forms.

  2. En la ventana Propiedades, abra la colección ColumnStyles haciendo clic en el botón de puntos suspensivos (Botón de puntos suspensivos (...) en la ventana Propiedades de Visual Studio) situado junto a la entrada Columnas.

  3. Seleccione la primera columna y cambie el valor de su propiedad SizeType a AutoSize. Haga clic en Aceptar para aceptar el cambio. Fíjese en que el ancho de la primera columna se reduce para ajustarse al control Button. Advierta también que el ancho de la columna no se puede cambiar.

  4. En la ventana Propiedades, abra la colección ColumnStyles y seleccione la primera columna. Cambie el valor de su propiedad SizeType a Percent. Haga clic en Aceptar para aceptar el cambio. Cambie el tamaño del control TableLayoutPanel a un ancho mayor y fíjese en cómo el ancho de la primera columna se expande. Cambie el tamaño del control TableLayoutPanel a un ancho menor y fíjese en cómo el tamaño de los botones de la primera columna cambia para ajustarse a la celda. Advierta también que el ancho de la columna sí se puede cambiar.

  5. En la ventana Propiedades, abra la colección ColumnStyles y seleccione todas las columnas que aparecen. Establezca el valor de cada propiedad SizeType en Percent. Haga clic en Aceptar para aceptar el cambio. Repita con la colección RowStyles.

  6. Tome uno de los controladores de tamaño de la esquina y modifique tanto el ancho como el alto del control TableLayoutPanel. Fíjese en que las filas y las columnas cambian de tamaño a medida que lo hace el tamaño del control TableLayoutPanel. Observe también que las filas y las columnas se pueden cambiar de tamaño con los controladores de tamaño horizontal y vertical.

Expansión de filas y columnas con un control

El control TableLayoutPanel agrega varias propiedades nuevas a los controles en tiempo de diseño. Dos de esas propiedades son RowSpan y ColumnSpan. Puede usar estas propiedades para hacer que un control se expanda más de una fila o columna.

Para expandir filas y columnas con un control

  1. Seleccione el control Button de la primera fila y la primera columna.

  2. En las ventanas Propiedades, cambie el valor de la propiedad ColumnSpan a 2. Fíjese en que el control Button rellena la primera y la segunda columna. Observe también que se ha agregado una fila más para dar cabida a este cambio.

  3. Repita el paso 2 con la propiedad RowSpan.

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

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

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

  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 algunos controles más en el cuadro de herramientas. Observe que los nuevos controles aparecen de manera consecutiva en las celdas sin ocupar del control TableLayoutPanel. Fíjese también en que el control TableLayoutPanel se expande para acomodar los nuevos controles si no hay celdas abiertas disponibles.

Control automático de desbordamientos

Al insertar controles en el control TableLayoutPanel, puede que se agote la cantidad de celdas vacías para esos nuevos controles. El control TableLayoutPanel controla esta situación automáticamente aumentando el número de celdas.

Para controlar los desbordamientos automáticamente

  1. Si todavía quedan celdas vacías en el control TableLayoutPanel, siga insertando controles Button nuevos hasta que el control TableLayoutPanel esté lleno.

  2. Cuando el control TableLayoutPanel esté lleno, haga doble clic en el icono Button del cuadro de herramientas para insertar otro control Button. Fíjese en que el control TableLayoutPanel crea nuevas celdas para dar cabida al nuevo control. Inserte unos pocos controles más y observe el comportamiento de cambio de tamaño.

  3. Cambie el valor de la propiedad TableLayoutPanel del control GrowStyle a FixedSize. Haga doble clic en el icono Button del cuadro de herramientas para insertar controles Button hasta que el control TableLayoutPanel esté lleno. Vuelva a hacer doble clic en el icono Button del cuadro de herramientas. Recibirá un mensaje de error del Diseñador de Windows Forms que le informa de que no se pueden crear filas y columnas adicionales.

Insertar un control dibujando su contorno

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

Para insertar un control dibujando su contorno

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

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

  3. Mueva el puntero del mouse sobre el control TableLayoutPanel . Observe que el puntero cambia a una cruz con el icono del control Button agregado.

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

  5. 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. Fíjese en que el control Button se crea en la celda en la que ha dibujado el contorno del control.

No se permiten varios controles en celdas

El control TableLayoutPanel solo puede contener un control secundario por celda.

Para mostrar que no se permiten varios controles en celdas

  • Arrastre un control Button desde el cuadro de herramientas al control TableLayoutPanel y colóquelo en una de las celdas ocupadas. Fíjese en que el control TableLayoutPanel no permite colocar el control Button en la celda ocupada.

Intercambio de controles

El control TableLayoutPanel permite intercambiar los controles que ocupan dos celdas diferentes.

Para intercambiar controles

  • Arrastre uno de los controles Button desde una celda ocupada y colóquelo en otra celda ocupada. Fíjese en que los dos controles se mueven de una celda a la otra.

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:

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

  • Pegue una selección de varios controles en el control TableLayoutPanel y observe cómo se insertan.

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

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

Consulte también