Paso 4: Diseñar un formulario con un control TableLayoutPanel

En este paso, agregará un control TableLayoutPanel al formulario.

Para obtener una versión en vídeo de este tema, vea tutorial 1: Crear un visor de imagen en Visual Basic - vídeo 2 o tutorial 1: Crear un visor de imagen en C# - vídeo 2.

Para diseñar el formulario con un control TableLayoutPanel

1. Vaya al Diseñador de Windows Forms.Fíjese en el lado izquierdo del formulario y busque la pestaña Cuadro de herramientas.Sitúe el puntero del mouse en la pestaña Cuadro de herramientas. Aparecerá el Cuadro de herramientas.(Si lo prefiere, en el menú Ver, haga clic en Cuadro de herramientas.)

2. Haga clic en el signo más situado junto al grupo Contenedores para abrirlo, como se muestra en la siguiente imagen.

   Grupo Contenedores

   

3. Puede agregar controles como botones, casillas y etiquetas al formulario.Haga doble clic en el control TableLayoutPanel del Cuadro de herramientas.Al hacerlo, el IDE agrega un control TableLayoutPanel al formulario, como se muestra en la siguiente imagen.

   Control TableLayoutPanel

   

   [!NOTA]

   Si, después de agregar el control TableLayoutPanel, aparece una ventana dentro del formulario con el título Tareas de TableLayoutPanel, haga clic en cualquier parte del formulario para cerrarla.Aprenderemos más cosas sobre esta ventana más adelante en el tutorial.

   [!NOTA]

   Observe que el Cuadro de herramientas se expande para abarcar el formulario cuando se hace clic en su pestaña, y se cierra cuando se hace clic fuera de él.Se trata de la característica Ocultar automáticamente del IDE.Puede activarla o desactivarla para cualquiera de las ventanas, haciendo clic en el icono del pin de la esquina superior derecha de la ventana, para alternar entre ocultarla automáticamente y bloquearla en su lugar.El icono del pin tiene este aspecto.

   Icono del pin

   

4. Asegúrese de que TableLayoutPanel está seleccionado, haciendo clic en él.Puede comprobar qué control está seleccionado examinando la lista desplegable de la parte superior de la ventana Propiedades, como se muestra en la siguiente imagen.

   Ventana Propiedades que muestra el control TableLayoutPanel

   

5. El selector de controles es una lista desplegable que figura en la parte superior de la ventana Propiedades.En este ejemplo, muestra que un control denominado tableLayoutPanel1 está seleccionado.Puede seleccionar los controles haciendo clic en ellos en el Diseñador de Windows Forms o eligiéndolos en el selector de control.Ahora que TableLayoutPanel está seleccionado, busque la propiedad Dock y haga clic en Dock, que debería estar establecida en None.Observe que aparece una flecha de lista desplegable al lado del valor.Haga clic en la flecha y, a continuación, seleccione el botón Fill (el botón grande del centro), como se muestra en la siguiente imagen.

   Ventana Propiedades con Fill seleccionado

   

6. Después de establecer la propiedad Dock de TableLayoutPanel en Fill, el panel rellena el formulario completo.Si vuelve a cambiar el tamaño del formulario, TableLayoutPanel permanecerá acoplado y cambiará de tamaño para ajustarse al formulario.

   [!NOTA]

   TableLayoutPanel funciona exactamente igual que una tabla de Microsoft Office Word: tiene filas y columnas, y una celda individual puede abarcar varias filas y columnas.Cada celda puede contener un control (como un botón, una casilla o una etiqueta).Este control TableLayoutPanel va a contener un control PictureBox que abarcará completamente su fila superior, un control CheckBox en la celda inferior izquierda, y cuatro controles Button en la celda inferior derecha.

   [!NOTA]

   Aunque hemos dicho que cada celda puede contener un solo control, la celda inferior derecha tiene cuatro controles Button.Esto es porque se puede colocar un control en una celda que contiene otros controles.Este tipo de control se denomina contenedor, y TableLayoutPanel es un contenedor.Aprenderemos más cosas sobre ello más adelante en este tutorial.

7. Actualmente, TableLayoutPanel tiene dos filas del mismo tamaño y dos columnas del mismo tamaño.Tenemos que cambiar su tamaño de modo que la fila superior y la columna derecha sean mucho mayores.En el Diseñador de Windows Forms, seleccione TableLayoutPanel.En la esquina superior derecha, hay un botoncito triangular de color negro, con el siguiente aspecto.

   Botón triangular

   

   Este botón indica que el control tiene tareas que le ayudan a establecer sus propiedades automáticamente.

8. Haga clic en el triángulo para mostrar la lista de tareas del control, como se muestra en la siguiente imagen.

   Tareas de TableLayoutPanel

   

9. Haga clic en la tarea Editar filas y columnas para abrir la ventana Estilos de columna y fila.Haga clic en Column1 y establezca su tamaño en el 15 por ciento; para ello, asegúrese de que el botón Porcentaje y escriba 15 en el cuadro Porcentaje.(Se trata de un control NumericUpDown, que utilizará en un tutorial posterior.) Haga clic en Column2 y establézcala en el 85 por ciento.No haga clic todavía en el botón Aceptar, porque la ventana se cerrará.(Si lo hace, puede volver a abrirla mediante la lista de tareas.)

10. En la lista desplegable Mostrar de la parte superior de la ventana, haga clic en Filas.Establezca Row1 en el 90 por ciento y Row2 en el 10 por ciento.

11. Haga clic en Aceptar.TableLayoutPanel debería tener ahora una fila superior grande, una fila inferior pequeña, una columna izquierda pequeña y una columna derecha grande.Puede cambiar el tamaño de las filas y columnas de TableLayoutPanel arrastrando sus bordes.

Para continuar o revisar

• Para ir al siguiente paso del tutorial, vea Paso 5: Agregar controles al formulario.

• Para volver al paso anterior del tutorial, vea Paso 3: Establecer las propiedades del formulario.