Tutorial: Adición de código a la aplicación de visor de imágenes de Windows Forms en Visual Studio

En esta serie de tres tutoriales, creará una aplicación de Windows Forms que carga una imagen y la muestra. El entorno de desarrollo integrado (IDE) de Visual Studio proporciona las herramientas necesarias para crear la aplicación. Para obtener más información, consulte Le damos la bienvenida al IDE de Visual Studio.

Los controles usan código de C# o Visual Basic para realizar las acciones asociadas a ellos.

En este tercer tutorial, obtendrá información sobre cómo hacer lo siguiente:

• Adición de controladores de eventos para los controles
• Escritura de código para abrir un cuadro de diálogo
• Escritura de código para los demás controles
• Ejecución de la aplicación

Prerrequisitos

Este tutorial se basa en los tutoriales anteriores, Creación de una aplicación de visor de imágenes y Adición de controles de interfaz de usuario al visor de imágenes. Si no ha realizado esos tutoriales, revíselos primero.

Adición de controladores de eventos para los controles

En esta sección, agregará controladores de eventos para los controles que agregó en el segundo tutorial, Adición de controles a una aplicación de visor de imágenes. La aplicación llama a un controlador de eventos cuando tiene lugar una acción, como seleccionar un botón.

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

2. En el Diseñador de Windows Forms, haga doble clic en el botón Mostrar una imagen. Como alternativa, puede seleccionar el botón Mostrar una imagen del formulario y, después, presionar la tecla Entrar.

   El IDE de Visual Studio abre una pestaña en la ventana principal. En C#, la pestaña se denomina Form1.cs. Si usa Visual Basic, la pestaña se denomina Form1.vb.

   Esta pestaña muestra el archivo de código subyacente del formulario.

   

   Nota:

   Es posible que la pestaña Form1.vb muestre showButton como ShowButton.

3. Céntrese en esta parte del código.

   C#

   private void showButton_Click(object sender, EventArgs e)
   {
   }
   

   VB

   Private Sub showButton_Click() Handles showButton.Click
   
   End Sub
   

   Importante

   Use el control del lenguaje de programación situado en la parte superior derecha de esta página para ver el fragmento de código de C# o el de Visual Basic.
   
   

4. Vuelva a elegir la pestaña del Diseñador de Windows Forms y, después, haga doble clic en el botón Borrar la imagen para abrir su código. Repita el procedimiento con los dos botones restantes. El IDE de Visual Studio agrega cada vez un nuevo método al archivo de código del formulario.

5. Haga doble clic en el control CheckBox del Diseñador de Windows Forms para agregar un método checkBox1_CheckedChanged(). Cuando se activa o desactiva la casilla, llama a este método.

   En el siguiente fragmento de código se muestra el nuevo código que aparece en el editor de código.

   C#

   private void clearButton_Click(object sender, EventArgs e)
   {
   }
   
   private void backgroundButton_Click(object sender, EventArgs e)
   {
   }
   
   private void closeButton_Click(object sender, EventArgs e)
   {
   }
   
   private void checkBox1_CheckedChanged(object sender, EventArgs e)
   {
   }
   

   VB

   Private Sub clearButton_Click() Handles clearButton.Click
   
   End Sub
   
   Private Sub backgroundButton_Click() Handles backgroundButton.Click
   
   End Sub
   
   Private Sub closeButton_Click() Handles closeButton.Click
   
   End Sub
   
   Private Sub CheckBox1_CheckedChanged() Handles CheckBox1.CheckedChanged
   
   End Sub
   

---

Los métodos, incluidos los controladores de eventos, pueden tener cualquier nombre que se desee. Cuando agregue un controlador de eventos con el IDE, se creará un nombre basado en el nombre del control y en el evento que se controla.

Por ejemplo, el evento Click para un botón denominado showButton se denomina showButton_Click() o ShowButton_Click(). Si desea cambiar un nombre de variable de código, haga clic con el botón secundario en la variable del código y elija Refactorizar>Cambiar nombre. Todas las instancias de esa variable del código cambiarán de nombre. Para más información, vea Refactorización de cambio de nombre.

Escritura de código para abrir un cuadro de diálogo

