8/3/2019 CS2202 Chapter 2 I

1/3

CS2202

Claude Chua, 2011 Page 1 of 3

INTRODUCTION TO GUI PROGRAMMING

Name:__________________________ Date: ______________

CHAPTER 2: COMMON GUI CONTROLS I(Picturebox, Groupbox, Checkbox & Radiobutton)

Section A: Picturebox

Used to display/contain an image

Add the image to the projects resources first.To add a resource:

o Right click on the project name in the Solution Explorer. Select Properties. A

window will appear.o Select the Resource tab.o Select Add Resource > Add Existing Fileo Browse to the folder where your image is stored and click Open. Your image

will be added in.

To load the image into the Picturebox via design view, update the Image property ofthe Picturebox.

To load the image into the Picturebox using code, use the assignment statement.Recap: ObjectName.Property = Value

e.g. SamplePictureBox.Image = My.Resource.pooh

o SamplePictureBox refers to a Picturebox named SamplePictureBox

o My.Resource will help to point to the resource folder.

o pooh refers to the file name of the image file.

Select Add Resource >Add Existing File

Resource folder willshow the imagesavailable

Click on the

Resources tab

8/3/2019 CS2202 Chapter 2 I

2/3

The SizeMode property determines how the image will be displayed in thePicturebox. Describe the effects of each respective SizeMode in the table below:

SizeMode DescriptionNormal

StretchImageAutoSizeCentreImage

Zoom

The Visible property can be used to hide an image.e.g. SamplePictureBox.Visible = False

Section B: Groupbox

Used as containers for other controls such as radio buttons and check boxes

Improves readability of form by separating the controls into logical groups

Section C: Checkbox

Allows the user to select or deselect one or more items in any group

The Checked property can either be True or Falseo When Checked, the value is Trueo When Unchecked, the value is False

e.g. displayCheckBox.Checked = FalseThe above code would set the checkbox named displayCheckBox to uncheck.

Use the Text property for the text you want to appear next to the Checkbox

We can set the visibility of a control to match the checked condition of a CheckBox.e.g.MessageLabel.Visible = displayCheckBox.Checked

Note that the assignment will be valid as long as the VALUE of the LHS expressionmatches with that on the RHS.

In the example above, when displayCheckBox is checked, the value of

displayCheckBox.Checked is True, thus setting the visibility ofMessageLabel to

True.

Claude Chua, 2011 Page 2 of 3

8/3/2019 CS2202 Chapter 2 I

3/3

Claude Chua, 2011 Page 3 of 3

Section D: Radiobutton

User may select onlyone in any group

First create a group box and then create each radio button inside the group box. Thegroupbox helps to group the radiobuttons together, allowing only any 1 radiobutton tobe selected from the set.

The Checked property can either be True or Falseo When Checked, the value is Trueo When Unchecked, the value is False

e.g. redRadioButton.Checked = True

Use the Text property for the text you want to appear next to the Radiobutton

Question: How does the behaviour of radio buttons differ from the behaviour of checkboxes?

Question: if you want two groups of radio buttons on a form, how can you make the groupsoperate independently?

1. Download the program ImageDisplayer.exe from espace and run it.2. Start a new project.3. Design the GUI of your project according to that shown in ImageDisplayer.exe by

adding in the relevant controls.4. Complete the functionalities required using the knowledge you have learnt in this

chapter.

Now resize the program given. What do you notice about the size of the label andpicturebox?

Every control contains an Anchor property which helps to determine how the control wouldresize as the form is being resize. Play around with the Anchor property of the label and

picturebox in your program such that your program functions like the one given whenresized.