Beginning Visual Basic .NET - Project 1

Buttons — A taste of Object Oriented Programming

Project 1

Removing your old project and creating a new one

Run Visual Basis .NET and open your Solution (<your name>.sln).

Right-click on the Project1a project in the Solution Explorer window and select Remove from the context menu (as shown below): 

This does not delete your project, but just removes it from this Solution.  Click the OK button on the following dialog:

Drop down the File menu and select New Project under the Add Project menu item:

The Add New Project dialog appears:

Make sure that the Visual Basic Projects folder is open in the Project Types pane, and that the Windows Application template is selected in the Templates pane.  Type Project1 in the Name textbox.  Then click the OK button.  This creates a new folder inside the \Visual Studio Projects\<Your Name> folder named Project1:

        ...My Documents\Visual Studio Projects\<Your Name>\Project1.

Note: When class is over, be sure to follow the instructions at the end of this project that tell you how to copy your project to your floppy diskette so you can take it home with you.

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 frmProj1.vb (don't forget to include the .vb extension as shown in the illustration below):

Change the Name and Text properties of the Form

To display the properties of the form in the Properties window, click once on the blank Form itself in the Design window.  Change the Name property of the form to: frmProj1, then scroll the properties windows down and change the Text property to: Project 1

Note: Spaces are allowed in the Text property, but do not put spaces in the Name property of forms, controls, or variables. Also, be "case conscious" while naming forms, controls, and variables in Visual Basic. While Visual Basic ignores the case of the letters used in names, you should not. Other programming languages such as C, and C++ are case sensitive languages. By practicing case sensitivity now, your transition to programming in C or C++ at a later date (If you so desire), will be greatly simplified.

Setting the Startup Object

Right-click on the Project1 project in your Solution Explorer window, click on the Properties item at the bottom of the context-menu.  The Project1 Property Pages dialog will appear:

Drop down the Startup object combo box and choose frmProj1, if it is not already selected (as shown in the illustration above).  Click the OK button. 

Before going on, click on the Save All button on the toolbar to save your project:

Using the Control Toolbox to add a Button to the form

For this project, you will create a program that displays a sizable window with a single button displayed exactly in the center of it. The button’s caption will read, On. When the user clicks on the button, its caption will change to Off.  When you start a new project in Visual Basic you begin with a blank form (which will be the main window of your program). To add controls (i.e. Buttons, Textboxes, List boxes, etc.) to the form, we use the Control Toolbox.  To the left of the blank form in design view is the Toolbox tab (circled below):  

Click on the Toolbox tab now to display the Control Toolbox:

You can keep the Control Toolbox open by clicking the thumb tack at the top of it.  Or just let it close again on it's own when you click on the surface of the form.

With the Windows Forms tab selected in the Control Toolbox (which it should be by default), click once on the Button control item (shown below): 

Move your mouse pointer over the surface of the form, it should change to a small plus sign (+) with a tiny button icon attached to it.  Click and Drag the mouse to draw a button on the form.  Once the button is drawn, you can grab it in the middle with the mouse to drag it to the center of the form.  The white dots that appear around the button are sizer-handles that you can use to stretch the button and resize it.  Put your button on the center of the form, as shown in the following illustration:

With the button selected, you will see it's properties displayed in the Properties window:

Now you need to add some Code to the Click event procedure of the new btnToggle button.  Double click on the btnToggle button. This pops open the Code Window and puts your cursor inside the btnToggle button's Click event procedure.

Note: Notice how the name of your new Button control btnToggle is connected by an underscore to the front of the procedure name Click, like this: btnToggle_Click. That is how all event procedures for controls appear. Sub does not stand for subroutine. Sub stands for a procedure which is below an object (as in a hierarchy). The Private designator indicates that this Sub procedure is accessible only to other procedures in the module (form) where it exists.  End Sub designates the end of the event procedure.

When a user clicks on the btnToggle button they will trigger its Click event, and any code in the btnToggle_Click event procedure is executed automatically. To change the text on the button from On to Off we must change it's Text property.   Enter the following line of code on the blank line between the Private Sub btnToggle_Click and End Sub lines:

btnToggle.Text = "Off"

By adding .Text to the end of a control’s name you can reference it's Text property in your code (as apposed to setting the Text property's value manually in the properties window at design-time). This is also how you reference all the other properties of a control in your code. For example, we could change the vertical location of a button by changing its Top property like this: btnToggle.Top = 100 (don't type this line!). Once executed, this line of code would change the button's vertical position so that it was 100 pixels (more on pixels later) from the top of form.

Save the project by clicking on the Save All button now:

Testing the program so far

Let's test run the program and see what happens.  Click on the Start button on the toolbar.  Once the program runs, click on the btnToggle button.  Did the text on the button change from On to Off?  Stop the program by clicking on the close button in the upper right corner of the form:

Adding code to the Resize event procedure of the form

Recall that the original description of this program was to create, "a program that displays a sizable window with a single button displayed exactly in the center of it." A Sizable window means that you can grab the borders of the window with the mouse and stretch it or shrink it, thus changing its size.

Run your program again. Click and drag the lower right corner of the window with the mouse and make the window smaller. Does the btnToggle button remain in the center of the window?  Nope.  Our next goal is to make sure that when the window is resized, the btnToggle button moves to remain exactly in the center of it.

Like all controls, the form itself also has its own set of built-in event procedures (we used them in project1a).  To access the Event Procedures of the frmProj1 form, drop down the Class Name list at the top left side of the code window and choose (frmProj1 Events) as shown below:

Now drop down the Method Name list at the top right of the code window and choose the Resize event procedure (as shown below):

A form’s Resize event procedure is executed automatically whenever the size of the form is changed (Note: What is called a form when you’re creating a program, is your program’s window when it runs).

Since the form’s Resize event procedure is executed when the size of the form is changed, this is the logical place to put code that repositions the btnToggle button so that it remains centered in the form.

Type the following code in the frmProj1_Resize event procedure:

btnToggle.Left = (Me.Width / 2) - (btnToggle.Width / 2)
btnToggle.Top = (Me.Height / 2) - btnToggle.Height

By using the form’s Width and Height properties, we can calculate the location of the center of the form. For example, by dividing the Me.Width property in half, you get the exact center of the form horizontally (Note: Me is how you reference the form in code). To position the btnToggle button in the center horizontally, you need to take into consideration the fact that the Left property of the btnToggle button refers to the left edge of the button. By subtracting half the width of the btnToggle button from the horizontal half-way point on the form, we place it exactly centered horizontally. Setting the vertical position of the button with the Top property is done almost the same way. Note: The caption bar at the top of the form is not included in the Me.Height value, so in the code above we subtract the entire Height of the btnToggle button to compensate.

Save the project by clicking on the Save All button now:

Run your program with the Start button and resize the window with the mouse to see if the btnToggle button changes position to stay centered. (If it doesn’t, check for syntax errors in your code. Make sure the code above is in the frmProj1_Resize event procedure).

That completes the basic assignment.

Recommended Enhancements

Beginning Visual Basic - Project 1

Properties/Procedures Table

Properties

Control Property Setting
Form Name frmProj1
  Text Project 1
Button Name btnToggle
  Text On

Event Procedures

Control Procedure Code
Form frmProj1_Resize btnToggle.Left = (Me.Width / 2) - (btnToggle.Width / 2)
btnToggle.Top = (Me.Height / 2) - btnToggle.Height
btnToggle btnToggle_Click btnToggle.Text = "Off"
(Alternate—Makes the btnToggle Button’s Caption cycle between On and Off)
btnToggle btnToggle_Click If btnToggle.Text = "On" Then
   btnToggle.Text = "Off"
Else
   btnToggle.Text = "On"
End If

 

To copy a Project folder from your Solution on the Hard Drive to a floppy diskette, follow these steps:

  1. Exit Visual Basic .NET and insert the floppy diskette, that you want to copy the Project folder to, into drive A:
  2. Select the My Documents item on the Start Menu to open the My Documents folder.
  3. In the My Documents folder, double-click the Visual Studio Projects folder to open it.
  4. Double-click on your Solution folder to open it (it should have your name).
  5. Open the Project folder that you want to copy, by double-clicking on it.

Deleting the Obj and Bin folders from inside the Project folder before copying it.

  1. Inside the Project folder, delete the Obj and Bin folders--these folders are created automatically when you open a project.  You do not need to copy them, or their contents, to your floppy diskette.
  2. Hit the Backspace key once--or click the Back button on the toolbar.  This moves you from inside the Project folder to back inside your Solution folder.
  3. Right-click on the Project folder and selected: 31/2" Floppy A: on the Send To fly-out menu.  This copies the Project folder to your floppy diskette.