Step 6: Name Your Button Controls
There's only one PictureBox on your form. When you added it, the IDE automatically named it pictureBox1. There's only one CheckBox, which is named checkBox1. Soon, you will write some code, and that code will refer to the CheckBox and PictureBox. Because there's only one of each of these controls, you will know what it means when you see pictureBox1 or checkBox1 in your code.
In Visual Basic, the default first letter of any control name is initial cap, so the names are PictureBox1, CheckBox1, and so on.
There are four buttons on your form, and the IDE named them button1, button2, button3, and button4. By just looking at their current names, you don't know which button is the Close button and which one is the Show a picture button. That's why naming your button controls is helpful.
For a video version of this topic, see Tutorial 1: Create a Picture Viewer in Visual Basic - Video 3 or Tutorial 1: Create a Picture Viewer in C# - Video 3.
To name your button controls
Click the Close button. (If you still have all the buttons selected, press the ESC key to cancel the selection.) Scroll in the Properties window until you see the (Name) property. (The (Name) property is near the top when the properties are alphabetical.) Change the name to closeButton, as shown in the following picture.
If you try changing the name of your button to close Button, with a space between the words close and Button, the IDE displays an error message: "Property value is not valid." Spaces (and a few other characters) are not allowed in control names.
Rename the other three buttons to backgroundButton, clearButton, and showButton. You can verify the names by clicking the control selector drop-down list in the Properties window. The new button names appear.
Double-click the Show a picture button in Windows Forms Designer. When you do, the IDE opens a new tab in the main window called the Form1.cs tab, as shown in the following picture.
Focus on this part of the code.
You are looking at a method called showButton_Click(). The IDE added this when you clicked the showButton button. This method contains code that runs when the Show a picture button is clicked.
In this tutorial, the Visual Basic code that's automatically generated has been simplified by removing everything between the parentheses, (). Whenever this occurs, you can remove the same code. Your program will work either way. For the remainder of the tutorials, any automatically generated code is simplified whenever possible.
Go to the designer tab (the Form1.cs [Design] tab in Visual C# or the Form1.vb [Design] tab in Visual Basic) and double-click the Clear the picture button. Repeat this for the last two buttons. Each time, the IDE adds a new method to the form's code.
To add one more method, double-click the CheckBox control in Windows Forms Designer to make the IDE add a checkBox1_CheckedChanged() method. That method gets called whenever the user selects or clears the check box.
When working on a program, you often move between the code editor and Windows Forms Designer. The IDE makes it easy to navigate in your project. Use Solution Explorer to open Windows Forms Designer by double-clicking Form1.cs in Visual C# or Form1.vb in Visual Basic.
The following shows the new code that you see in the code editor.
The five methods that you added are called event handlers, because your program calls them whenever an event (like a user clicking a button or selecting a box) happens.
When you double-click a control in the IDE, it adds an event handler method for the control. For example, when you double-click a button, the IDE adds an event handler for its Click event (which is called whenever the user clicks the button). When you double-click a check box, the IDE adds an event handler for its CheckedChanged event (which is called whenever the user selects or clears the box).
After you add an event handler for a control, you can return to it at any time from Windows Forms Designer by double-clicking the control.
Names are important when you build programs, and methods (including event handlers) can have any name that you want. When you add an event handler with the IDE, it chooses a name based on the control's name and the event being handled. For example, the Click event for a button named showButton is called the showButton_Click() event handler method. Also, opening and closing parentheses () are usually added after the method name to make it clear that methods are being discussed.