Paso 8: Escribir código para el controlador de eventos del botón Mostrar una imagen

En este paso, conseguiremos que botón Mostrar una imagen funciona así:

• Cuando un usuario hace clic en ese botón, el programa abre un cuadro de diálogo Abrir archivo.

• Si un usuario elige un archivo de imagen, el programa muestra esa imagen en el control PictureBox.

El IDE incluye una eficaz herramienta denominada IntelliSense que ayuda a escribir código.Cuando se escribe código, el IDE abre un cuadro con sugerencias para completar las palabras parciales que se escriben.Intenta determinar lo que se desea hacer a continuación y salta automáticamente al último elemento que se elige en la lista.Puede utilizar las flechas arriba o abajo para moverse por la lista o bien continuar escribiendo letras para reducir las opciones propuestas.Cuando vea la opción que desea, presione la tecla TAB para seleccionarla.Otra opción es pasar por alto las sugerencias, si no las necesita.

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

Para escribir código para el controlador de eventos de botón Mostrar una imagen

1. Vaya al Diseñador de Windows Forms y haga doble clic en el botón Mostrar una imagen.El IDE va inmediatamente al diseñador de código y mueve su cursor de modo para situarlo dentro del método showButton_Click() que agregó previamente.

2. Escriba una i en la línea vacía entre las dos llaves { }.(En Visual Basic, escriba en la línea vacía entre Private Sub… y End Sub.) Se abre una ventana IntelliSense, como se muestra en la siguiente imagen.

   IntelliSense con código de Visual C#

   

3. La ventana IntelliSense debe mostrar resaltada la palabra if.(De lo contrario, escriba una f minúscula, y lo hará.) Observe que la información sobre herramientas amarilla que se encuentra al lado de la ventana IntelliSense muestra Fragmento de código para instrucción if.(En Visual Basic, la información sobre herramientas dice también que se trata de un fragmento de código, pero con una redacción ligeramente diferente.) Este es el fragmento de código que vamos a utilizar.Presione la tecla TAB para insertar if en el código.A continuación, presione de nuevo la tecla TAB para utilizar el fragmento de código if.(Si ha hecho clic en alguna otra parte y ha desaparecido la ventana IntelliSense, borre la i con la tecla de retroceso y vuelva a escribirla; se volverá a abrir la ventana IntelliSense.)

   Código en Visual C#

   

4. A continuación, utilice IntelliSense para escribir más código y abrir un cuadro de diálogo Abrir archivo.Si el usuario ha hecho clic en el botón Aceptar, el control PictureBox cargará el archivo seleccionado por el usuario.En los siguientes pasos se muestra cómo escribir el código. Aunque los pasos son muchos, solamente habrá que presionar unas cuantas teclas:

   1. Comience con el texto seleccionado true del fragmento de código.Escriba op para sobrescribirlo.(En Visual Basic, empieza con mayúscula inicial, de modo que deberá escribir Op.)

   2. Se abre la ventana IntelliSense y muestra openFileDialog1.Presione TAB para seleccionarlo.(En Visual Basic, empieza con mayúscula inicial, de modo que aparecerá OpenFileDialog1.Asegúrese de que OpenFileDialog1 está seleccionado.)

   3. Escriba un punto (.) (En inglés se denomina period o dot.) Dado que escribió un punto justo después de openFileDialog1, se abre una ventana IntelliSense, que contiene todas las propiedades y los métodos de componente de OpenFileDialog.Se trata de las mismas propiedades que aparecen en la ventana Propiedades al hacer clic en este componente en el Diseñador de Windows Forms.Hay también métodos que pueden ordenar al componente que realice acciones (como abrir un cuadro de diálogo).

      [!NOTA]

      La ventana IntelliSense puede mostrar propiedades y métodos.Para determinar lo que está mostrando, fíjese en el icono de la izquierda.Se muestra una imagen de un bloque junto a cada método y una imagen de una mano junto a cada propiedad.Además, aparece un icono de rayo junto a cada evento.Estas imágenes se muestran como sigue.

      Icono de método

      

      Icono de propiedad

      

      Icono de evento

      

   4. Empiece a escribir ShowDialog (el uso de mayúsculas o minúsculas no es significativo en IntelliSense).El método ShowDialog() mostrará el cuadro de diálogo Abrir archivo.Cuando la ventana haya resaltado ShowDialog, presione la tecla TAB.

   5. Cuando se utiliza un método con un control o un componente (lo que se denomina llamar a un método), es preciso agregar paréntesis.Así pues, especifique los paréntesis de apertura y cierre: ()

      [!NOTA]

      Los métodos constituyen una parte importante de cualquier programa. En este tutorial se han mostrado varias maneras de utilizarlos.Se puede llamar al método de un componente para ordenarle que haga algo, por ejemplo, como cuando llamó al método ShowDialog() del componente OpenFileDialog.Puede crear sus propios métodos para que los programas realicen acciones, como el que estamos construyendo ahora que se denomina método showButton_Click(), que abre un cuadro de diálogo y una imagen cuando un usuario hace clic en un botón.

   6. Para Visual C#, agregue un espacio y, a continuación, agregue dos signos igual (==).Para Visual Basic, agregue un espacio y, a continuación, utilice un solo signo igual (=).(Visual C# y Visual Basic utilizan distintos operadores de igualdad.)

   7. Agregue otro espacio.En cuanto haga, se abrirá otra ventana IntelliSense.Empiece a escribir DialogResult y presione la tecla TAB para agregarlo.

      [!NOTA]

      Cuando se escribe código para llamar a un método, a veces devuelve un valor.En este caso, el método ShowDialog() del componente OpenFileDialog devuelve un valor DialogResult.DialogResult es un valor especial que le indica lo que ha sucedido en un cuadro de diálogo.Un componente OpenFileDialog puede dar lugar a que el usuario haga clic en Aceptar o en Cancelar, de modo que el método ShowDialog() devuelva DialogResult.OK o DialogResult.Cancel.

   8. Escriba un punto para abrir la ventana IntelliSense del valor DialogResult.Escriba la letra O y presione la tecla TAB para insertar OK.

      [!NOTA]

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

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

      Para Visual Basic, debería ser la siguiente.

      If OpenFileDialog1.ShowDialog() = DialogResult.OK Then

   9. Ahora, agregue otra línea de código más.Puede escribirla (o copiar y pegar), pero puede resultar interesante utilizar IntelliSense para agregarla.Cuanto más se familiarice con IntelliSense, más rápidamente podrá escribir su propio código.El método showButton_Click() final tendrá el siguiente aspecto.

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

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

Para continuar o revisar

• Para ir al siguiente paso del tutorial, vea Paso 9: Revisar, comentar y probar el código.

• Para volver al paso anterior del tutorial, vea Paso 7: Agregar componentes de diálogo al formulario.