Paso 8: Escribir código para el controlador de eventos del botón Mostrar una imagenStep 8: Write code for the show a picture button event handler

En este paso, conseguirá que el botón Mostrar una imagen funcione así:In this step, you make the Show a picture button work like this:

  • Cuando un usuario pulsa ese botón, el programa abre un cuadro OpenFileDialog.When a user chooses that button, the program opens an OpenFileDialog box.

  • Si un usuario abre un archivo de imagen, el programa muestra esa imagen en PictureBox.If a user opens a picture file, the program shows that picture in the PictureBox.

    El IDE incluye una eficaz herramienta denominada IntelliSense que ayuda a escribir código.The IDE has a powerful tool called IntelliSense that helps you write code. Cuando se escribe código, el IDE abre un cuadro con sugerencias para completar las palabras parciales que se escriben.As you enter code, the IDE opens a box with suggested completions for partial words that you enter. Intenta determinar lo que se desea hacer a continuación y salta automáticamente al último elemento que se elige en la lista.It tries to determine what you want to do next, and automatically jumps to the last item you choose from the list. Puede utilizar las flechas arriba o abajo para moverse por la lista o bien continuar escribiendo letras para reducir las opciones propuestas.You can use the up or down arrows to move in the list, or you can keep typing letters to narrow the choices. Cuando vea la opción que busca, elija la tecla Tab para seleccionarla.When you see the choice you want, choose the Tab key to select it. Otra opción es pasar por alto las sugerencias, si no las necesita.Or, you can ignore the suggestions, if not needed.

    vínculo al vídeoPara obtener una versión en vídeo de este tema, vea el Tutorial 1: Crear un visor de imágenes en Visual Basic (vídeo 4) o el Tutorial 1: Crear un visor de imágenes en C# (vídeo 4).link to videoFor a video version of this topic, see Tutorial 1: Create a picture viewer in Visual Basic - Video 4 or Tutorial 1: Create a picture viewer in C# - Video 4. En estos vídeos se utilizó una versión anterior de Visual Studio, por lo que hay ligeras diferencias en algunos comandos de menú y otros elementos de la interfaz de usuario.These videos use an earlier version of Visual Studio, so there are slight differences in some menu commands and other user interface elements. Sin embargo, los conceptos y procedimientos funcionan de forma similar en la versión actual de Visual Studio.However, the concepts and procedures work similarly in the current version of Visual Studio.

