Properties of Windows Controls

Primary Characteristics of Controls

Introduction

In the previous lesson, we defined a control as an object that allows a person to interact with the computer. Such a control is positioned on a worksheet or a form to play its intended role. Because there are different assignments that a computer can be subjected to, there are also different Windows controls to perform different roles. Nevertheless, many controls share some characteristics while some controls have restricted characteristics on their own. When creating an application, you decide what controls to use, when and why. For this reason, you should be familiar with the characteristics and the requirements of a particular control that you intend to use.

 

Practical Learning: Introducing Windows Controls

1. Start Microsoft Excel
2. To launch the programming environment, on the main menu, click Tools -> Macro -> Visual Basic Editor
3. To create a form, on the main menu of Visual Basic, click Insert -> UserForm
4. On the Toolbox, click the CommandButton and click somewhere on the form (no need for precision)
5. On the Toolbox, click ComboBox and click the form away from the previously added CommandButton

Every object used in a computer must have a name. This allows you and the operating system to know at any time what object you are referring to. When you add a new control to your application, Visual Basic gives it a default name. For example, the first CommandButton you add is named CommandButton1. If you add another button, it would be named CommandButton2, and so on. The default name assigned by Visual Basic may not be indicative enough for the role a control is playing in your product, especially if your workbook involves many objects. Therefore, you should assign your own custom names to the controls of your application.

In the Properties window, the name of a control is represented with the (Name) field. To change the name of a control, click (Name) and type the desired name. There are rules you must follow when naming your controls. The name of a control:

• Must start with a letter
• After the first letter, can contain letters, digits, and underscores only
• Cannot contain space

Based on these rules, you can adapt your own.

Practical Learning: Naming Windows Controls

1. On the form, right-click CommandButton1 and click Properties
2. In the Properties window, click (Name) and type cmdSubmit
3. On the form, click the combo box
4. In the Properties window, click (Name) and type cboSizes

The Text or Caption of a Control

Some controls are text-based, meaning they 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 may have a property called Caption in the Properties window. After adding such a control to a worksheet or a form, its Caption field would display the same text as its name. At design time, to change the caption of the control, click its Caption field in the Properties window 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. Some other controls have this property named Text. For such a control, when you add it to a worksheet or a form, its Text field in the Properties window may be empty. If you want, you can click the Text field and type the desired text.

The text provided in Caption or a Text field of a text-based control can only be set “as is” at design time. 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 design time. To change the text of a text-based control at run time, either assign a simple string or provide a formatted string to the Caption or the Text property.

Practical Learning: Setting Controls Text

The Alignment of the Text or Caption of a Control

If a control is text-based, when you provide text to it or when the user types text in it, by default, text is positioned to the left side of the control. This is appropriate if the value entered is a string (regular text). In some cases, such as numbers, you may prefer the value to be position in the center or on the right side of the control. This characteristic is referred to as the alignment of text. Once again, not all controls have this option.

The ability to control the alignment of text is done through the TextAlign property. It provides three options:

The Location of a Control

Introduction

A control added to a worksheet or a form is confined to the area of the body offered by that window. After adding it to a window, the control is positioned in the body of the parent using a Cartesian coordinate system whose origin is located on the top-left corner of the parent window. If the parent is a form, the origin is located just under the title bar to the left. The horizontal measurements move from the origin to the right. The vertical measurements move from the origin to the bottom:

The distance from the control’s left border to the form’s left border is referred to as the Left property. The distance from the control’s top border to the parent’s top border is referred to as the Top property. The Left and Top values are known as the control’s location. This can be illustrated as follows:

When you click a control on the Toolbox and click the form, the Left and Top values are set where the mouse landed. One of the operations you will perform during design consists of correctly positioning your controls to give them a better location and take advantage of the form's real estate. Various options are available to do this. To assist you with setting control's location, the form is equipped with aligned dots, forming columns and rows.

When a group of controls is selected, the first selected control displays 8 handles too but its handles are white while the others are dark. In the following picture, a form contains various controls, three controls are selected and the first is the CommandButton3:

For the sake of this lesson, the control that has white handles will be referred to as the base control.

One of the techniques you can use to change the location of a control or a group of controls consists of moving it. To move one control, click and hold the mouse on it, then drag in the desired direction, and release the mouse. If you are working on a worksheet, you can also click the control, then press one of the arrow keys to move the control, either left to move the control left, up to move the control up, right to move the control in the right direction, or down to move the control down.