El botón Mostrar una imagen usa el componente OpenFileDialog para mostrar un archivo de imagen. Este procedimiento agrega el código utilizado para llamar a ese componente.

El IDE de Visual Studio ofrece una herramienta eficaz denominada IntelliSense. A medida que escribe, IntelliSense le sugiere posibles opciones de código.

1. En el Diseñador de Windows Forms, haga doble clic en el botón Mostrar una imagen. El IDE mueve el cursor dentro del método showButton_Click() o ShowButton_Click().

2. Escriba una i en la línea vacía entre las dos llaves { } o entre Private Sub... y End Sub. Se abrirá una ventana IntelliSense.

   

3. En la ventana IntelliSense se debe resaltar la palabra if. Presione la tecla TAB para insertar if.

4. Seleccione true y escriba op para sobrescribirlo para C# o Op para Visual Basic.

   

   IntelliSense muestra openFileDialog1.

5. Presione la tecla TAB para agregar openFileDialog1.

6. Escriba un punto (.) justo después de openFileDialog1. IntelliSense proporciona todas las propiedades y métodos del componente OpenFileDialog. Empiece a escribir ShowDialog y presione la tecla TAB. El método ShowDialog() mostrará el cuadro de diálogo Abrir archivo.

7. Agregue unos paréntesis () inmediatamente después de la "g" en ShowDialog. El código debería ser openFileDialog1.ShowDialog().

8. Para C#, agregue un espacio y, después, dos signos igual (==). Para Visual Basic, agregue un espacio y, después, use un solo signo igual (=).

9. Agregue otro espacio. Utilice IntelliSense para escribir DialogResult.

10. Escriba un punto para abrir el valor DialogResult en la ventana IntelliSense. Escriba la letra O y pulse la tecla Tab para insertar Aceptar.

    Nota

    Deberá quedar completa la primera línea de código. Para C#, debe ser similar a lo siguiente.

    if (openFileDialog1.ShowDialog() == DialogResult.OK)

    Para Visual Basic, debería ser la siguiente.

    If OpenFileDialog1.ShowDialog() = DialogResult.OK Then

11. Agregue la línea de código siguiente.

    C#

    pictureBox1.Load(openFileDialog1.FileName);  
    

    VB

    PictureBox1.Load(OpenFileDialog1.FileName)
    

    Puede copiar y pegar o usar IntelliSense para agregarla. El método showButton_Click() final será similar al código siguiente.

    C#

    private void showButton_Click(object sender, EventArgs e)
    {
        if (openFileDialog1.ShowDialog() == DialogResult.OK)
        {
            pictureBox1.Load(openFileDialog1.FileName);  
        }
    }
    

    VB

    Private Sub showButton_Click() Handles showButton.Click
        If OpenFileDialog1.ShowDialog() = DialogResult.OK Then
            PictureBox1.Load(OpenFileDialog1.FileName)
        End If
    
    End Sub
    

---

1. Agregue el siguiente comentario al código.

   C#

   private void showButton_Click(object sender, EventArgs e)
   {
       // Show the Open File dialog. If the user clicks OK, load the
       // picture that the user chose.
       if (openFileDialog1.ShowDialog() == DialogResult.OK)
       {
           pictureBox1.Load(openFileDialog1.FileName);
       }
   }
   

   VB

   Private Sub showButton_Click() Handles showButton.Click
   
       ' Show the Open File dialog. If the user clicks OK, load the
       ' picture that the user chose.
       If OpenFileDialog1.ShowDialog() = DialogResult.OK Then
           PictureBox1.Load(OpenFileDialog1.FileName)
       End If
   
   End Sub
   

---

Se recomienda comentar siempre el código. Los comentarios del código facilitan la comprensión y el mantenimiento del código en el futuro.

Escritura de código para los demás controles

Si ejecuta la aplicación ahora, podrá seleccionar Mostrar una imagen. El visor de imágenes abrirá el cuadro de diálogo Abrir archivo, donde podrá seleccionar una imagen para mostrar.

En esta sección, agregará el código para los demás controladores de eventos.

