Home

Windows Controls: The Category Panel Group
   

Introduction to the Category Panel Group
 

Description

A category panel group is a controls container made of one or more parts so that a section can be expanded or collapsed to reveal or to hide its contents. To show a section, the category panel group is made of one or more groups that each is equipped with a buttoned header and a body. If the user clicks the header, if the section was showing, it would retract (collapse); if its body was hidden (collapsed), it would show (expand) its content. This means that the user can choose what section(s) to show and which one(s) to hide. The user can expand all sections or collapse all of them.

Practical LearningPractical Learning: Introducing the Category Panel Group
  1. To create a new application, on the main menu, click File -> New -> VCL Forms Application - C++Builder
  2. In the Object Inspector, click Caption and type Altair Realtor - Properties Review
  3. Click Name, type frmPropertiesPictures and press Enter
  4. In the Standard section of the Tool Palette, click TMainMenu and click the form
  5. On the form, right-click TMainMenu1 and click Menu Designer...
  6. As the first item has focus, in the Object Inspector, change the following properties:
    Caption: &File
    Name:   mnuFile
  7. In the Menu Designer, click File and click the box under it
  8. In the Object Inspector, change the following properties:
    Caption: E&xit
    Name: mnuFileExit
  9. In the Standard section of the Tool Palette, click TPanel and click the form
  10. In the Object Inspector, click Align and select alBottom
  11. Click BevelOuter and select bvLowered
  12. Click Caption and press Delete

Creating a Category Panel Group

To support the category panel group, the VCL provides a class named TCategoryPanelGroup. This class implements the TCustomCategoryPanelGroup class which is derived from the TScrollingWinControl class:

TCategoryPanelGroup Inheritance

To visually create a category panel group, in the Additional section of the Tool Palette, click the TCategoryPanelGroup button Category Panel Group and click the form or container. To dynamically get a category panel group, create a pointer to TCategoryPanelGroup. Use the new operator to allocate memory and specify its parents. Here is an example:

//---------------------------------------------------------------------------
void __fastcall TForm1::btnCategoryPanelGroupClick(TObject *Sender)
{
	TCategoryPanelGroup *cpgContainer = new TCategoryPanelGroup(Form1);
	cpgContainer->Parent = Form1;
}
//---------------------------------------------------------------------------

Practical LearningPractical Learning: Creating a Category Panel Group
  1. In the Tool Palette, click Additional
  2. Click the TCategoryPanelGroup button Category Panel Group
  3. Click the middle of the form
  4. In the Object Inspector, click Name and type cpgRealEstate
  5. Still in the Additional section of the Tool Palette, click TSplitter
  6. Click the empty area of the form
  7. Still in the Additional section of the Tool Palette, click TImage
  8. Click the unoccupied area of the form
  9. In the Object Inspector, change the following properties:
    Align: alClient
    Name: imgProperty

Altair Realtors
 
 
 

Characteristics of a Category Panel Group
 

Introduction

The category panel group is primarily a container, like a panel, but it adds some valuable aesthetic and functional features. Still, because it is a Windows control (it descends from TWinControl), it has some normal characteristics such as a name, background color, and a size. After visually adding the control to a form, you can change these properties in the Object Inspector.

The Alignment

By default, after adding a category panel group to a form, it is glued to the left. Although this characteristics is inherited from the TWinControl class, it has a valuable importance from this control because you should make sure it is visible at all times. In fact, depending the requirements of your application, you can use as many category panel groups as you want. You can position one to the left, another to the right, etc. To visually specify the alignment of a category panel group, use the Align field in the Object Inspector.

The Panels

Probably the most important characteristic of a category panel group is the section(s) it contains. Each section is referred to as a panel. To visually create a panel, right-click the panel and click New Panel:

Category Panel Group

In the same way, you can add as many panels as you want. Each panel is based on the TCategoryPanel class, which is derived from TCustomPanel. In other words, the TCategoryPanel and the TPanel classes have the same ancestor.

After adding a panel, it gets equipped with a buttoned header that is made of three sections: a left, a middle, and a right sides.

Practical LearningPractical Learning: Creating the Panels
  1. On the form, right-click the category panel group and click New Panel
  2. Right-click the category panel group again and click New Panel
     
    Altair Realtors

The Chevrons of a Panel

By default, the left section shows a semi-button named a chevron. The chevron displays two Vs, one on top of the other, as its caption. By default, the chevron is positioned in the left section of the header. You can position it to the center or the right section. To support this, the TCustomCategoryPanelGroup class is equipped with the ChevronAligngnment property that is of type TAlignment:

__property Classes::TAlignment ChevronAlignment =
{
    read=FChevronAlignment,
    write=SetChevronAlignment
};

To visually specify the alignment of a chevron, access the Object Inspector for the category panel group and accept or change the value of the ChevronAlignment field.

By default, the chevron appears in a gray color. If you want to make it appear in a different color, access the ChevronColor field in the Object Inspector and select a color of your choice. The ChevronHotColor is the color by which the chevron would appear when the user positions the mouse on top of it.

Practical LearningPractical Learning: Confoguring a Category Panel Group
  1. In the Structure window, click cpgRealEstate
  2. In the Object Inspector, click ChevronColor, then click the arrow of its combo box and select clMaroon
  3. Click ChevronHotColor, then click the arrow of its combo box and select clBlue
  4. On the form, click the top panel of the category panel group
  5. In the Object Inspector, click Caption and type Condominiums
  6. On the form, click the other panel of the category panel group
  7. In the Object Inspector, click Caption and type Houses
  8. Press F9 to preview the form
  9. Close the form and return to your programming environment
  10. On the main menu of Embarcadero C++Builder, click File -> Close All
  11. When asked whether you want to save, click No
 
 
   
 
Home Copyright © 2010-2016, FunctionX