Para escribir código para el controlador de eventos de botón Mostrar una imagenTo write code for the show a picture button event handler

  1. Vaya al Diseñador de Windows Forms y haga doble clic en el botón Mostrar una imagen.Go to Windows Forms Designer and double-click the Show a picture button. 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.The IDE immediately goes to the code designer and moves your cursor so it's inside the showButton_Click() method that you added previously.

  2. Escriba una i en la línea vacía entre las dos llaves { }.Type an i on the empty line between the two braces { }. (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.(In Visual Basic, type on the empty line between Private Sub... and End Sub.) An IntelliSense window opens, as shown in the following picture.

    IntelliSense con código de Visual C# IntelliSense with Visual C# codeIntelliSense with Visual C# code IntelliSense with Visual C# code

  3. La ventana IntelliSense debe mostrar resaltada la palabra if.The IntelliSense window should be highlighting the word if. (De lo contrario, escriba una f minúscula, y lo hará). Observe cómo un pequeño cuadro de información sobre herramientas situado junto a la ventana IntelliSense aparece con la descripción, Fragmento de código para la instrucción if.(If not, enter a lowercase f, and it will.) Notice how a little tooltip box next to the IntelliSense window appears with the description, Code snippet for if statement. (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.) Como quiere usar ese fragmento, pulse la tecla Tab para insertar if en el código.(In Visual Basic, the tooltip also states that this is a snippet, but with slightly different wording.) You want to use that snippet, so choose the Tab key to insert if into your code. Pulse de nuevo la tecla Tab para usar el fragmento de código if.Then choose the Tab key again to use the if snippet. (Si ha hecho clic en alguna otra parte y ha desaparecido la ventana IntelliSense, borre la icon la tecla de retroceso y vuelva a escribirla; se volverá a abrir la ventana IntelliSense).(If you chose somewhere else and your IntelliSense window disappeared, backspace over the i and retype it, and the IntelliSense window opens again.)

    Código de Visual C# Código de Visual C#Visual C# code Visual C# code

  4. A continuación, use IntelliSense para escribir más código y abrir un cuadro de diálogo Abrir archivo.Next, you use IntelliSense to enter more code to open an Open File dialog box. Si el usuario selecciona el botón Aceptar, el control PictureBox cargará el archivo seleccionado por el usuario.If the user chose the OK button, the PictureBox loads the file that the user selected. En los siguientes pasos se muestra cómo escribir el código. Aunque los pasos son muchos, solamente habrá que presionar unas cuantas teclas:The following steps show how to enter the code, and although it's numerous steps, it's just a few keystrokes:

    1. Comience con el texto seleccionado true del fragmento de código.Start with the selected text true in the snippet. Escriba op para sobrescribirlo.Type op to overwrite it. (En Visual Basic, empieza con mayúscula inicial, de modo que deberá escribir Op).(In Visual Basic, you start with an initial cap, so type Op.)

    2. Se abre la ventana IntelliSense y muestra openFileDialog1.The IntelliSense window opens and displays openFileDialog1. Elija la tecla Tab para seleccionarlo.Choose the Tab key to select it. (En Visual Basic, empieza con mayúscula inicial, de modo que aparecerá OpenFileDialog1.(In Visual Basic, it starts with an initial cap, so you see OpenFileDialog1. Asegúrese de que OpenFileDialog1 está seleccionado).Ensure that OpenFileDialog1 is selected.)

      Para obtener más información sobre OpenFileDialog, vea OpenFileDialog.To learn more about OpenFileDialog, see OpenFileDialog.

    3. Escriba un punto (.) (En inglés se denomina period o dot). Dado que ha escrito 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.Type a period (.) (Many programmers call this a dot.) Because you typed a dot right after openFileDialog1, an IntelliSense window opens, filled in with all of the OpenFileDialog component's properties and methods. Se trata de las mismas propiedades que aparecen en la ventana Propiedades cuando selecciona este componente en el Diseñador de Windows Forms.These are the same properties that appear in the Properties window when you choose it in Windows Forms Designer. También puede elegir métodos que indiquen al componente que realice acciones (como abrir un cuadro de diálogo).You can also choose methods that tell the component to do things (like open a dialog box).

      Nota

      La ventana IntelliSense puede mostrar propiedades y métodos.The IntelliSense window can show you both properties and methods. Para determinar qué se está mostrando, fíjese en el icono del lado izquierdo de cada elemento de la ventana IntelliSense.To determine what is being shown, look at the icon on the left side of each item in the IntelliSense window. Se muestra una imagen de un bloque junto a cada método y una imagen de una llave inglesa (o fija) junto a cada propiedad.You see a picture of a block next to each method, and a picture of a wrench (or spanner) next to each property. Además, aparece un icono de rayo junto a cada evento.There's also a lightning bolt icon next to each event. Estas imágenes se muestran como sigue.These pictures display as follows.

      Icono de método Method iconMethod icon Method icon

      Icono de propiedad Property iconProperty icon Property icon

      Icono de evento Event iconEvent icon Event icon

    4. Empiece a escribir ShowDialog (el uso de mayúsculas o minúsculas no es significativo en IntelliSense).Start to type ShowDialog (capitalization is unimportant to IntelliSense). El método ShowDialog() mostrará el cuadro de diálogo Abrir archivo.The ShowDialog() method will show the Open File dialog box. Cuando la ventana haya resaltado ShowDialog, pulse la tecla Tab.After the window has highlighted ShowDialog, choose the Tab key. También puede resaltar "ShowDialog" y pulsar la tecla F1 para obtener ayuda sobre ella.You can also highlight "ShowDialog" and choose the F1 key to get help for it.

      Para obtener más información sobre el método ShowDialog(), vea ShowDialog Method.To learn more about the ShowDialog() method, see ShowDialog Method.

    5. Cuando se usa un método con un control o un componente (lo que se denomina llamar a un método), es preciso agregar paréntesis.When you use a method on a control or a component (referred to as calling a method), you need to add parentheses. Así pues, especifique los paréntesis de apertura y cierre inmediatamente después de la "g" en ShowDialog: () Debe tener la apariencia siguiente: "openFileDialog1.ShowDialog()".So enter opening and closing parentheses immediately after the "g" in ShowDialog: () It should now look like "openFileDialog1.ShowDialog()".

      Nota

      Los métodos constituyen una parte importante de cualquier programa. En este tutorial se han mostrado varias maneras de utilizarlos.Methods are an important part of any program, and this tutorial has shown several ways to use methods. 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.You can call a component's method to tell it to do something, like how you called the OpenFileDialog component's ShowDialog() method. 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() y que abre un cuadro de diálogo y una imagen cuando un usuario elige en un botón.You can create your own methods to make your program do things, like the one you're building now, called the showButton_Click() method, which opens a dialog box and a picture when a user chooses a button.

    6. Para Visual C#, agregue un espacio y, después, agregue dos signos igual (==).For Visual C#, add a space, and then add two equal signs (==). Para Visual Basic, agregue un espacio y, después, use un solo signo igual (=).For Visual Basic, add a space, and then use a single equal sign (=). (Visual C# y Visual Basic utilizan distintos operadores de igualdad.)(Visual C# and Visual Basic use different equality operators.)

    7. Agregue otro espacio.Add another space. En cuanto lo haga, se abrirá otra ventana IntelliSense.As soon as you do, another IntelliSense window opens. Empiece a escribir DialogResult y pulse la tecla Tab para agregarlo.Start to type DialogResult and choose the Tab key to add it.

      Nota

      Cuando se escribe código para llamar a un método, a veces devuelve un valor.When you write code to call a method, sometimes it returns a value. En este caso, el método ShowDialog() del componente OpenFileDialog devuelve un valor DialogResult.In this case, the OpenFileDialog component's ShowDialog() method returns a DialogResult value. DialogResult es un valor especial que le indica lo que ha sucedido en un cuadro de diálogo.DialogResult is a special value that tells you what happened in a dialog box. Un componente OpenFileDialog puede dar lugar a que el usuario pulse Aceptar o Cancelar, de modo que el método ShowDialog() devuelva DialogResult.OK o DialogResult.Cancel.An OpenFileDialog component can result in the user choosing OK or Cancel, so its ShowDialog() method returns either DialogResult.OK or DialogResult.Cancel.

    8. Escriba un punto para abrir la ventana IntelliSense del valor DialogResult.Type a dot to open the DialogResult value IntelliSense window. Escriba la letra O y pulse la tecla Tab para insertar Aceptar.Enter the letter O and choose the Tab key to insert OK.

      Para obtener más información sobre DialogResult, vea DialogResult.To learn more about DialogResult, see DialogResult.

      Nota

      Deberá quedar completa la primera línea de código.The first line of code should be complete. Para Visual C#, debería ser la siguiente.For Visual C#, it should be the following.

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

      Para Visual Basic, debería ser la siguiente.For Visual Basic, it should be the following.

      If OpenFileDialog1.ShowDialog() = DialogResult.OK Then

    9. Ahora, agregue otra línea de código más.Now add one more line of code. Puede escribirla (o copiar y pegar), pero puede resultar interesante utilizar IntelliSense para agregarla.You can type it (or copy and paste it), but consider using IntelliSense to add it. Cuanto más se familiarice con IntelliSense, más rápidamente podrá escribir su propio código.The more familiar you are with IntelliSense, the more quickly you can write your own code. El método showButton_Click() final tendrá el siguiente aspecto.Your final showButton_Click() method looks like the following. (Pulse la pestaña VB para ver la versión de Visual Basic del código).(Choose the VB tab to view the Visual Basic version of the code.)

      private void showButton_Click(object sender, EventArgs e)
      {
          if (openFileDialog1.ShowDialog() == DialogResult.OK)
          {
              pictureBox1.Load(openFileDialog1.FileName);  
          }
      }
      
      Private Sub showButton_Click() Handles showButton.Click
          If OpenFileDialog1.ShowDialog() = DialogResult.OK Then
              PictureBox1.Load(OpenFileDialog1.FileName)
          End If
      
      End Sub
      

Para continuar o revisarTo continue or review