Step 8: Write Code for the Show a Picture Button Event Handler

  • Article

In this step, you make the Show a picture button work like this:

  • When a user clicks that button, the program opens an Open File dialog box.

  • If a user chooses a picture file, the program shows that picture in the PictureBox.

The IDE has a powerful tool called IntelliSense that helps you write code. As you enter code, the IDE opens a box with suggested completions for partial words that you enter. It tries to determine what you want to do next, and automatically jumps to the last item you choose from the list. You can use the up or down arrows to move in the list, or you can keep typing letters to narrow the choices. When you see the choice you want, press the TAB key to select it. Or, you can ignore the suggestions, if not needed.

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.

To write code for the Show a picture button event handler

  1. Go to Windows Forms Designer and double-click the Show a picture button. 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. Type an i on the empty line between the two braces { }. (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 with Visual C# code

    IntelliSense with Visual C# code

  3. The IntelliSense window should be highlighting the word if. (If not, enter a lowercase f, and it will.) Notice how the yellow tooltip next to the IntelliSense window shows Code snippet for if statement. (In Visual Basic, the tooltip also states that this is a snippet, but with slightly different wording.) You want to use that snippet. Press the TAB key to insert if into your code. Then press the TAB key again to use the if snippet. (If you clicked somewhere else and your IntelliSense window disappeared, backspace over the i and retype it, and the IntelliSense window opens again.)

    Visual C# code

    Visual C# code

  4. Next, you use IntelliSense to enter more code to open an Open File dialog box. If the user clicked the OK button, the PictureBox loads the file that the user selected. The following steps show how to enter the code, and although it's numerous steps, it's just a few keystrokes:

    1. Start with the selected text true in the snippet. Type op to overwrite it. (In Visual Basic, you start with an initial cap, so type Op.)

    2. The IntelliSense window opens and displays openFileDialog1. Press TAB to select it. (In Visual Basic, it starts with an initial cap, so you see OpenFileDialog1. Ensure that OpenFileDialog1 is selected.)

    3. 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. These are the same properties that appear in the Properties window when you click it in Windows Forms Designer. There are also methods that can tell the component to do things (like open a dialog box).

      Note

      The IntelliSense window can show you both properties and methods. To determine what is being shown, look at the icon to the left. You see a picture of a block next to each method, and a picture of a hand next to each property. There's also a lightning bolt icon next to each event. These pictures display as follows.

      Method icon

      Method icon

      Property icon

      Property icon

      Event icon

      Event icon

    4. Start to type ShowDialog (capitalization is unimportant to IntelliSense). The ShowDialog() method will show the Open File dialog box. After the window has highlighted ShowDialog, press TAB.

    5. When you use a method on a control or a component (referred to as calling a method), you need to add parentheses. So enter opening and closing parentheses: ()

      Note

      Methods are an important part of any program, and this tutorial has shown several ways to use methods. You can call a component's method to tell it to do something, like how you called the OpenFileDialog component's ShowDialog() method. 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 clicks a button.

    6. For Visual C#, add a space, and then add two equal signs (==). For Visual Basic, add a space, and then use a single equal sign (=). (Visual C# and Visual Basic use different equality operators.)

    7. Add another space. As soon as you do, another IntelliSense window opens. Start to type DialogResult and press TAB to add it.

      Note

      When you write code to call a method, sometimes it returns a value. In this case, the OpenFileDialog component's ShowDialog() method returns a DialogResult value. DialogResult is a special value that tells you what happened in a dialog box. An OpenFileDialog component can result in the user clicking OK or Cancel, so its ShowDialog() method returns either DialogResult.OK or DialogResult.Cancel.

    8. Type a dot to open the DialogResult value IntelliSense window. Enter the letter O and press TAB to insert OK.

      Note

      The first line of code should be complete. For Visual C#, it should be the following.

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

      For Visual Basic, it should be the following.

      If OpenFileDialog1.ShowDialog() = DialogResult.OK Then

    9. Now add one more line of code. You can type it (or copy and paste it), but consider using IntelliSense to add it. The more familiar you are with IntelliSense, the more quickly you can write your own code. Your final showButton_Click() method looks like the following.

      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);  
    }
}

To continue or review