Tutorial: Adición de código 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.

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

En este tercer tutorial, aprenderá a:

• Añade controladores de eventos para tus controles
• Escribir código para abrir un cuadro de diálogo
• Escribir código para los demás controles
• Ejecución de la aplicación

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 los tutoriales anteriores, Crear una aplicación de visor de imágenes y Agregar controles de interfaz de usuario al visor de imágenes. Complétalos primero y luego comienza con el proyecto que creaste para esos tutoriales.

Agrega controladores de eventos a tus 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 se realiza 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. En su lugar, puede seleccionar el botón Mostrar una imagen en el formulario y, a continuación, pulsar Enter.

   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 detrás 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
   

4. Elija de nuevo la pestaña Diseñador de Windows Forms y haga doble clic en el botón Borrar la imagen para abrir su código. Repita para los dos botones restantes. Cada vez, el IDE de Visual Studio agrega 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 fragmento de código siguiente se muestra el nuevo código que se ve 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 desee. Al agregar un controlador de eventos con el IDE, crea un nombre basado en el nombre del control y 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 derecho en la variable en el código y elija Refactorizar>Cambiar nombre. Esta acción cambia el nombre de todas las instancias de esa variable en el código. Para más información, vea Refactorización de cambio de nombre.

Escribir 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 usado para llamar a ese componente.

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

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 abre una ventana IntelliSense.

   

3. La ventana IntelliSense debe resaltar la palabra if. Seleccione la tecla tab dos veces para insertar el fragmento de 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 paréntesis () inmediatamente después de "g" en ShowDialog. El código debería ser openFileDialog1.ShowDialog().

8. En C#, agregue un espacio y agregue dos signos iguales (==). Para Visual Basic, agregue un espacio y, a continuación, use un único 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 elija la tecla de tabulación para insertar OK.

    Nota

    La primera línea de código debe completarse. Para C#, debe ser similar a lo siguiente.

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

    Para Visual Basic, debe ser lo siguiente.

    If OpenFileDialog1.ShowDialog() = DialogResult.OK Then

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

    C#

    pictureBox1.Load(openFileDialog1.FileName);  
    

    VB

    PictureBox1.Load(OpenFileDialog1.FileName)
    

    Puede copiar y pegar o usar IntelliSense para agregarlo. El método showButton_Click() final debe 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
   

---

La mejor práctica es siempre comentar tu código. Los comentarios de código facilitan la comprensión y el mantenimiento del código en el futuro.

Escribir código para los demás controles

Si ejecuta su aplicación ahora, puede 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, agregue el código para los otros controladores de eventos.

1. En el Diseñador de Windows Forms, haga doble clic en el botón Borrar la imagen. Para C#, agregue el código dentro de las llaves. Para Visual Basic, agregue el código entre Private Sub y End Sub.

   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.

   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.

   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 Stretch y agregue el código.

   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, se completa el Visor de imágenes. Como en los tutoriales anteriores, use uno de los métodos siguientes para ejecutar la aplicación:

• Seleccione 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.

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

• Se 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
• Botones agregados y una casilla
• Cuadros de diálogo agregados
• Se han agregado manejadores de eventos a sus controles.
• Código de C# o Visual Basic escrito para controlar los eventos

Paso siguiente

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

Tutorial 2: Crear una prueba matemática con tiempo