Compunet Corporation

Programming with Visual Studio .NET

GUI

Week 13

Tariq Aziz and Kevin Jones

Compunet Corporation

Properties of a GUI Object

• A GUI Object may have many properties. For example, a button object has a name, size, and location. The text property holds the string that is displayed in the button on the form. Suppose we want two buttons on our form: an OK button and a Quit button. After dragging two buttons from the toolbox to our form, we need to set the text property of each button, so that the following is true:

Button1.Text = “OK”Button2.Text = “Quit”

• Notice that when we write code, we access the property of an object using dot notation; the name of the object comes first, then a dot, then the name of the property.

Compunet Corporation

Setting GUI Object Properties

• We set the property of an object at design time using the Properties window. First, select the GUI object on your form (you’ll see selection handles appear around the object). The Properties window displays the properties of the currently selected object in the Windows Forms Design window. Simply scroll through the properties to find the one you want, then click on the value and change it.

• Note that setting the properties at design time determines the initial value of the properties at run-time.

• We may also change the values of properties at run-time by executing assignment statements, such as

Button1.Text = “Push here”

Compunet Corporation

Text Property of Button1 Object

The “Text” property of the Button1 object is displayed here in the Properties window.

Compunet Corporation

Text Property of Button1 Object

Note that the Text property has been changed to “OK”, so Button1 now displays “OK” instead of “Button1”.

Compunet Corporation

Lucky Seven program (Ch. 2)

• The Lucky Seven program from chapter 2 is a simple application that gives you practice in basic GUI programming. The program allows the user to click the Spin button, each time displaying three random numbers between 0 and 9. The user “wins” if any of the three numbers happens to be “7”, and he loses otherwise.

• First we’ll setup the user interface, then we’ll define the code behind the Spin button.

Compunet Corporation

Start a New Visual Basic Project

Click here to start a new project.

Compunet Corporation

Name Your Visual Basic Project

Type the name of your project here. A folder of the same name will be created to store your project files.

Compunet Corporation

Starting With an Empty Form…

Click on the Button Control in the Toolbox…

Compunet Corporation

then click and drag to draw a button object on your form.

Draw a Button on Your Form…

Compunet Corporation

Here is your new button. Continue like this, adding another button and four labels.

Button1…

Compunet Corporation

Two Buttons, Four Labels

Compunet Corporation

Editing Object Properties

• Now edit the text properties of each button and label so your form appears as follows…

Compunet Corporation

Changed Text Properties…

Compunet Corporation

Now Write the Code• Double-click on the Spin button to warp to the Button1_Click event procedure, and fill

in the code for the Spin button as it appears on page 53 in your book.• You’ll need to go back and add the picturebox object to your form, though…

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As _ System.EventArgs) Handles Button1.Click

PictureBox1.Visible = False ' hide picture Label1.Text = CStr(Int(Rnd() * 10)) ' pick numbers Label2.Text = CStr(Int(Rnd() * 10)) Label3.Text = CStr(Int(Rnd() * 10)) ' if any caption is 7 display picture and beep If (Label1.Text = "7") Or (Label2.Text = "7") _ Or (Label3.Text = "7") Then PictureBox1.Visible = True Beep() End IfEnd Sub

Compunet Corporation

Type the code here…

Type the code from page 53 in your book here.

Compunet Corporation

Complete the Examplefrom Chapter 2

• Once you’ve finished typing all the code from the book, build and run your program as shown on the following slide.

Compunet Corporation

Build the Lucky Seven Program

• To build (or compile) the program, select Build Solution from the Build menu.

• To run the program, select Start from the Debug menu, or simply click the Start (Play) button on the standard toolbar. Note: You must login as “student” (password = “computer”) to use this feature.

Compunet Corporation

Your Program at Run-time!