For your third Visual Basic project, you will create a program that displays a window with 3 RadioButtons, 3 PictureBoxes, and an Exit Button. When the program runs, you will be able to point the mouse anywhere on the form and click to move one of the PictureBoxes to that spot. Which PictureBox moves depends upon which Radio Button is selected.
Close your last project and creating a new one
If you still have the Project2 project open, select the Close Project item on the file menu to close it.
With no open projects, click on the Project... option next to Create: on the Start Page, or pick New Project item on the File drop-down menu.
The Add New Project dialog appears:
Be sure the Windows Form Application template is selected in the Templates pane on the right side, then type Project3-4 in the Name textbox (as shown above)—We will also be using this project when we do Project 4. Now click the OK button. Once the new project is opened, save it by clicking on the Save All button on the standard toolbar to display the Save Project dialog box, as shown:
Do not change the default Location path—Note: The illustration above is from version 2005. Be sure to uncheck the Create directory for solution option, as show above, before clicking on the Save button.
This creates a new folder inside the My Documents\Visual Studio 2010\Projects\ folder named Project3-4:
My Documents\Visual Studio 2010\Projects\Project3-4
Rename the Form file
With the form file (Form1.vb) selected in the Solution Explorer window (as shown above), the Properties window directly below it displays it's File properties. Click on the File Name property and type frmProj3.vb (don't forget to include the .vb extension, as shown in the illustration below):
To display the properties of the form in the Properties window, click once on the blank Form, which should be displayed on the left side of the screen in the Design window. Make sure the Name property—which is in parentheses (Name) at the top of the property list so that it's easy to find—is frmProj3. Then scroll the properties windows down—the properties are listed alphabetically—and change the Text property to Project 3 as shown below:
Before going on, click on the Save All
button on the toolbar to save your project.
Adding three RadioButtons, PictureBoxes, and a Button to the form
If you have the All Windows Forms section of the Control Toolbox open you can close it, because all the controls we will need are in the Common Controls section—click the - in front of a section to close it, click the + in front of it to expand it. Use the illustration below as a guide and place 3 RadioButtons (on the left side) and 1 Button (near the bottom) as shown:
Use the following table and assigned these values to the listed properties to make the controls look like the above illustration:
| Control | Property | Value |
| RadioButton1 | Name | rdoCircles |
| Text | Circles | |
| BackColor | DeepSkyBlue (from Web tab) | |
| Checked | True | |
| AutoSize | False | |
| Size.Width | 70 | |
| Size.Height | 30 | |
| RadioButton2 | Name | rdoCarved |
| Text | Carved | |
| BackColor | LawnGreen (from Web tab) | |
| Checked | False | |
| AutoSize | False | |
| Size.Width | 70 | |
| Size.Height | 30 | |
| RadioButton3 | Name | rdoStraw |
| Text | Straw | |
| BackColor | Tomato (from Web tab) | |
| Checked | False | |
| AutoSize | False | |
| Size.Width | 70 | |
| Size.Height | 30 | |
| Button1 | Name | btnExit |
| Text | E&xit |
Radio Buttons have a special quality that allows only one of them in a group to be on—have their Checked property set to True—at a time. When the user clicks on one radio button to turn it on, any button in the group that was on before is shut off automatically. Also, in a group of radio buttons, one of them must always be on. So you cannot shut one off without turning another one on. Radio buttons are grouped by the container they are in. In this program the form is the container, so all the radio buttons on the form affect each other. You could create separate groups of radio buttons on the same form by putting them inside groupbox or panel controls.
Add a PictureBox control to the form, as shown:
Click the little Task Arrow button at the top of the PictureBox (circled below) to display the PictureBox Tasks popup:
Click on the Choose Image hypertext on the PictureBox Tasks popup to display the Select Resource dialog, as shown:
The Select Resource dialog lets us choose the resource context. This is where binary data for our project—like the picture in the Image property of a PictureBox control—will be stored. We will use the default resource file of the project, Resources.resx. So be sure the Project resource file option is selected, as shown in the above illustration. Click the Import... button and browse to the location of the Circles.bmp file and select it:
In the classroom you will find the bitmaps for these projects in the \Shared\Bitmaps folder on drive C: (Note: You may also download the required bitmap files by clicking on this Link if you are doing this project from home). Once you have selected the Circles.bmp file and clicked the Open button, the Select Resource dialog is displayed again. It now has the Circles bitmap file listed in recourse list, as shown:
Click the OK button to apply this resource to the Image property of the selected PictureBox. Click the little Task Arrow button at the top of the PictureBox again to display the PictureBox Tasks popup and set the SizeMode property to AutoSize, as shown:
With the PictureBox selected, so that its properties are displayed in the Properties Window, set the Name property of the PictureBox to picCircles. Add two more PictureBox controls to the form and using the process above, set the following property values. Be sure to use the little Task Arrow button at the top of the PictureBoxes to set their Image and SizeMode properties:
| Control | Property | Value |
| PictureBox1 | Name | picCarved |
| SizeMode | AutoSize | |
| Image | Carved Stone.bmp | |
| PictureBox2 | Name | picStraw |
| SizeMode | AutoSize | |
| Image | Straw Mat.bmp |
When finished, your form should look like this:
Take a look at the Solution Explorer window now, it should look like this:
Notice that the 3 bitmap files you added to your resources are listed in the Resources folder. That means that these files are actually embedded in your project—There is now a Resources folder inside your Project3-4 folder that contains these bitmap files). Now even if the original files are deleted they are still part of your project.
The sender and e Event Procedure Parameters
Let's take a look at the structure of the form's Click event procedure (Don't type the following code!):
frmProj3_Click(ByVal sender As System.Object, _
ByVal e As System.EventArgs)
I've removed the Handles Me.Click statement at the end of the above line so that we can focus on the sender and e parameters that are passed to the event procedure by the operating system (more on the Handles statement later). I've also broken the line onto two lines for readability. Leave it to Microsoft to invent such imaginative names for these two parameters: sender and e. I especially like e...can we come up with a more ambiguous name? Here is what they are:
- sender is a reference to the actual object (control) that raised the event. In the case of the frmProj3_Click event procedure, sender would actually be a reference to the form itself, since it would generate the event when the user clicks on it.
- e stands for Event Arguments and it actually varies from one event procedure to another, hence the non-descriptive name: e. In the Click event procedure, e is actually empty, because the operating system doesn't pass anything (except the sender) to the Click event procedure of a control.
If you put your cursor inside the frmProj3_Click event procedure and type e. (e dot) you will see this list of choices:
See how the only data member that e contains is Empty (the list also includes the 5 intrinsic methods which are included in every e parameter).
Determining where the user clicked on the form
When the user clicks on the surface of the form, we want to move the PictureBox that corresponds to the selected RadioButton to that location. Our first assumption would be that we can put the code to move the PictureBox inside the Form's Click event procedure. But we just discovered that the e parameter of the Click event procedure is empty, there is no way we can tell where on the form they clicked from within the Click event procedure. Let's take a look at the MouseDown event procedure of the form instead.
To display the code window, make sure the form file (frmProj3.vb) is selected and click on the View Code button at the top of the solution explorer window, as shown:
Drop down the Class Name list at the top left side of the code window and choose (frmProj3 Events). Then select the MouseDown event procedure from the Method Name drop down list at the top right of the code window. Notice how the e parameter of the MouseDown event procedure is a MouseEventArgs type:
frmProj3_MouseDown(ByVal sender As Object, _
ByVal e As System.Windows.Forms.MouseEventArgs)
In the Click event procedure the e was just a generic EventArgs type. MouseEventArgs includes several data members that tell us where the mouse is, which mouse button was pressed down, etc. With the cursor inside the frmProj3_MouseDown event procedure, type e. to see the list of data members it contains:
The e.X and e.Y values are exactly what we are looking for. e.X specifies the horizontal location of the mouse pointer (0 is at the left edge of the form), and e.Y specifies the vertical location of the mouse pointer (0 is at the top of the form, bottom edge of the caption bar). Notice the Button item in the above list? You can use e.Button to determine which mouse button the user actually pressed down to trigger the event. (i.e. If e.Button = MouseButtons.Left Then).
Adding code to the frmProj3_MouseDown event procedure to move the PictureBoxes
Add the following code to the frmProj3_MouseDown event procedure:
'Is the rdoCircles radio button on?
If rdoCircles.Checked = True Then
picCircles.Left = e.X
picCircles.Top = e.Y
'Is the rdoCarved radio button on?
ElseIf rdoCarved.Checked = True Then
picCarved.Left = e.X
picCarved.Top = e.Y
'If the other radio buttons are off then the
' rdoStraw radio button must be on.
Else
picStraw.Left = e.X
picStraw.Top = e.Y
End If
The first line of code above tests If the rdoCircles radio button is checked. If it is checked its Checked property will be True (True is a reserved word in Visual Basic. So is False which is the opposite of True). The following two lines under the If line move the the picCircles picturebox control to the location on the form where the user clicked by setting the Left and and Top properties of picCircles to the e.X and e.Y values respectively.
The ElseIf test (Else and If stuck together) on the fourth line—not counting comment lines—is only executed if the first If test is False. If the ElseIf test is also False then the code after the last Else statement on the seventh line is executed. Why not test the Checked property of the rdoStraw radio button with another ElseIf test on seventh line above? Because if both of the first two Radio Buttons—rdoCircles or rdoCarved—are not checked, then the last one (rdoStraw) must be. Note: Like I mentioned before, an important quality of Radio Buttons is that one of them—and only one—must be On (True) at all times—you can’t turn them all Off (False).
Save your program and run it. Click on any of the 3 radio buttons (rdoCircles, rdoCarved, or rdoStraw). Now click anywhere on the form and watch the corresponding image jump to that spot. Now select another radio button and click on the form again to see what happens.