Tutorial: Organizar controles en formularios Windows Forms mediante TableLayoutPanel

Artículo
08/10/2011

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 características 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.

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

TableLayoutPanel organiza su contenido en una cuadrícula, proporcionando una funcionalidad similar al elemento <table> de HTML. El control TableLayoutPanel permite colocar los controles en una cuadrícula de diseño sin exigirle la especificación precisa de la posición de cada control individual. Las celdas se organizan en filas y columnas y éstas pueden tener distintos tamaños. Las celdas se pueden combinar en las filas y columnas. Las celdas pueden contener cualquier elemento que contenga un formulario y comportarse en la mayoría de los casos como contenedores.

El control TableLayoutPanel también proporciona en tiempo de ejecución una función de cambio de tamaño proporcional, por lo que su diseño puede cambiar fácilmente cuando se cambia el tamaño del formulario. De esta forma, el control TableLayoutPanel está muy bien adaptado a propósitos tales como formularios de entrada de datos y aplicaciones localizadas. Para obtener más información, vea Tutorial: Crear un formulario Windows Forms de entrada de datos de tamaño variable y Tutorial: Crear un diseño que ajuste las proporciones para la localización.

En general, no debería utilizar un control TableLayoutPanel como un contenedor para todo el diseño. Utilice los controles TableLayoutPanel para proporcionar las funciones de cambio el tamaño proporcional a las distintas partes del diseño.

Las tareas ilustradas en este tutorial incluyen:

Crear un proyecto de formularios Windows Forms
Organizar los controles en filas y columnas
Configurar las propiedades de las filas y columnas
Abarcar filas y columnas con un control
Control automático de desbordamientos
Insertar controles haciendo doble clic en ellos en el Cuadro de herramientas
Insertar un control dibujando su contorno
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 los valores de configuración o de edición activos. Para cambiar la configuración, elija la opción Importar y exportar configuraciones del menú Herramientas. Para obtener más información, vea Trabajar con valores de configuración.

Crear el proyecto

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

Para crear el proyecto

Cree un proyecto de aplicación para Windows denominado "TableLayoutPanelExample." Para obtener más información, vea Cómo: Crear un nuevo proyecto de aplicación de Windows Forms.
Seleccione el formulario en el Diseñador de Windows Forms.

Organizar los controles en filas y columnas

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

Para organizar los controles en filas y columnas mediante TableLayoutPanel

Arrastre un control TableLayoutPanel desde el Cuadro de herramientas al formulario. Observe que, de forma predeterminada, el control TableLayoutPanel tiene cuatro celdas.
Arrastre un control Button desde el Cuadro de herramientas al control TableLayoutPanel y colóquelo en una de las celdas. Observe que el control Button se crea dentro de la celda que ha seleccionado.
Arrastre tres controles Button más desde el Cuadro de herramientas al control TableLayoutPanel, para que cada celda contenga un botón.
Mantenga sujeto el cuadro de tamaño vertical entre las dos columnas y muévalo a la izquierda. Observe que los controles Button de la primera columna cambian su tamaño a un ancho menor, mientras que el tamaño de los controles Button de la segunda columna no se ha modificado.
Mantenga sujeto el cuadro de tamaño vertical entre las dos columnas y muévalo a la derecha. Observe que los controles Button de la primera columna vuelven a su tamaño original, mientras que los controles Button de la segunda columna se mueven a la derecha.
Mueva de arriba abajo el cuadro de tamaño horizontal para ver su efecto sobre los controles del panel.

Colocar los controles dentro de las celdas utilizando el acoplamiento y el anclaje

El comportamiento del anclaje de los controles secundarios en un control TableLayoutPanel difiere del comportamiento de otros controles contenedor. El comportamiento del acoplamiento de los controles secundarios es igual al de los otros controles contenedor.

Colocar controles dentro de celdas

Seleccione el primer control Button. Cambie el valor de su propiedad Dock a Fill. Observe que el control Button se expande para rellenar la celda.
Seleccione cualquiera de los demás controles Button. Cambie el valor de su propiedad Anchor a Right. Observe que se desplaza para que el borde derecho esté cerca del borde derecho de la celda. La distancia entre los bordes es la suma de la propiedad Margin del control Button y la propiedad Padding del panel.
Cambie el valor de la propiedad Anchor del control Button a Right y Left. Observe que el control cambia el tamaño al ancho de la celda, teniendo en cuenta los valores de la propiedad Margin y Padding.
Repita los pasos 2 y 3 con los estilos Top y Bottom.

Configurar las propiedades de las filas y columnas

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

Para establecer propiedades de filas y columnas

