Visual Basic Tutorials - Lesson 8: Controls Containers

	Controls Containers

Overview of Parent Controls

Introduction

An application's object is programmatically referred to as a parent when it can host, hold, or carry other objects. For this reason, such a window is also referred to as a container. Although the first object that comes in mind is the form, this is not the only window that can act as parent. This means that, in your application programming adventure, you will get acquainted with various types of containers and they are meant to play different roles. In some cases, two or more containers can be used to implement the same functionality. In some cases, you choice will be narrowed based on your goal.

The most common and the most widely used container is the form. In Visual Basic, a form can be configured to display like a regular dialog box, to become a Single Document Interface (SDI) or to participate in a Multiple Document Interface (MDI) application.

As mentioned already, there are two categories of controls: parents and children:

Parent: The child controls are positioned on a parent. To keep track of its children, a parent control has the Controls property. To create a control inside of a parent, a child control is added to the Controls property of the parent using the Controls.Add() method. When a parent control is created, it "gives life" to other windows that can depend on it. When a parent is destroyed, it also destroys its children. A parent control "carries", "holds", or hosts the controls positioned on it. When a parent is created, made active, or made visible, it gives existence and visibility to its controls. When a parent gets hidden, it also hides its controls. If a parent moves, it moves with its children. The controls keep their positions and dimensions inside the parent. The .NET Framework provides various parent controls.
Child: A window is referred to as child when its existence, its visibility, and its availability depend on another window referred to as its parent. Except for the forms, all of the Windows controls you will use in your applications are child controls and they must be parented by another control.

A child window can be a parent of another control. For example, the Standard toolbar of Visual Studio is the parent of the buttons on it. If you close or hide the toolbar, its children disappear. At the same time, the toolbar is a child of the application's frame. If you close the application, the toolbar disappears, along with its own children. In this example, the toolbar is a child of the frame but is a parent to its buttons.

There are two main techniques of making a control available to an application: The control can be visually added from the Toolbox or it can be programmatically created.

Using a Parent Control

The type of container you want to use dictates how you acquire that container and add it to your application. Parent controls are somewhat divided in two broad categories: primary parents and intermediate parents. Once you have spent time with them, you will decide which one and when to use a particular control.

The primary type of control parenting you will use is a form or a web page. These are used as the platform for other controls, including other containers. Therefore, when you start your application, you first decide on the type of application. If you want to create a graphical (GUI) Windows application, it gets automatically equipped with a form on which you can add child controls. When the application executes, it can present its contents to the user:

If you decide to create a web-based application (ASP .NET), you would be presented with a blank form. You can then design it and display its result in a browser:

The second category of parents you will encounter qualify as intermediate. Theses containers cannot be the base of an application as do the form and web page. These parents must be positioned on another parent first, then they can host they own children. An example of such a parent is the property page also called tab control. This control must be hosted by a form or dialog box. Here is an example of a property sheet (dialog box) that hosts three property pages (tab controls) and each property page hosts its own child controls:

Another type of intermediary container is the toolbar that is usually used to host various buttons.

The Panel Control

Introduction

A panel is a visible rectangular object that can provide two valuable services for application design. A panel allows you to design good-looking forms by adjusting colors and other properties. A panel is also a regularly used control container because it holds and carries controls placed on it. When a panel moves, it does so with the controls placed on it. When a panel is visible, the controls placed on it can be visible too, unless they have their own visibility removed. When a panel is hidden, its child controls are hidden too, regardless of their own visibility status. This property also applies to the availability.

Panels are not transparent. Therefore, their color can be changed to control their background display. A panel is a complete control with properties, methods, and events.

Characteristics of a Panel

Unlike the form, during design, a panel must primarily be positioned on another container which would be a form or another panel. To add a panel to a container, you can click the Panel button from the Toolbox and click in the desired location on the container.

By default, a panel object is drawn without borders. If you want to add borders to it, use the BorderStyle property. It provides three values: None, FixedSingle, and Fixed3D and their effects are as follows:

None	FixedSingle	Fixed3D

A panel can be used as a button, in which case the user would click it to initiate an action.

A property that is highly used on panels (and forms) is the Color. If you change the BackColor property, the new color would cover the face of the panel.

Property Sheets and Property Pages

Overview

As your application becomes crowded with various controls, you may find yourself running out of space. To solve such a problem, you can create many controls on a form or container and display some of them only in response to some action from the user. The alternative is to group controls in various containers and specify when the controls hosted by a particular container must be displayed. This is the idea behind the concept of property pages.

A property page is a control container that appears as a form or a frame. A property page can appear by itself. Here is an example

A property sheet with only one property page

