Introduction to Windows Controls

• Start Microsoft Visual Basic 6 and accept to create a Standard EXE application by pressing Enter

To provide the necessary functionality for your application, you will use controls from the Toolbox and add them to another component such as a form. The control you pick up from the Toolbox is also referred to as a child control. the control or object on which you add a child control is referred to as its parent or host. This can be a form or another object that has the capacity to host other controls.

To identify a control on the Toolbox, you can position the mouse on it. A tool tip would appear:

From now on, we will call each control by the tool tip that appears on it.

To add a control to a host, on the toolbox, you can double-click it. Alternatively, you can click the control on the toolbox and then "draw" it on the host. You can keep adding controls to a host as necessary.

If you want to add a control over and over again, you can press and hold Ctrl, click the control on the Toolbox, then draw it in the desired area on the host. Every time you draw, the control would be added to the form or host. Once you have added enough controls, you can release Ctrl.

If you select a control by mistake, you can simply click another. The new one would become selected. If you clicked a control but don't want any control at all, you can click the Pointer button .

You cannot select more than one control to add to a host.

Practical Learning: Designing Controls

1. To add a control to the form, on the Toolbox, double-click the TextBox control
2. To add another control, on the Toolbox, click the CommandButton
3. On the form, click and hold your mouse on the top left corner in the body of the form. Then drag right and down to draw a rectangle (don't try to be precise):
    
4. Release the mouse

Selecting Controls

Most of the time, before doing anything on a control, you must first select it. In the same way, to perform an action on a group of controls, you must first select them.

To select one control on the form, you can just click it. Alternatively, you can click and hold the mouse somewhere on the form but close to the control. Then drag as if you were drawing a line. Once you have touched the control, you can release the mouse. The control would be selected.

To select more than one control at random, click one of them, press and hold Shift or Ctrl, then click each of the desired controls. Once you are satisfied with the group, release the key you were pressing.

To select more than one control in a range, click and drag to draw a rectangle. Any control that would be touched by the fake rectangle would be included in the group.

Practical Learning: Selecting Controls

1. On the form, click the TextBox object. Notice that it has been selected
2. Click an empty area on the form to select the form
3. To select controls using the mouse and keyboard, click the CommandButton
4. Press and hold Shift, then click the TextBox and release Shift. Notice that both controls have been selected

Deleting Controls

If you have one of more controls that you don't need anymore, you can remove them from your form. To remove one control, select it and press Delete. To remove many controls, first select them, then press Delete. You can also select a control or a group of control, then right-click and click Cut.

Practical Learning: Deleting Controls

1. Click the TextBox on the form to select it
2. Press Delete to remove it
3. Right-click the CommandButton on the form and click Cut

Properties of Controls

Introduction

If you access a code when designing the application, it is said that you are working at design time. If you access a control with code, it is said that you are at run time. Therefore, design time refers to the form being designed while displaying in Visual Basic. Run time refers to the time the control is displaying to the user.

After adding a control to the application, you can customize it. For example, you can change some parts of its appearance. You can also give it assignments. These are done from two parts: the Properties window and the Code editor.

Controls are broadly classified in two groups. A control is referred to as graphical if the user can see it. There are other controls that will work behind the scenes at run time. Such control are not graphical (an example is the Timer). They can be referred to as static. The user never sees these controls. There are some other controls not considered graphical because the user cannot directly change their values. For example, a control that displays only text (such is the case for the Label) is not considered graphical.

A Windows control is an object that imitates a real world object. As such, it is made of characteristics that define it. A characteristic is also called a property. A property is any aspect that describes an object.

Once you have a control, you can change its properties in the Properties window. This is considered that you are controlling the properties at "design time". To change the properties of a control, first select it, then proceed with changing the desired properties in the Properties window.

To control a form's properties with code, you will refer to itself. A form refers to itself using the Me keyword. To change the properties of a control with code, you refer to it by its name. Whether dealing with a form or a control, after typing Me for the form, or the name of the control, type a period. A list of the properties (and possibly other objects that we will know eventually) will appear. You can continue typing or simply select from the list. And continue with your coding.

Not all properties can be changed with code.

Controls Names

Everything on a computer must have a name. In the same way, to refer to a control in your code, you must give it a name. When you add a new control to your application, it receives a default name. When necessary, which will be almost all the time, you should change that name to a more recognizable one.

To change the name of a control, first select it. Then, in the Properties window, click (Name) and type the desired name. Refrain from changing the name of a control with code.

Practical Learning: Naming Controls

1. On the Toolbox, double-click the Timer
2. While the control is still selected on the form, in the Properties window, click (Name)
3. Type tmrClock and press Enter

The Control's Location

We saw that when you double-click a control from the Toolbox, it gets positioned on the form or host. We also mentioned that you can draw it, which also gives it a position. The position of a control is important for the operating system to always know where the control is. The position of a control is also referred to as its location.

The location of a control uses a coordinate system whose origin is located on the top-left corner of its parent. For a form, this origin is located in its top-left section just under the title bar:

Any control positioned on the form bases its location on this origin. After adding or drawing a control, its positioned is set so its left border has a distance called Left from the origin of its parent. In the same way, the distance from its top border to the top border of its parent is called Top. This can be represented as follows:

There are various ways you can change the location of a control. After adding it to its host, to change its coordinates, click and drag it to the desired location. You can also move a control using the keyboard. To do this, click the control to select it. Then press and hold Ctrl. While the Ctrl key is down, press:

• The down arrow key to move down
• The up arrow key to move up
• The right arrow key to move to the right
• The left arrow key to move left

Once you get to the desired location, release the Ctrl key.

To be more precise, you can also change the values of the Left and/or the Top properties in the Properties window.

To programmatically change the location of a control, in the Code Editor, in response to an action, type the control's name followed by the period operator, the desired property Left or Top, the assignment operator, and the new value.

Practical Learning: Locating Controls

1. On the form, click the timer and hold the mouse down, then drag it to the top-left section of the form
    
   
2. Notice that a tool tip displays the current coordinates of the control
3. From the Toolbox, double-click the TextBox
4. To move it, press and hold Ctrl. Then press the up arrow key 4 times and the right arrow key 3 times
5. From the Toolbox, double-click the CommandButton
6. While the new button is still selected, in the Properties, click (Name). Type Please and press Enter
7. To programmatically move it, double-click an unoccupied area on the form and type the following:
    

   Private Sub Form_Load() Please.Left = 340 Please.Top = 1200 End Sub

8. Press F5 to test the application
    
   
9. Close it and return to MSVB

The Control's Dimensions

Because its location, a control is also visibly identified by its dimensions. The width is the distance from its left border to its right border. This dimension is represented by the Width property. The height is the distance from its top to its bottom border. This dimension is represented by the Height property:

As done with the location, there are various ways you can specify or control the dimensions of an object. If you click a control on the Toolbox, you can click and hold the mouse on the form then drag. While dragging, a rectangle would guide you with a tool tip that display the dimensions, live. Once you get the desired dimensions, you can release the mouse. If the control is already located on the form, to change its dimensions, after clicking it, position the mouse on one of its 8 handles. You would get one of the following cursors depending on where the mouse is located:

You can also resize a control using the keyboard. To do this, click the control to select it. Then press and hold Shift. While holding Shift, press:

• The down arrow key to heighten the control while its top border is locked
• The up arrow key to shrink the control while its top border is locked
• The right arrow key to widen the control to the right
• The left arrow key to narrow the control while its left border is locked

Once you reach the desired dimension, release Shift.

You can also change the dimensions of a control to known values. To do this, after selecting the control on the form, in the Properties window, change the values of the Width and/or the Height fields. To change the dimensions programmatically, assign the desired values to its Width and/or Height properties.

Not all controls can be resized. The controls that don't appear to the user, such as the Timer cannot be resized.

Practical Learning: Resizing Controls

1. On the form, click the Command1 control and notice the 8 handles that surround it
2. Position the mouse in the middle bottom handle until the mouse cursor appears vertical
    
   
3. Click and hold the mouse down. Then drag down by 2 units and release the mouse
4. On the form, click the Text1 control to give it focus
5. Press and hold Shift. Then press the right arrow key 3 times and the down arrow key 2 times to resize the control
6. Release Shift

Controls Text and Caption

Some controls are meant to display or sometimes request text from the user. For such controls, this text is referred to as caption while it is simply called text for some other controls. This property is not available for all controls.

If a control displays text, it then has a Caption or a Text field in the Properties window. After adding such a control to a form, its Caption or its Text field may the same text as its name. At design time, to change the text of the control, click either its Caption or its Text field and type the desired value. For most controls, there are no strict rules to follow for this text. Therefore, it is your responsibility to type the right value.

The text provided in a Caption or Text fields of a text-based control can only be set “as is” at during design. If you want the text to change while the application is running, you can format it. For example, such a control can display the current time or the name of the user who is logged in. These format attributes cannot be set at deign time. To change the text of a text-based control at run time, either assign a simple string or provide a formatted string to either the Caption or the Text property.

Practical Learning: Using Text in a Control

1. Press F5 to test the application
2. Select the Text1 text in the text control and type Come On!
3. Close the form and return to MSVB

Control's Visibility

For the user to directly use a control, he or she must be able to see that control. For example, the user cannot type an employee's name if there is not control to receive that text. Based on this, objects provide the ability to control their visibility or absence. This characteristic is controlled by the Visible property.

The default visibility of graphical controls have their Visible property set to True. To hide a control, set its Visible property to False. You can change this value at design time using the Properties window. You can also change it programmatically.

Practical Learning: Controlling an Object's Visibility

1. On the form, click the Command1 button
2. In the Properties window, double-click Visible to change it from True to False
3. Press F5 to test the application
4. Notice that the button is invisible
5. Select the Text1 text in the text control and type Zimbabwe
6. Close the form and return to MSVB

Control's Availability

Even if a control is visibility, it doesn't necessary make its services available to the user. This means that a control can enable its role or lock them. When a control is enabled, the user can click it or type in it. You can also prevent this type of action by disabling the control.

The ability to enable or disable an object is controlled by the Enabled property. If you set it to True, which is its default value, the service of the control are available to the user. If you set this property to False, the control appears gray.

Practical Learning: Disabling a Control

1. On the form, click the Text1 control
2. In the Properties window, double-click Enabled to change its value to False
3. Press F5 to test the application
4. Try typing something in the text box. Notice that the control is disabled
5. Click the form and return to MSVB
6. Select both the text box and the button on the form. In the Properties window, set both their Enabled and their Visible properties to True
7. Click somewhere on the form to make sure nothing is selected

Tab Sequence

When a form contains many controls, the user can navigate to different ones by clicking them. Alternatively, the user can press Tab to move the focus from one control to another. The controls that can be accessed using the Tab key belong to a group. For a control to participate to this group, it must have its TabStop property set to True. All graphical controls are automatically added to this group by default when they are picked from the Toolbox and added to a form. If you don't want a control to receive focus as a result of the user pressing Tab, set its TabStop to False.

Each control in the Tab sequence group has a unique incremental number. This number is called TabIndex. The first control added receives a number of 0. The second receives 1, etc. The control whose TabIndex is the lowest would receive focus when the form comes up. If you want, you can change the default sequence by changing the TabIndex values of the controls.