To move a group of controls, select them first. Then click and drag any area in the selection to the desired location. Alternatively, once you have  the controls, you can press one of the arrow keys to move the whole group.

To programmatically move a control, which is equivalent to changing the values of the Left or the Top properties at run time, assign the desired respective values.

Control Horizontal Alignment

During form design, to better position the controls, you can use the main menu with the Format group. Microsoft Visual Basic also provides the UserForm toolbar to assist you. To display the UserForm toolbar, on the main menu of Microsoft Visual Basic, you can click View -> Toolbars -> UserForm.

If you have a certain control on the form and want to position it exactly at equal distance between the left and the right borders of the form, select the control, then, on the main menu of Visual Basic, click Format -> Center in Form -> Horizontally. To get the same option, on the UserForm toolbar, click the arrow of the Center button and click Horizontally:

Horizontal alignment affects controls whose distance from the left border of the form must be the same. To perform this type of alignment, you can use the main menu where you would click Format -> Align and selection one of the following options:

• Lefts: All selected controls will have their left border coincide with the left border of the base control
• Centers: The middle handles of the selected controls will coincide with the middle handles of the base control
• Rights: All selected controls will have their right border coincide with the right border of the base control

To get the same options using the UserForm toolbar, click the arrow of the Align button and select the desired option: Lefts, Centers, or Rights.

Control Vertical Alignment

Another option you have consists of moving controls up or down for better alignment. Once again you must first select the controls. Then, on the main menu, click Format -> Align and click one of the following options:

• Tops: All selected controls will have their top border coincide with the top border of the base control but their left border would have the same distance with the left border of the parent
• Middles: The top handles of the selected controls will align vertically with the top handle of the base control
• Bottoms: All selected controls will have their bottom border coincide with the bottom border of the base control but their left border would have the same distance with the left border of the parent

To get the same options using the UserForm toolbar, click the arrow of the Align button and select the desired option: Tops, Middles, or Bottoms:

Control Centering Towards the Middle of the Form

You can also position one or more controls in the middle of the form. To do that, select the control, then, on the main menu of Visual Basic, click Format -> Center In Form -> Vertically

Horizontal Spacing and Alignment

Suppose you have a group of horizontally aligned controls as follows:

Obviously the buttons on this form are not enjoying the most professional look. The Format group of the main menu allow you to specify a better horizontal alignment of controls with regards to each other. To use it, first select the controls. Then, on the main menu of Visual Basic, click Format -> Horizontal Spacing, and click one of the following options:

• Make Equal: Microsoft Visual Basic will calculate the horizontal distances that separate each combination of two controls and find their average. This average is applied to the horizontal distance of each combination of two controls
• Increase: Microsoft Visual Basic will move each control horizontally, except the base control (the control that has white handles) by one unit away from the base control. This will be done every time you click the Increase Horizontal Spacing button or the Format -> Horizontal Spacing -> Increase menu item
• Decrease: Microsoft Visual Basic will move each control horizontally, except the base control (the control that has white handles) by one unit towards the base control. This will be done every time you click the Decrease Horizontal Spacing button or the Format -> Horizontal Spacing -> Decrease menu item
• Remove: Microsoft Visual Basic will move all controls (horizontally), except for the left control, to the left so that the left border of a control touches the right border of the next control

Vertical Spacing and Alignment

Suppose you have a group of horizontally aligned controls as follows:

The text boxes on this form are not professionally positioned with regards to each other. Once again, the Format group of the main menu allow you to specify a better vertical alignment of controls relative to each other. To use them on the main menu, click Format -> Vertical Spacing and click one of the following options:

• Make  Equal: Microsoft Visual Basic will calculate the total vertical distances that separate each combination of two controls and find their average. This average is applied to the vertical distance of each combination of two controls
• Increase: Microsoft Visual Basic will move each control vertically, except the base control (the control that has darker handles) by one unit away from the base control. This will be done every time you click the Increase Horizontal Spacing button or the Format -> Horizontal Spacing -> Increase menu item
• Decrease: Microsoft Visual Basic will move each control, except the base control (the control that has darker handles) by one unit towards the base control. This will be done every time you click the Decrease Horizontal Spacing button or the Format -> Horizontal Spacing -> Decrease menu item
• Remove: Microsoft Visual Basic will move all controls vertically, except for the top control, to the top so that the top border of a control touches the bottom border of the next control towards the top