In most other cases, a property page appears in a group with other pages. It functions like a group of pieces of paper placed on top of each other. Each piece is represented by a tab that allows the user to identify them:

Example of property pages on a property sheet

To use a property page, the user clicks the header, also called a tab, of the desired page. This brings that page up and sends the others in the background:

If the user needs access to another page, he or she can click the desired tab, which would bring that page in front and send the previously selected to the back.

The pages are grouped and hosted by an object called a property sheet. Like a form, the pages of a property sheet are simply used to carry or hold other controls. The major idea of using a property sheet is its ability to have many controls available in a relatively smaller container.

Property Sheet Creation

Property pages of a property sheet are also referred to as tab controls. In a .Net application, a property sheet is created using the TabControl control or class which serves as the property sheet. To implement a property sheet in your application, on the Toolbox, you can click the TabControl button and click in the form that would be used as the property sheet's platform.

To create or add the actual property pages of the property sheet,

You can right-click the TabControl control and click Add Tab:
While the TabControl control is selected on the form, in the lower section of the Properties window, you can click the Add Tab link:
While the TabControl control is selected on the form, in the Properties window, click the TabPages field and click its ellipsis button to display the TabPages Collection Editor dialog box that allows you create and configure each page:

If you have added a page by mistake or you don't want a particular page anymore, you can remove it. To remove a property page, first click its tab to select it. Then,

You can right-click the TabControl control and click Remove Tab
While the undesired tab page is selected on the tab control, press Delete
While the undesired tab page is selected on the tab control, in the lower section of the Properties window, you can click the Remove Tab link
You can right-click the body of the undesired page and click Delete

Many of the effects you will need on pages have to be set on the TabControl and not on individual pages. This means that, to manage the characteristics of pages, you will change the properties of the parent TabControl control. At any time, whether working on the TabControl control or one of its tab pages, you should first know what object you are working on by selecting it.

To select the TabControl control itself, you have two main options:

Any time you want to select the TabControl, click an unoccupied area on the right side of the most right tab
While one tab page is selected, click another tab

If you want the property sheet to occupy the whole form or to occupy a section of it, you can specify this using the Dock property.

If you want the property pages to have bitmaps on their tabs, you should first add a series of images using an ImageList control and then assign that control to the Images property of the TabControl object.

If you have many property pages and the width of the PageControl cannot show all tabs at the same time, the control would add two navigation arrows to its top right corner to let the user know that there are more property pages:

By default, the navigation buttons would come up because the control uses a property that controls their availability. If you do not want the navigation arrows, you can set the MultiLine property of the TabControl control to true. This would create cascading tabs and the user can simply select the desired property page from its tab:

As you are adding pages to a TabControl control, the tabs of the pages are positioned on the top border of the TabControl area. You can reposition them to the left, the right, or the bottom borders of the control. The placement of the tab is set using the Alignment property of the TabControl. The possible values of this property are Top, Left, Right, and Bottom:

Alignment: Left	Alignment: Top

Alignment: Bottom	Alignment: Right

If you want to create a discrete property sheet and do not want to display the traditional tabs, you can replace the tabs with buttons. This is controlled by the Appearance property that presents three options: Normal (the default), Buttons, and FlatButtons. The Normal and the Buttons values can be used on all four views. The FlatButtons option is available only if the Alignment property is set to Top.

Appearance: Buttons	Appearance: FlatButtons

After adding the TabControl control to your form and after adding one or more tab pages, the property pages are created where the TabPage control is positioned and its dimensions are used by the eventual property pages. This means that, if you want a different position, a smaller or larger property sheet, you must modify the dimensions of the TabControl control and not those of the tab pages, even though each tab page has a Location property and dimensions (the Size property).

Like all other controls, the names of property pages are cumulative. As you add them, the first would be named tabPage1, the second would be tabPage2, etc. If you plan to programmatically refer to the tab pages, you should give them more explicit names. As done with any other control, to set the name of a property page, after selecting it, in the Properties window, change the value of the Name property.

Probably the first obvious characteristic of a property page is the word or string that identifies it to the user. That is, the string that displays on the tab of a property page. This is known as its title or caption. By default, the captions are set cumulatively as the pages are added. Usually you will not use these titles because they are meaningless. To display a custom title for a property page, first select it and, on the Properties window, change the value of the Text property. You can also change the title of a property page programmatically, for example, in response to an intermediary action. To change the title of a page, assign a string to its Text property. Here is an example:

Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        TabPage3.Text = "Senior Citizens"
End Sub

If you had associated an ImageList control with the TabControl object and you want to use images on the title of a property page, specify the desired image using the ImageIndex property. You can use the images on some or all property pages.


Previous	Copyright © 2004-2010 FunctionX, Inc.	Next