Seleccione el control TableLayoutPanel en el Diseñador de Windows Forms.
En las ventanas Propiedades, abra la colección ColumnStyles haciendo clic en el botón de puntos suspensivos () al lado de la entrada Columnas.
Seleccione la primera columna y cambie el valor de su propiedad SizeType a AutoSize. Haga clic en Aceptar para aceptar el cambio. Observe que el ancho de la primera columna se reduce para ajustar el control Button. También observe que el tamaño del ancho de la columna no se puede cambiar.
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 observe que el ancho de la primera columna se expande. Cambie el tamaño del control TableLayoutPanel a un ancho menor y observe que el tamaño de los botones de la primera columna cambian para ajustarse a la celda. También observe que el tamaño del ancho de la columna se puede cambiar.
En la ventana Propiedades, abra la colección ColumnStyles y seleccione todas las columnas listadas. Establezca el valor de cada propiedad SizeType en Percent. Haga clic en Aceptar para aceptar el cambio. Repita con la colección RowStyles.
Mantenga sujeto uno de los cuadros de tamaño de esquina y cambie el tamaño del ancho y alto del control TableLayoutPanel. Observe que el tamaño de las filas y columnas se cambia cuando cambia el tamaño del control TableLayoutPanel. También observe que el tamaño de las filas y columnas se puede cambiar con los cuadros de tamaño horizontal y vertical.

Abarcar filas y columnas con un control

El control TableLayoutPanel agrega en tiempo de diseño nuevas propiedades a los controles. Dos de estas propiedades son RowSpan y ColumnSpan. Puede utilizar estas propiedades que un control abarque más que una fila o columna.

Para abarcar filas y columnas con un control

Seleccione el control Button en la primera fila y primera columna.
En la ventana Propiedades, cambie el valor de la propiedad ColumnSpan a 2. Observe que el control Button rellena la primera columna y la segunda columna. También observe que se ha agregado una fila adicional para adaptarse a este cambio.
Repita el paso 2 para la propiedad RowSpan.

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

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

Para insertar controles haciendo doble clic en el Cuadro de herramientas

Arrastre un control TableLayoutPanel desde el Cuadro de herramientas al formulario.
Haga doble clic en el icono de control Button en el Cuadro de herramientas. Observe que aparece un nuevo control de botón en la primera celda del control TableLayoutPanel.
Haga doble clic en otros controles en el Cuadro de herramientas. Observe que los nuevos controles aparecen consecutivamente en las celdas desocupadas del control TableLayoutPanel. También observe que el control TableLayoutPanel se expande para adaptarse a los nuevos controles si no está disponible ninguna celda abierta.

Control automático de desbordamientos

Cuando está insertando controles en el control TableLayoutPanel, se puede quedarse sin celdas vacías para los nuevos controles. El control TableLayoutPanel controla automáticamente esta situación y aumenta en consecuencia el número de celdas.

Para observar el control automático de los desbordamientos

Si todavía hay celdas vacías en el control TableLayoutPanel, siga insertando los nuevos controles Button hasta que el control TableLayoutPanel esté lleno.
Cuando el control TableLayoutPanel esté completo, haga doble clic en el icono Button en el Cuadro de herramientas para insertar otro control Button. Observe que el control TableLayoutPanel crea nuevas celdas para adaptar el nuevo control. Inserte algunos controles más y observe el comportamiento de cambio de tamaño.
Cambie el valor de la propiedad GrowStyle del control TableLayoutPanel a FixedSize. Haga doble clic en el icono Button en el Cuadro de herramientas para insertar controles Button hasta que el control TableLayoutPanel esté lleno. Haga doble clic de nuevo en el icono del control Button en el Cuadro de herramientas. Observe que recibe un mensaje de error del Diseñador de Windows Forms que le informa que ya no se pueden crear filas columnas adicionales.

Insertar un control dibujando su contorno

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

Para insertar un control dibujando su contorno

Arrastre un control TableLayoutPanel desde el Cuadro de herramientas al formulario.
En el Cuadro de herramientas, haga clic en el icono de control Button. No lo arrastre al formulario.
Coloque el puntero del mouse sobre el control TableLayoutPanel. 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 el control Button se crea en la celda en la que dibujó el contorno de control.

No permiten varios controles dentro de las celdas

El control TableLayoutPanel puede contener sólo un control secundario por celda.

Para demostrar que no se permiten varios controles dentro de las celdas

Arrastre un control Button desde el Cuadro de herramientas al control TableLayoutPanel y colóquelo en una de las celdas ocupadas. Observe que el control TableLayoutPanel no le permite colocar el control Button en la celda ocupada.

Intercambiar los controles

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

Para intercambiar los controles

Arrastre uno de los controles Button de una celda ocupada y colóquelo en otra celda ocupada. Observe que los dos controles se intercambian.

Pasos siguientes

Puede lograr un diseño complejo mediante una combinación de paneles de diseño y controles. Para una exploración más a fondo, pruebe estas sugerencias:

Pruebe a cambiar el tamaño de uno de los controles Button a un tamaño mayor 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 controles.
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 TableLayoutPanel al formulario principal. Cambie el tamaño del formulario y observe el efecto en el diseño.

Vea también