Property Sheets and Property Pages

Introduction

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, as one. Here is an example:

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:

To use a property page, the user clicks the header, 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 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 smaller container.

Property pages of a property sheet are also referred to as tab controls. In the VCL, a property sheet is created using the TPageControl class. The control from this class, the PageControl control, serves as the property sheet. To implement a property sheet in your application, from the Win32 tab of the Component Palette, you can click PageControl and click in the form that would be used as the property sheet platform. To create, add, or remove the actual property pages of the property sheet, you can right-click the PageControl control:

• To create or add a property page, you can click New Page; you can do this continuously until you have added all desired pages.
• If you had added a page by mistake or you do not want a particular page anymore, you can remove it. To do this, first click the page's tab. Then right-click in the middle of the PageControl control and click Delete Page.

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

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

• Any time you want to select the PageControl, click an unoccupied area on the right side of the most right tab
• While one tab 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 Align property. A PageControl by itself can be used as a control and you can place the necessary controls on it, but this is usually not the reason you would need a PageControl control.

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 PageControl 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 arrow buttons 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 PageControl 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 PageControl control, the tabs of the pages are positioned on the top border of the PageControl 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 TabPosition property of the PageControl. The possible values of this property are tpTop, tpLeft, tpRight, and tpBottom:

TabPosition: tpLeft	TabPosition: tpTop
TabPosition: tpBottom	TabPosition: tpRight

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 option works only if the TabPosition property is set to tbTop, that is, only if the tabs would have been positioned to the top border of the control. To display buttons instead of tabs, use the Style property. Its values are tsTabs, tsButtons, and tsFlatButtons. The button options produce the following effects:

Style: tsButtons	Style: tsFlatButtons

If you attempt to set the Style property to a buttons value when the tabs are not positioned on top, you would receive an error message:

After adding the PageControl control to your form and after adding one or more property pages, the property pages are created where the PageControl control is positioned and its dimensions are used by the eventual property pages. This means that, if you want a smaller or larger property sheet, you must modify the dimensions of the PageControl control and not those of the property pages, even though each property page has a location (Left and Top properties) and dimensions Height and Width properties).

We saw that, to add property pages to a PageControl object, you can right-click it and click New Page. You can also add pages programmatically, of course. To make use of a property page, for example to add controls to it, you must first select the desired property page. A page is selected when its tab is in front. If there are other property pages, their tabs would be in the back. The page whose tab is in front or selected is also referred to as the Active Page. To select a property page, you have three main options:

• Right-click the PageControl control on the form and click Next Page or Previous Page. The pages are considered items of a rotating array. If the second page out of three is displaying and you click Next Page, the third page would be selected. If you are on the third page out of three and you click Next Page, the first page would be selected.
• Clicking Previous Page would have the reverse effect of Next Page
• On the form, you can click its tab. This would bring the page to the front and send the other(s), if any, to the back
• With the PageControl itself having focus on the form, on the Object Inspector, you can select the desired page using the ActivePage property
• While the PageControl control is selected, on the Object Inspector, type the array index of the page in the TabIndex property. The pages are store in a zero-based array with the first having an index of 0 and the second an index of 1, etc. If you do not want any tab selected, set this property to a negative integer. If you type a value higher than the total number of pages - 1, the previous page selected, if any, would be selected again.
  Like all other controls, the names of property pages are cumulative. As you add them, the first would be named TabSheet1, the second would be TabSheet2, etc. If you plan to programmatically refer to the property 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, on the Object Inspector, change the value of the Name property.

If you have added pages but do not like their sequence, especially after adding the desired controls, you can move the page and change their sequence. The property pages are stored in a zero-based array. Each page has an index represented by the PageIndex property. The first page has a PageIndex value of 0, the second, if available, has a value of 1, etc. To move the property page, after selecting it, on the Object Inspector, change its PageIndex value. The value must be an unsigned integer less than the total number of pages.

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 Object Inspector, change the value of the Caption 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 Caption property. Here is an example:

//---------------------------------------------------------------------------
void __fastcall TForm1::Button1Click(TObject *Sender)
{
	pgeSecurity->Caption = "Security Issues";
}
//---------------------------------------------------------------------------

If you had associated an ImageList control with the PageControl 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. If you do not want an image on a certain property page, set its ImageIndex value to -1.

If for some reason you do not want to show a property page but do not want to delete it, you can hide it by setting its TabVisible property to false.

1. Start a new project with its default form
2. Change the Caption of the form to Algebra and Geometry
3. Set its BorderStyle property to bsDialog
4. Set the dimensions as follows (if you are using Windows XP, at the end of these instructions, resize the dialog box to adapt, instead of using the following dimensions):
   Height = 402
   Width = 460
5. From the Standard tab of the Component Palette, add a button with the following properties:
   Caption = OK
   Default = true
   Left = 280
   Name = btnOK
   Top = 344
6. Add another button with the following properties:
   Cancel = true
   Caption = Cancel
   Left = 364
   Name = btnCancel
   Top = 344
7. Double-click the Cancel button, press Tab and type Close();
8. To save the project, on the Standard toolbar, click the Save All button
9. Create a folder called AlgebraGeometry1
10. Save the unit as Main and save the project as Geometry
11. On the Component Palette, click the Win32 tab. Click PageControl and click on the form
12. While the new PageControl object is still selected, on the Object Inspector, set its properties as follows:
    Height = 328
    Left = 8
    Name = shtGeometry
    Top = 8
    Width = 432
13. Right-click in the middle of the PageControl on the form and click New Page
14. Add two more property pages
15. Click TabSheet1 then click in the body of TabSheet1 to select the first property page
16. Make sure the top combo box of the Object Inspector displays TabSheet1. Click Caption and type Quadrilateral
17. Click Name and type pgeQuadrilateral
18. On the form, click TabSheet2 then click the large area under TabSheet2. Type pgeCircular (for the Name) and change its Caption to Circular
19. Click TabSheet3 and click the wide area under TabSheet3. Change its caption to 3-Dimensional and its name to pge3Dimensional
20. Click the empty area on the right-side of the 3-Dimensional tab to select the PageControl control. On the Object Inspector, set the ActivePage to pgeQuadrilateral
21. From the Additional tab of the Component Palette, click Image and click in the body of the Quadrilateral property page
22. While the Image1 control is still selected, on the Object Inspector, double-click the right area of Picture and, using the Load button, select the Quadrilateral image from the Pictures folder of the resources that accompany our lessons
23. Set its properties as follows:
    Height=297
    Left=0
    Top=0
    Width=161
     
    
24. In the same way, add an Image control to the Circular property page and set its Picture to Circular. Set the following properties:
    Height=297
    Left=0
    Top=0
    Width=161
     
    
25. Add an Image control to the 3-Dimensional property page and set its Picture to Dimension3. Set the following properties:
    Height=297
    Left=0
    Top=0
    Width=161
     
    
26. Execute the application to see the result