Tutorial: Adición de controles a la aplicación de Windows Forms del visor de imágenes (.NET Framework)

En esta serie de tres tutoriales, creará una aplicación de Windows Forms que carga una imagen y la muestra. El entorno de diseño integrado (IDE) de Visual Studio proporciona las herramientas que necesita para crear la aplicación.

Este programa tiene un cuadro de imagen, una casilla y varios botones, que se usan para controlar la aplicación. En este tutorial se muestra cómo agregar estos controles.

En este segundo tutorial, aprenderá a:

• Incorporación de controles a la aplicación
• Agregar botones en un panel de diseño
• Cambiar los nombres y las ubicaciones de los controles
• Agregar componentes de diálogo

Para crear una aplicación de Windows Forms con .NET, siga el tutorial Creación de una aplicación de Windows Forms con .NET. Consulte la Guía de escritorio de en Windows Forms .NET para obtener más información.

Prerrequisitos

• Este tutorial se basa en el tutorial anterior, Creación de una aplicación de visor de imágenes. Complete ese primero y comience con el proyecto que creó para ese tutorial.

Incorporación de controles a la aplicación

La aplicación Visor de imágenes usa un control PictureBox para mostrar una imagen. Usa una casilla y varios botones para administrar la imagen y el fondo y para cerrar la aplicación. Se agrega el PictureBox y un cuadro de selección desde el cuadro de herramientas en el IDE de Visual Studio.

1. Abra Visual Studio. El proyecto de visor de imágenes aparece en Abrir recientes.

2. En el Diseñador de Windows Forms, seleccione el TableLayoutPanel que agregó en el tutorial anterior. Compruebe que tableLayoutPanel1 aparece en la ventana Propiedades.

3. En el lado izquierdo del IDE de Visual Studio, seleccione la pestaña Cuadro de herramientas. Si no lo ve, seleccione Ver>Cuadro de herramientas en la barra de menús o Ctrl+Alt+X. En el cuadro de herramientas, expanda Controles comunes.

4. Haga doble clic en pictureBox para agregar un control PictureBox al formulario. Visual Studio agrega el control PictureBox a la primera celda vacía de TableLayoutPanel.

5. Elija el nuevo control PictureBox para seleccionarlo y, a continuación, seleccione el triángulo negro en el nuevo control PictureBox para mostrar su lista de tareas.

   

6. Seleccione Acoplar en contenedor primario, que establece la propiedad Dock de PictureBox en Rellenar. Puede ver ese valor en la ventana propiedades de .

7. En la ventana Propiedades de PictureBox, establezca la propiedad ColumnSpan en 2. La PictureBox ahora rellena ambas columnas.

8. Establezca la propiedad BorderStyle en Fixed3D.

9. En el Diseñador de Windows Forms , seleccione TableLayoutPanel. A continuación, en el cuadro de herramientas , haga doble clic en el elemento CheckBox para agregar un nuevo control CheckBox. PictureBox ocupa las dos primeras celdas de TableLayoutPanel, por lo que el control CheckBox se agrega a la celda inferior izquierda.

10. Elija la propiedad Text y escriba Ajustar.

    

Agregar botones en un panel de diseño

Hasta ahora, ha agregado controles a TableLayoutPanel. Estos pasos muestran cómo agregar cuatro botones a un nuevo panel de diseño en TableLayoutPanel.

1. Seleccione tableLayoutPanel en el formulario. Abra la Caja de herramientas y seleccione Contenedores . Haga doble clic en FlowLayoutPanel para agregar un nuevo control a la última celda de TableLayoutPanel.

2. Establezca la propiedad Dock de FlowLayoutPanel en Rellenar. Para establecer esta propiedad, seleccione el triángulo negro y, después, Acoplar en contenedor primario.

   Un FlowLayoutPanel es un contenedor que organiza otros controles en una fila, uno tras otro.

3. Seleccione el nuevo FlowLayoutPanel y, a continuación, abra el Cuadro de herramientas y seleccione Controles comunes. Haga doble clic en el elemento Button para agregar un control de botón llamado button1.

4. Haga doble clic en Botón nuevamente para agregar otro botón. El IDE llama al siguiente button2.