1. En el Diseñador de Windows Forms, haga doble clic en el botón Borrar la imagen. Agregue el código entre las llaves.

   C#

   private void clearButton_Click(object sender, EventArgs e)
   {
       // Clear the picture.
       pictureBox1.Image = null;
   }
   

   VB

   Private Sub clearButton_Click() Handles clearButton.Click
       ' Clear the picture.
       PictureBox1.Image = Nothing
   End Sub   
   

2. Haga doble clic en el botón Establecer el color de fondo y agregue el código entre las llaves.

   C#

   private void backgroundButton_Click(object sender, EventArgs e)
   {
       // Show the color dialog box. If the user clicks OK, change the
       // PictureBox control's background to the color the user chose.
       if (colorDialog1.ShowDialog() == DialogResult.OK)
           pictureBox1.BackColor = colorDialog1.Color;
   }
   

   VB

   Private Sub backgroundButton_Click() Handles backgroundButton.Click
       ' Show the color dialog box. If the user clicks OK, change the
       ' PictureBox control's background to the color the user chose.
       If ColorDialog1.ShowDialog() = DialogResult.OK Then
           PictureBox1.BackColor = ColorDialog1.Color
       End If
   End Sub
   

3. Haga doble clic en el botón Cerrar y agregue el código entre las llaves.

   C#

   private void closeButton_Click(object sender, EventArgs e)
   {
       // Close the form.
       this.Close();
   }
   
   

   VB

   Private Sub closeButton_Click() Handles closeButton.Click
       ' Close the form.
       Close()
   End Sub  
   

4. Haga doble clic en la casilla Ajustar y agregue el código entre las llaves.

   C#

   private void checkBox1_CheckedChanged(object sender, EventArgs e)
   {
       // If the user selects the Stretch check box, 
       // change the PictureBox's
       // SizeMode property to "Stretch". If the user clears 
       // the check box, change it to "Normal".
       if (checkBox1.Checked)
           pictureBox1.SizeMode = PictureBoxSizeMode.StretchImage;
       else
           pictureBox1.SizeMode = PictureBoxSizeMode.Normal;
   }
   

   VB

   Private Sub CheckBox1_CheckedChanged() Handles CheckBox1.CheckedChanged
       ' If the user selects the Stretch check box, change 
       ' the PictureBox's SizeMode property to "Stretch". If the user 
       ' clears the check box, change it to "Normal".
       If CheckBox1.Checked Then
           PictureBox1.SizeMode = PictureBoxSizeMode.StretchImage
       Else
           PictureBox1.SizeMode = PictureBoxSizeMode.Normal
       End If
   End Sub   
   

Ejecución de la aplicación

Puede ejecutar la aplicación en cualquier momento mientras la escribe. Después de agregar el código en la sección anterior, el visor de imágenes se ha completado. Como en los tutoriales anteriores, use uno de los métodos siguientes para ejecutar la aplicación:

• Presione la tecla F5.
• En la barra de menús, seleccione Depurar>Iniciar depuración.
• En la barra de herramientas, seleccione el botón Iniciar.

Aparece una ventana con el título Visor de imágenes. Pruebe todos los controles.

1. Seleccione el botón Establecer el color de fondo. Se abrirá el cuadro de diálogo Color.

   

2. Elija un color para establecer el color de fondo.

3. Seleccione Mostrar una imagen para mostrar una imagen.

   

4. Seleccione y anule la selección de Ajustar.

5. Seleccione el botón Borrar la imagen para asegurarse de que la pantalla se borra.

6. Seleccione Cerrar para salir de la aplicación.

Pasos siguientes

Felicidades. Ya completó esta serie de tutoriales. Ha realizado estas tareas de programación y diseño en el IDE de Visual Studio:

• Ha creado un proyecto de Visual Studio que usa Windows Forms.
• Se ha agregado el diseño de la aplicación de visualización de imágenes.
• Ha agregado botones y una casilla.
• Ha agregado cuadros de diálogo.
• Ha agregado controladores de eventos para los controles.
• Ha escrito código de C# o Visual Basic para controlar los eventos.

Continúe aprendiendo con otra serie de tutoriales sobre cómo crear una prueba matemática cronometrada.

Tutorial 2: Creación de una prueba matemática cronometrada