Parent Controls

The above illustration shows a form positioned on a monitor. The desktop acts as the parent window of the form. In the same way, if you place a control on a container, the control is located with regards to its parent, not based on the screen. As seen previously, in such a case, the origin of the coordinate system is located on the top-left corner of the parent window. The distance from the left border of the parent window to the left border of the control is the control’s Left property. The distance from the top border of the parent window to the top border of the control is the control’s Top property. Here is an example in which a control as a child is positioned inside of another control that acts as its parent:

The Client Area

An object positioned on a parent can be seen only if its dimensions are confined to the body of the parent. To manage the display of visible windows, each parent provides a section called the client area. For the desktop screen, the client area is the whole screen. For a form, the client area is the body of the form without the title bar. Most other containers provide their whole body as the client area:

The desktop window provides a rectangular area that it can use to display the computer’s applications. This area is also used to host other objects. Although an object’s borders can span beyond the borders of the desktop, only the area of an object covered by the desktop can be seen. Here is an example of a window whose right side cannot be seen:

The client area is a rectangle primarily used for its location and dimensions. To get the values of the shape that compose the client area, you have various options and considerations. For example, to get the area that represents the desktop, which would let you know how much real estate is available for your application, you can call the Screen.Width and/or Screen.Height variables.

It is important to know where the origin of a control is located. During control design, we saw that, when a container is selected and you double-click a visual control on the Toolbox, the new control would be added to the container. On the other hand, if you have a container that is positioned on the form but the container, or any specific container, is not selected, if you double-click a control on the Toolbox, the control would be added to the form even though the new control may be positioned on a container. In this case, the form would become the parent of the new control. Therefore, in order to do anything related to the location and/or dimensions of a control, you must know the coordinate of the origin used as the basis for its location and dimensions.

Because only a parent can host some controls, it holds an origin and makes it available to its children.

Forms

Introduction

A form is a rectangular object that can be used as a program of its own, it is also usually used as part of a bigger application. The form is a window control that mostly serves as a place holder for other controls.

There are two main ways you create a form: as its own program or as part of an application. Whenever you launch Microsoft Visual Basic, the opening dialog offers to create a form. To add a form into an existing program, on the main menu, you can click Project -> Add Form.

When creating a form, you can control its properties at design time using the Properties window. Many of these properties can be set at run time with code. A form can control its own properties when an event related to a form is fired. A form's properties can also be set or changed using other controls on the form itself or controls from another form or from the computer (for example, you can control a property based on the system time of the computer).

Practical Learning: Starting a Form

1. Start Microsoft Visual Basic. When the opening dialog box comes up, make sure Standard EXE is selected and press Enter
2. To change the name of the form, in the Properties window, click (Name) and type frmMain
3. To test the application, press F5
4. After viewing it, close it using its system Close button

Forms Characteristics: The System Icon

As the main or primary object of an application, a form is equipped with a title bar. This can be used to minimize, maximize, restore, move, or close a form.

The most left section of a form's title bar displays a small picture called an icon. A Visual Basic form displays a default icon. If you want to use a different icon, you must have one in file. You can either use one of the icons that ship with Microsoft Visual Studio or design your own. To display a different icon on the title bar of a form, first select the form. Then, in the Properties window, click the ellipsis button of the Icon property. This would open the Load Icon dialog box to let you locate and select an icon. After selecting an icon, you can click Open.

Forms Characteristics: The Caption

On the right side of a form's system icon, the title bar displays what is referred to as the name of the window: this is the caption. After adding a form to a project, it displays a default caption that mimics its name. For example, the first form is called Form1 and its caption is Form1. Most of the time, it will be necessary to change the caption so it displays a friendlier name.

To change the caption of a form, after selecting it in the design, in the Properties window, click Caption and either change the text or edit the existing one. 

Forms Characteristics: The System Buttons

On the right side of its title bar, a form displays three system buttons. The presence of this group of buttons is controlled by the ControlBox Boolean property whose default value is True. Therefore, if you don't want any these buttons at all, you can set the ControlBox property to False. If you keep or set it to True, you can then configure different combinations that control the presence or availability of these buttons.

When the ControlBox property is set to True, you can control the system buttons using the MinButton and the MaxButton properties.

The Startup Position of a Form

When you create an application that has a form, the form is positioned in a design window that hosts it. When the application is executed and the form comes up, you should be able to predict where it would be positioned on the screen, since its position on the design window has nothing to do with its actual position at run time. There are various ways you can specify the default position of a form when its application launches.

To manually and visually specify where a form would be positioned when it comes up, while it is selected in design, in the lower right section of the screen, click and drag the same rectangle in the Form Layout window:

