Paso 5: Agregar controles al formulario

En este paso, se agregan controles, como un control PictureBox y un control CheckBox, al formulario.A continuación, se agregan botones 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 agregar controles al formulario

1. Vaya al Cuadro de herramientas y expanda el grupo Controles comunes.Se muestran los controles más comunes que suelen aparecer en los formularios.

2. Haga doble clic en el control PictureBox.El IDE agrega un control PictureBox al formulario.Dado que TableLayoutPanel está acoplado de modo que rellene el formulario, el IDE agrega el control PictureBox a la primera celda vacía.

3. Haga clic en el triángulo negro del nuevo control PictureBox para abrir su lista de tareas, como se muestra en la siguiente imagen.

   Tareas de PictureBox

   

   [!NOTA]

   Si agrega accidentalmente un tipo equivocado de control a TableLayoutPanel, puede eliminarlo.Haga clic con el botón secundario en el control y seleccione Eliminar en el menú.También puede seleccionar Deshacer en el menú Edición para quitar controles del formulario.

4. Haga clic en el vínculo Acoplar en contenedor principal.Se establece automáticamente la propiedad Dock de PictureBox en Fill.Para verlo, haga clic en el control PictureBox para seleccionarlo, vaya a la ventana Propiedades y asegúrese de que la propiedad Dock está establecida en Fill.

5. Haga que PictureBox abarque ambas columnas cambiando su propiedad ColumnSpan.Seleccione el control PictureBox y establezca su propiedad ColumnSpan en 2.Además, cuando el PictureBox está vacío, se debe mostrar un marco vacío.Establezca su propiedad BorderStyle en Fixed3D.

6. Agregue el control CheckBox al formulario.Haga doble clic en el elemento CheckBox del Cuadro de herramientas para que el IDE agregue un nuevo control CheckBox a la siguiente celda libre de la tabla.Como el control PictureBox ocupa las dos primeras celdas, el control CheckBox se agrega a la celda inferior izquierda.Seleccione el nuevo control CheckBox y establezca su propiedad Text en Stretch, como se muestra en la siguiente imagen.

   Control TextBox con la propiedad Stretch

   

7. Entre al grupo Contenedores del Cuadro de herramientas (donde obtuvo el control TableLayoutPanel) y haga doble clic en el elemento FlowLayoutPanel para agregar un nuevo control a la última celda del control PictureBox.A continuación, acóplelo en el contenedor primario (bien eligiendo Acoplar en contenedor principal en la lista de tareas o bien estableciendo su propiedad Dock en Fill.)

   [!NOTA]

   FlowLayoutPanel es un contenedor que organiza otros controles en filas ordenadas.Al cambiar el tamaño de FlowLayoutPanel, coloca todos los controles que contiene en una sola fila, siempre que tenga espacio para ello.De lo contrario, los organiza en líneas, uno encima de otro.Vamos a utilizar un control FlowLayoutPanel para contener cuatro botones.

Para agregar botones

1. Seleccione el control FlowLayoutPanel que acaba de agregar.Vaya a Controles comunes en el Cuadro de herramientas y haga doble clic en el icono Button para agregar un botón denominado button1 a FlowLayoutPanel.Repita el proceso para agregar otro botón.El IDE determina que ya hay un botón denominado button1, de modo que denomina button2 al siguiente botón.

   [!NOTA]

   En Visual Basic, los nombres de los botones llevan mayúscula inicial, así que button1 será Button1, button2 será Button2, etc.

2. Normalmente, se agregan los demás botones mediante el Cuadro de herramientas.Esta vez, haga clic en button2 y seleccione Copiar en el menú Edición (o presione Ctrl+C).En el menú Edición, haga clic en Pegar (o presione Ctrl+V) para pegar una copia del botón.Vuelva a pegarlo otra vez.El IDE ha agregado button3 y button4.

   [!NOTA]

   Puede copiar y pegar cualquier control.El IDE da nombre y coloca los nuevos controles de una manera lógica.Si se pega un control en un contenedor, el IDE elige el siguiente espacio lógico para colocarlo.

3. Seleccione el primer botón y establezca su propiedad Text en Mostrar una imagen.Luego, establezca las propiedades Text de los otros tres botones siguientes en Borrar la imagen, Establecer el color de fondo y Cerrar.

4. El paso siguiente consiste en dimensionar los botones y organizarlos de modo que estén alineados a la izquierda del panel.Seleccione el control FlowLayoutPanel y fíjese en su propiedad FlowDirection.Cámbiela de modo que quede establecida en RightToLeft.En cuanto lo haga, los botones deberían alinearse a la derecha de la celda, en orden inverso de modo que el botón Mostrar una imagen quede a la derecha.

   [!NOTA]

   Si los botones siguen en orden incorrecto, puede arrastrarlos alrededor de FlowLayoutPanel para reorganizarlos en cualquier orden.Puede hacer clic en uno de los botones y arrastrarlo a la izquierda o la derecha.

5. Haga clic en el botón Cerrar para seleccionarlo.Mantenga presionada la tecla CTRL y haga clic en los otros tres botones, para que todos estén seleccionados.Mientras todos los botones están seleccionados, vaya a la ventana Propiedades y desplácese hacia arriba hasta la propiedad AutoSize.Esta propiedad indica al botón que cambie el tamaño automáticamente para ajustarse al texto que contiene.Establézcala en true.Ahora, los botones deberían tener el tamaño y orden correctos.(Si los cuatro botones están seleccionados, puede cambiar las cuatro propiedades AutoSize al mismo tiempo.) En la siguiente imagen se muestran los cuatro botones.

   Visor de imágenes con cuatro botones

   

6. Ahora, ejecute de nuevo el programa para ver el formulario que acaba de diseñar.Al hacer clic en los botones y la casilla todavía no sucede nada, pero funcionarán pronto.

Para continuar o revisar

• Para ir al siguiente paso del tutorial, vea Paso 6: Asignar un nombre a los controles de botón.

• Para volver al paso anterior del tutorial, vea Paso 4: Diseñar un formulario con un control TableLayoutPanel.