Step 6: Name Your Button Controls

  • Article

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.

Note

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.

link to videoFor 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

  1. 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.

    Properties window with closeButton name

    Properties window with closeButton name

    Note

    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.

  2. 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.

  3. 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.

    Form1.cs tab with Visual C# code

    Form1.cs tab with Visual C# code

  4. Focus on this part of the code.

    Private Sub showButton_Click() Handles showButton.Click

End Sub

    private void showButton_Click(object sender, EventArgs e)
{
}

    You are looking at a method called showButton_Click(). The IDE added this when you double-clicked the showButton button. This method contains code that runs when the Show a picture button is clicked.

    Note

    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.

  5. 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.

  6. 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.

    Note

    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.

    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

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

    Note

    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.

    Note

    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.

To continue or review