Controls Dimensions

Introduction

The distance from the left border to the right border of a control is referred to as its Width property. In the same way, the distance from the top to the bottom borders of a control is its Height value. This can be illustrated as follows:

If you click a control’s button on the Toolbox and click a UserForm, the control assumes some default dimensions in the body of the parent.

All graphical controls, including the form, can be resized using guiding mouse cursors. To resize a control, first select it. Except for the form, whenever a control is selected, there are eight handles around it. To resize the control, position your mouse on one of the handles. The mouse pointer will change, indicating in what direction you can move to resize the control.

Cursor	Role
	Moves the seized border in the North-West <-> South-East direction
	Shrinks or heightens the control
	Moves the seized border in the North-East <-> South-West direction
	Narrows or enlarges the control

To resize the control by one grid unit, click one of the handles and drag in the desired location. Once satisfied, release the mouse.

Imagine you have added three controls to your form and, after spending some time designing them, they appear as follows:

The dimensions of the controls are not set professionally. As seen above, you can resize by dragging their borders but this may take a while if you want them to have the same width, the same height, or both the same height and width.

At design time, to change the dimensions of a control, first click it. Then, in the Properties window, change the values of its Width and Height properties.

To change the dimensions of a group of controls, first select them. Then, in the Properties window, change the values of the Width and Height properties. The new value would be applied to all selected controls. Alternatively, Microsoft Visual Basic provides tools to automatically do this for you.

To synchronize the widths of a group of controls, first select them. Then, on the UserForm toolbar or on the Format group of the main menu, select:

Result: All controls, except for the base control (the control that has the white handles), will be resized horizontally so they have the same width as the base control:

To set the same height to a group of controls, first select them. Then, on the UserForm toolbar or on the Format group of the main menu, select:

Result: All controls, except for the base control (the control that has the dark handles), will be resized vertically so they have the same height as the base control:

To set the same width and the same height to a group of controls, first select them. Then, on the UserForm toolbar or on the Format group of the main menu, select:

Result: MSVB will calculate the sum of the heights of all controls and find their average height. It will also calculate the sum of the widths of all controls and find their average width. These averages will be applied to the height and the width respectively of each control:

Aesthetic Aspects of a Control

Background Color

Controls used on Microsoft Windows are painted using a color known as Control. If you don't like the default color that paints the background of a control, you can access the BackColor field of the Properties window. You can click the arrow of its combo box and then select one of the preset colors from 2 windows represented with tabs:

Border Style

Some controls display a border when they are drawn and some others don't. Some of these controls allow you to specify a type of border you want to show surrounding the control. This characteristic is controlled by the BorderStyle property.

Operating Characteristics of Controls

Tab Ordering

A user can navigate through controls using the Tab key. When that key is pressed, the focus moves from one control to the next. By their designs, not all controls can receive focus and not all controls can participate in tab navigation. Even controls that can receive focus must be primarily included in the tab sequence.

The participation to tab sequence is controlled by the Boolean TabStop property in the Properties window. Every visual control that can receive focus is already configured to have this property set to True. If you want to remove a control from this sequence, set its TabStop value to False.

If a control has the TabStop property set to True, to arrange the navigation order of controls, you can click a control on the form. Then, in the Properties window, set or change the value of its TabIndex field. The value must be a positive natural number.

A control is referred to as visible if it can be visually located on the screen. A user can use a control only if he or she can see it. You have the role of deciding whether a control must be seen or not and when. The visibility of an object is controlled by the its Visible property.

At design time, when you add a control to a form, it is visible by default. This is because its Visible property is set to True in the Properties window. If you don't want a control to primarily appear when the form comes up, you can set its Visible property to False.

For the user to use a control, it must allow operations on it. For example, if a control is supposed to receive text, the user can enter characters in it only if this is made possible. To make a control available to the user, the object must be enabled. The availability of an object is controlled by the Enabled property.

By default, after adding a control to a form, it is enabled and its Enabled property in the Properties window is set to True. An enabled control displays its text or other characteristics in their normal settings. If you want to disable a control, set its Enabled property to False.