5. Agregue dos botones más de esta manera. Otra opción es seleccionar button2. A continuación, seleccione Editar>Copiar o Ctrl+C. A continuación, elija Editar>Pegar en la barra de menús o presione Ctrl+V para pegar una copia del botón. Ahora péguelo de nuevo. El IDE agrega botón3 y botón4 a FlowLayoutPanel.

6. Seleccione el primer botón y establezca su propiedad Text en Mostrar una imagen.

7. Establezca las propiedades Text de los tres botones siguientes para Borrar la imagen, Establecer el color de fondoy Cerrar.

8. Para ajustar el tamaño de los botones y organizarlos, seleccione flowLayoutPanel. Establezca la propiedad FlowDirection en RightToLeft.

   Los botones deben alinearse a la derecha de la celda e invertir su orden para que el Mostrar una imagen botón esté a la derecha de la celda. Puedes arrastrar los botones alrededor de FlowLayoutPanel para organizarlos en cualquier orden.

9. Pulse el botón Cerrar para seleccionarlo. A continuación, para seleccionar el resto de los botones al mismo tiempo, mantenga presionado el ctrl tecla y selecciónelos también.

10. En la ventana Propiedades, establezca la propiedad AutoSize en True. Los botones cambian de tamaño para ajustarse a su texto.

    

Puede ejecutar el programa para ver cómo se ven los controles. Seleccione la tecla F5, seleccione Depurar>Iniciar depuración, o seleccione el botón de inicio . Los botones que agregó aún no hacen nada.

Cambiar nombres de control

Hay cuatro botones en el formulario, denominado button1, button2, button3y button4 en C#. En Visual Basic, la primera letra predeterminada de cualquier nombre de control se escribe en mayúsculas, por lo que los botones se denominan Button1, Button2, Button3y Button4. Siga estos pasos para darles nombres más informativos.

1. En el formulario, elija el botón Cerrar. Si aún tiene todos los botones seleccionados, elija esc para cancelar la selección.

2. En la ventana Propiedades, busque (Nombre). Cambie el nombre a closeButton.

   

   El IDE no acepta nombres que contienen espacios.

3. Cambie el nombre de los otros tres botones a backgroundButton, clearButtony showButton. Para comprobar los nombres, elija la lista desplegable del selector de control en la ventana Propiedades. Aparecen los nuevos nombres de botón.

Puede cambiar el nombre de cualquier control, como TableLayoutPanel o CheckBox.

Agregar componentes de diálogo

La aplicación puede abrir archivos de imagen y elegir un color de fondo mediante componentes. Un componente es como un control. Use el cuadro de herramientas de para agregar un componente al formulario. Se establecen sus propiedades usando la ventana Propiedades.

A diferencia de un control, agregar un componente al formulario no agrega un elemento visible. En su lugar, proporciona ciertos comportamientos que se pueden desencadenar con código. Por ejemplo, un componente es lo que abre un cuadro de diálogo Abrir archivo.

En esta sección, agregarás un componente OpenFileDialog y un componente ColorDialog a su formulario.

1. Seleccione el Diseñador de Windows Forms (Form1.cs[Design]). Después, abra el cuadro de herramientas y seleccione el grupo Cuadros de diálogo.

2. Haga doble clic en OpenFileDialog para agregar un componente denominado openFileDialog1 al formulario.

3. Haga doble clic en colorDialog para agregar un componente denominado colorDialog1 . Los componentes aparecen en la parte inferior del Diseñador de Windows Forms como iconos.

   

4. Elija el icono de openFileDialog1 y establezca dos propiedades:

   • Establezca la propiedad filtro en el siguiente valor:

     JPEG Files (*.jpg)|*.jpg|PNG Files (*.png)|*.png|BMP Files (*.bmp)|*.bmp|All files (*.*)|*.*
     

   • Establezca la propiedad Title en el siguiente valor: Seleccione un archivo de imagen.

   La configuración de la propiedad Filter especifica los tipos que muestra el cuadro de diálogo Seleccionar una imagen.

Paso siguiente

Pase al siguiente tutorial para aprender a agregar código a la aplicación.

Tutorial, parte 3: Agregar código al visor de imágenes