Check box, Option button and Frame
Checkbox is used to deal with toggle options, which have only two possible states – true/ false, or yes/no.
Checkbox can be in either of the two states – checked or unchecked. When checkbox is checked, a tick mark appears in the rectangle. When it is unchecked, the rectangle will be empty.
Options buttons are used to allow user to select one from a set of mutually exclusive options. You can have more than one set of option button but in that case each set of option button should be placed inside a separate Frame control.
Note: Option button is also called as Radio button.
Out of the available option buttons only one option button can be selected at a time. Selecting an option button will automatically unselect all other option buttons in the group.
Frame control is used to group option buttons physically and logically. All the option buttons placed in one frame are considered to be a group and only one option button within the group frame can be selected. Visually, frame is a rectangle that encloses a set of controls.
A Frame is also used to provide better visibility. A Frame can enclose a set of controls related to a particular topic.
Now, let us develop a small program to understand how to use checkboxes. Later we will develop one more application to deal with option buttons.
See figure 3.1, for user interface of the form.
Figure 3.1: Sample application at the time of design.
The following table contains the meaning of each of the controls in the sample application.
|Control||What it does?|
|Textbox||Allows user to enter some test. It is primarily used to test how check boxes work. You can enter any text into it. It is a multi-line text box.|
|Bold checkbox||When it is checked the text in Textbox will be displayed in bold.|
|Italic checkbox||When it is checked the text in Textbox will be displayed in Italic attribute.|
|Underline||When it is checked the text in Textbox will be displayed with underline.|
|Quit||Unloads form to terminate the program.|
Here are the steps to create a sample application:
- Start a new project using File->New Project and select Standard Exe as the type of project.
- Place a textbox, three checkboxes and a command button on the form.
- Change properties of form and controls as follows:
- Now try to arrange control as shown in figure 3.1. Please see “Aligning and Sizing control” section for further details.
Aligning and Sizing Control
You have to align and resize control to make them look good. But this process could be very tedious if you have more control on a form. The common tasks in this process are:
- Setting two or more controls to the same size.
- Aligning two or more controls to the required direction.
- Giving equal amount of gap between control.
The above mentioned tasks can be carried out by you manually, but if you use facilities provided by Visual Basic IDE, then it will be more accurate and less time consuming.
But before we take any action on a set of controls, you have to select multiple control.
To select multiple controls:
- Select first control by clicking on it
- While selecting second control onwards, select control by holding down CTRL key.
Identify the rectangle where you have controls that are to be selected.
- Go to upper left corner of the rectangle and click at the location and hold down the mouse button.
- Drag mouse pointer until you reach bottom right corner of the rectangle. As you drag mouse pointer you must see a dashed rectangle being drawn to show you the area that is being enclosed.
- Release mouse button once you reach button right corner of the rectangle.
At this stage all the controls that are enclosed by the rectangle will be selected.
Here, second method is possible only when controls are placed adjacently.
To align multiple controls:
- Select the control that you want to align using either of the methods given above.
- Select Format -> Align and select one of the option listed there. See figure 3.2
- Visual Basic aligns all selected controls according to the selection, taking the automatically last selected control as the base.
Figure 3.2: Align sub menu.
To change the size of a set of controls to the same size:
- Select all controls that you want to set to same size.
- Select Format ->Make Same Size and select one of the options given in sub menu. The options are Width, Height and
Visual Basic changes the width or height or both, depending upon selection, to the size of last selected control.
To change space between controls:
- Select controls between which the space is to be adjusted.
- Select Format menu and Horizontal Spacing or Vertical Spacing depending upon the need.
- Select one of the options given in the submenu. The options and their meaning are listed in table.
|Make Equal||Moves the selected objects so that there is equal space between them using the outermost objects as endpoints. The outermost objects do not move.|
|Increase||Increases horizontal spacing by one grid unit based on the object with focus. When an object has focus, black handles appear on its borders.|
|Decrease||Decreases horizontal spacing by one grid unit based on the object with focus. When an object has focus, black handles appear on its borders.|
|Remove||Removes the horizontal space so that the objects are aligned with their edges touching based on the object with focus. When an object has focus, black handles appear on its borders.|
Table 3.1: Options related to spacing between controls.
After having understood the options available to arrange controls in the required manner. Apply them if you need.
We have to write code for each checkbox. Whenever user clicks on the checkbox, the state of checkbox is toggled. That means, if checkbox is checked it will be unchecked and if checkbox is unchecked then it will be checked. So we have to write code for Click event of the checkbox. And depending upon the status of the checkbox we have to either turn on or off the required font attribute.
Value property of checkbox
Value property of checkbox indicates whether checkbox is currently checked or unchecked. The valid values are; 0 is Unchecked (default), 1 is Checked and 2 is Grayed (dimmed).
The following is the required code to change font attributes of textbox as and when ever user clicks on the check box.
Private Sub chkBold_Click()
‘ turn on bold attribute if checkbox is checked
If chkBold.Value = 1 Then
txtsample.Font.Bold = True
txtsample.Font.Bold = False
Private Sub chkItalic_Click()
‘ turn on Italic attribute if checkbox is checked
If chkItalic.Value = 1 Then
txtsample.Font.Italic = True
txtsample.Font.Italic = False
Private Sub chkUnderline_Click()
‘ turn on Underline attribute if checkbox is checked
If chkUnderline.Value = 1 Then
txtsample.Font.Underline = True
txtsample.Font.Underline = True
Private Sub cmdquit_Click()
‘ unload current form and as the result program is terminated Unload Me
Listing 3.1: Code for sample project.
Font object allows you to access various font-related attributes. The following is the list of attributes in Font object.
|Bold||Determines whether bold style is on or off.|
|Italic||Determines whether Italic style is on or off.|
|Underline||Determines whether underline style is on or off.|
|StrikeThrough||Determines whether StrikeThrough style is on or off.|
|Size||Specifies the size of character in the font.|
|Weight||Specifies the thickness of the character. Regular setting has a weight of 400 and Bold setting has a weight of 700. Any other value is automatically converted to either 400 or 700 whichever is closer.|
|Name||Specifies the name of the font, such as Courier and Arial.|
Table 3.1: Properties of Font object.
Note: You can change font related properties through Font dialog box invoked using Font property.
Now run the application and enter some text in the textbox. Then turn on and off each of the checkboxes to see the effect on the way text is displayed in the textbox.
Using Option Buttons
Let us now develop an application that uses option buttons. In this application user is given three subjects and two types of courses to choose from. After selecting the options if user clicks on Display Amount button then the course fee will be displayed in a message box.
See figure 3.3, to get an idea about the required user interface. And following are the steps to create this application.
- Start a new project using File -> New Project.
- Select Standard Exe as the type of the project.
- Place a Frame control in the upper-left corner of the form.
- Place three options buttons inside the frame. One way of verifying whether option buttons are inside the frame or not, is by moving frame. If all option buttons are also moving then it means buttons are inside the frame.
- Place one more frame in the upper-right corner. As we have to have two different sets of options, we have to use two frames. First frame contains three subjects and second frame contains two course types.
- Place two command buttons at the appropriate location (see figure 3.3).
- Now change the following properties of the controls.
|Form||Caption||Option Buttons Demo|
|Caption||&Visual Basic 6.0|
Figure 3.3: Sample application for Option Buttons at design time.
Now, let us write code for cmdDisplayAmt command button. When user clicks on this button we have to calculate the amount to be paid by the student and display that amount in a message box.
Private Sub cmddisplayamt_Click()
Dim amount As Integer
‘ find out the amount based on the selections made by user
If optoracle.Value Then
amount = 6000
ElseIf optvb.Value Then
amount = 5000
amount = 5500
‘ give a discount of 10% if fulltime is selected
If optft.Value Then
amount = amount * 0.9 ‘ 10% discount
‘ display the value using a message box
MsgBox “Amount to be paid : ” & Str(amount), , “Amount”
Private Sub cmdquit_Click()
Listing 3.2: Code for option button’s sample application
Value property of Option button
Value property of options button indicates whether options button is currently selected or not. If option button is selected then Value property is set to True, otherwise it is set to False.
In listing above, we are checking whether optOracle is selected by examining its Value property. If it is not true, then we check optVb and so on. The condition
If optOracle.value then
Means if Value property is containing True then condition is true, otherwise condition is false. This condition is same as the condition given below.
If optOracle.value = True then
MsgBox statement is used to display a message in a window to user. It displays a window with the message and Ok button. Until user selects Ok button the message box doesn’t allow user to navigate to any other window in the same application. You must click on OK button to continue with the program. Here is an example of message box that is displayed by sample application.
Figure 3.4: Message box displaying amount to be paid.
Properties of CheckBox and Option Button
The following table lists important properties of the Checkbox and Options button controls. These two controls have the same set of properties.
|Picture||Contains the picture that is to be displayed when control’s Style property is set to 1.|
|Style||Specifies the display behavior of the control. Valid values are:
|Value||Sets or returns the current state of the Checkbox. Valid values are:
0 – UnChecked, 1– Checked, 2- Grayed (Dimmed)
|DisabledPicture||Contains the picture that is to be displayed when control is disabled.|
|DownPicture||Contains the picture that is to be displayed when control is in down (depressed) mode.|
Table 3.2: Properties that are specific to Checkbox and Option button controls.