Compartir a través de

Guía: Organizar controles en Windows Forms utilizando TableLayoutPanel

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.

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

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

El TableLayoutPanel control 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 se cambia el tamaño del formulario. Esto hace que el TableLayoutPanel control sea adecuado para fines como formularios de entrada de datos y aplicaciones localizadas. Para obtener más información, vea Tutorial: Crear un formulario Windows Form redimensionable para la entrada de datos y Tutorial: Crear un formulario Windows Form localizable.

En general, no debe usar un TableLayoutPanel control como contenedor para todo el diseño. Utiliza TableLayoutPanel controles para proporcionar capacidades de cambio de tamaño proporcionales a partes del diseño.

Las tareas que se muestran en este tutorial incluyen:

  • Creación de un proyecto de Windows Forms

  • Organizar controles en filas y columnas

  • Establecer propiedades de fila y columna

  • Expansión de filas y columnas con un control

  • Gestión automática de desbordamientos

  • Insertar controles con doble clic en el cuadro de herramientas

  • Insertar un control dibujando su contorno

  • 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

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

Para crear el proyecto

  1. Cree un proyecto de aplicación de Windows denominado "TableLayoutPanelExample". Para obtener más información, vea Cómo: Crear un proyecto de aplicación de Windows Forms.

  2. Seleccione el formulario en el Windows FormsDiseñador de Formularios.

Organizar controles en filas y columnas

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

Para organizar controles en filas y columnas mediante tableLayoutPanel

  1. Arrastre un TableLayoutPanel control desde el Cuadro de herramientas hasta el formulario. Tenga en cuenta que, de forma predeterminada, el TableLayoutPanel control tiene cuatro celdas.

  2. Arrastre un Button control desde el Cuadro de herramientas al TableLayoutPanel control y colóquelo en una de las celdas. Tenga en cuenta que el Button control se crea dentro de la celda seleccionada.

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

  4. Coja el control de ajuste de tamaño vertical entre las dos columnas y muévalo a la izquierda. Tenga en cuenta que los Button controles de la primera columna se cambian de tamaño a un ancho menor, mientras que el tamaño de los Button controles de la segunda columna no cambia.

  5. Agarre el control de tamaño vertical entre las dos columnas y muévalo a la derecha. Tenga en cuenta que los Button controles de la primera columna vuelven a su tamaño original, mientras que los Button controles de la segunda columna se mueven a la derecha.

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

Colocación de controles dentro de celdas mediante acoplamiento y anclaje

El comportamiento de anclaje de los controles secundarios en un TableLayoutPanel difiere del comportamiento en otros controles de contenedor. El comportamiento de acoplamiento de los controles secundarios es el mismo que el de otros controles de contenedor.

Posicionamiento de controles dentro de celdas

  1. Seleccione el primer control Button. Cambie el valor de su Dock propiedad a Fill. Tenga en cuenta que el control Button se expande para llenar su celda.

  2. Seleccione uno de los otros Button controles. Cambie el valor de su Anchor propiedad a Right. Observe que se mueve para que su borde derecho esté cerca del borde derecho de la celda. La distancia entre los bordes es la suma de la Button propiedad del Margin control y la propiedad del Padding panel.

  3. Cambie el valor de la Button propiedad del Anchor control a Right y Left. Tenga en cuenta que el control está dimensionado al ancho de la celda, teniendo en cuenta los valores de Margin y Padding.

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

Establecer propiedades de fila y columna

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

Para establecer las propiedades de fila y columna

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

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

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

  4. En la ventana Propiedades , abra la ColumnStyles colección y seleccione la primera columna. Cambie el valor de su SizeType propiedad a Percent. Haga clic en Aceptar para aceptar el cambio. Cambie el tamaño del TableLayoutPanel control a un ancho mayor y tenga en cuenta que el ancho de la primera columna se expande. Cambie el tamaño del TableLayoutPanel control a un ancho menor y tenga en cuenta que los botones de la primera columna tienen el tamaño para ajustarse a la celda. Tenga en cuenta también que el ancho de la columna es redimensionable.

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

  6. Toma uno de los tiradores de redimensionamiento en la esquina y ajusta tanto el ancho como el alto del control TableLayoutPanel. Tenga en cuenta que las filas y columnas cambian de tamaño a medida que cambia el TableLayoutPanel tamaño del control. Tenga en cuenta también que las filas y columnas se pueden cambiar de tamaño con los controles de tamaño horizontal y vertical.

Expansión de filas y columnas con un control

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

Para abarcar 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 ColumnSpan propiedad a 2. Tenga en cuenta que el Button control rellena la primera columna y la segunda columna. Tenga en cuenta también que se ha agregado una fila adicional para dar cabida a este cambio.

  3. Repita el paso 2 para la RowSpan propiedad .

Insertar controles con doble clic en el cuadro de herramientas

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

Para insertar controles haciendo doble clic en el Cuadro de herramientas

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

  2. Haga doble clic en el Button icono de control del cuadro de herramientas. Tenga en cuenta que aparece un nuevo control de botón en la TableLayoutPanel primera celda del control.

  3. Haga doble clic en varios controles más en el Cuadro de herramientas. Tenga en cuenta que los nuevos controles aparecen en las celdas desocupadas del control TableLayoutPanel, sucesivamente. Tenga en cuenta también que el TableLayoutPanel control se expande para acomodar los nuevos controles si no hay celdas abiertas disponibles.

Gestión automática de desbordamientos

Al insertar controles en el control TableLayoutPanel, podrías quedarte sin celdas vacías para los nuevos controles. El TableLayoutPanel control controla esta situación automáticamente aumentando el número de celdas.

Para observar el control automático de desbordamientos

  1. Si todavía hay celdas vacías en el TableLayoutPanel control, continúe insertando nuevos Button controles hasta que el TableLayoutPanel control esté lleno.

  2. Una vez que el TableLayoutPanel control esté lleno, haga doble clic en el Button icono del cuadro de herramientas para insertar otro Button control. Tenga en cuenta que el TableLayoutPanel control crea nuevas celdas para acomodar el nuevo control. Añada algunos 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 Button icono del Cuadro de herramientas para insertar Button controles hasta que el TableLayoutPanel control esté lleno. Vuelva a hacer doble clic en el Button icono del cuadro de herramientas . Tenga en cuenta que recibe 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 TableLayoutPanel control y especificar su tamaño dibujando su contorno en una celda.

Para insertar un control dibujando su contorno

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

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

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

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

  5. 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 celda donde dibujó el contorno del control.

No se permiten varios controles dentro de las celdas

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

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

  • Arrastre un Button control desde el Cuadro de herramientas hacia el TableLayoutPanel control y suéltelo en una de las celdas ocupadas. Tenga en cuenta que el TableLayoutPanel control no permite colocar el Button control en la celda ocupada.

Intercambio de controles

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

Para intercambiar controles

  • Arrastre uno de los Button controles desde una celda ocupada y suéltelo sobre otra celda ocupada. Tenga en cuenta 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 paneles y controles de diseño. Entre las sugerencias para más exploración se incluyen:

  • Intente cambiar el tamaño de uno de los Button controles a un tamaño mayor y observe el efecto en el diseño.

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

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

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

Consulte también