This technique allows you to position the form with a good approximation. Alternatively, after selecting the form in design, in the Properties window, change the value of the StartUpPosition property. The options are:

As another solution, you can double-click the form to access its Load event, then assign a value to the Left and the Top properties of the form. This is the least precise and the most complicated of all three solutions because you should know the system of measures you are using.

Practical Learning: Configuring a Form

1. Click the from to make sure it is selected
2. Click the BorderStyle field and change it to 3 - Fixed Dialog
3. Again on the Properties window, click Caption and type Interactions With Controls
4. Click Height and type 2800
5. Change the StartUpPosition field to 2 - CenterScreen
6. Click Width and type 3200
7. To save this program, on the main menu, click File -> Save Project.
8. From the Save File As dialog box, click the arrow to the Save In combo box and select My Documents.
9. Click the Create New folder button .
10. Type VBExo Forms Interaction
11. Double-click VBExo Forms Interaction to display it in the Save In combo box.
12. Accept the name of the form as frmControls. Click Save.
13. When prompted to provide a name for the project, type prjFormsInteractions and press Enter.
    If prompted to add your project to Source Safe, click No.
14. To test the form, on the Standard toolbar, click the Start button
15. Notice that at runtime, a form's appearance changes. Notice also that the form is centered on the screen when it starts.
16. After viewing the form, to stop it, on the Standard toolbar, click the End button
17. A form's properties can also be set with code.
    Double-click the center of the form to access one of the form's events.
18. Notice that the event is the Load event. This is the default event of a form.
19. Change the listing of the Load event as follows:

    Private Sub Form_Load()
        Me.Height = 4500
        Me.Width = 6465
        Me.Caption = "Form Interaction"
    End Sub

20. To test the form, press F5
21. Notice that the form opens with different dimensions than those set in the Properties window. The form used the dimensions and the caption set in the Load event.
22. After viewing the form, to close it, click its Close button
23. Notice that the form is back to the dimensions set in the Properties event.
24. To use another event, on the Project window, click the View Code button
25. In the Code window, make sure that Form is displaying in the Object combo box.
    Click the arrow of the Procedure combo box and select DblClick:
     
     
26. Write the code of the DblClick event as follows:

    Private Sub Form_DblClick()
        Me.Caption = "You double-clicked Me!"
    End Sub

27. To test the form, on the main menu, click Run -> Start.
28. After viewing the form, to close it, on the main menu, click Run -> End.
29. To add another form to the project, on the Standard toolbar, click the Add Form button
     
    
30. From the Add Form dialog box, make sure the Form icon is selected and make sure the check box is not checked.
    Click Open.
31. As the new form is displaying, in the Properties window, click (Name) and type frmEmployees
32. Double-click BorderStyle a few times (it should take only one double-click) until it displays 3 - Fixed Dialog
33. Click Caption and type Employees Records
34. We will display this form when the user double-click in the center (or an empty area) of the first form.
    In the Project window, double-click frmControls
     
     
35. In the Code window, make sure that Form is displaying in the Object combo box.
    Change the code of the DblClick event as follows:

    Private Sub Form_DblClick()
        Me.Caption = "You double-clicked Me!"
        frmEmployees.Show
    End Sub

36. To save the project, on the main menu, click File -> Save Project.
37. To test the project, on the Standard toolbar, click the Start button
38. To display the other form, double-click in the displayed form.
39. Notice that the other form displays.
40. To close the form, click the End button
41. On the main menu, click Window -> Project1 - frmControls (Form).
42. In the Properties window, click Height and type 4000
43. Click Width and type 5000

Frames

A frame is used as a place holder for other controls; therefore, it is called a container.

You can insert any kind of control in a frame, including labels, text box, command buttons, and even other controls. The controls inside of a frame are treated as a group; as we will see, some of their settings can be changed together at once.

Practical Learning: Creating A Frame

1. To create a new project, on the main menu, click File -> New Project.
   If you are asked to save the current project, click No.
2. On the New Project dialog box, click Standard EXE and click OK.
3. Change the form's size to 4875 x 4725.
4. Change the the Border Style to 3 - Fixed Dialog
5. On the Toolbox, double-click Label
6. On the Properties Window, make the following changes:
    

   (Name)	lblMainTitle	Height	495
   Alignment	2 - Center	Left	120
   Caption	College Park Auto Parts	Top	120
   Font	Times New Roman, Bold, 16		4335

7. On the Toolbox, double-click Frame
8. On the Properties window, make the following changes:
    

   (Name)	fraMake	Top	720
   Caption	Make	Visible	True
   Height	1575	Width	2055
   Left	120

9. To test the form, press F5
10. To close the running form, click its close button .