Introduction to the Panel Control

Description

A panel is a visible rectangular object that can provide two valuable services for an application. A panel allows you to design good-looking forms by adjusting colors and other properties such as the alignment and style. A panel is also a regularly used control container because it holds and carries controls placed on it.

As a container, when a panel moves, it does so with the controls placed on it.

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

Unlike the form, the frame, and the data module, during design, a panel must primarily be positioned on another container, which would be a form, a frame, or another panel. At run time, you can "detach" a panel from its parent, which is not possible at design time.

A panel is implemented by a class named TPanel. The TPanel class is based on the TCustomPanel class. Both classes are defined in the ExtCtrls.hpp header file. The TCustomPanel class is derived from the TCostumControl class:

Based on this, to programmatically get a panel, create a pointer to TPanel. When initializing it, specify its parent in its constructor. Because a panel must be destroyed when the application ends, make sure you specify its parent. This can be done as follows:

//---------------------------------------------------------------------------
void __fastcall TForm1::FormCreate(TObject *Sender)
{
	TPanel *pnlHolder = new TPanel(this);
	pnlHolder->Parent = this;
}
//---------------------------------------------------------------------------

1. In the Tool Palette, click Standard
2. Click the Panel control and click the form

As a graphical control, when creating a panel, make sure you position it as you see fit and give it the desired size. These are easily done during design. If you are programmatically creating the control, make sure you specify its Top and Left properties for its location, and its Width and Height properties for its size. Here are examples:

//---------------------------------------------------------------------------
void __fastcall TForm1::FormCreate(TObject *Sender)
{
	TPanel *pnlHolder = new TPanel(this);
	pnlHolder->Parent = this;

	pnlHolder->Top = 20;
	pnlHolder->Left = 20;
	pnlHolder->Width = 250;
	pnlHolder->Height = 100;
}
//---------------------------------------------------------------------------

This would produce:

After adding the panel to a container, you may want to "glue" it to one border or corner of its host, as you would do with the Anchors property. Unlike anchoring a control, the Align property allows you to fix a control to one border of its host.

A panel can display text. This enhances its aesthetic appearance and/or can make it behave like a button. If you visually create a panel, it automatically receives a default title. To support text on a panel, the TPanel class inherits the Caption property from its ancestor the TControl class. To visually specify the title of a panel, access the Object Inspector for the panel, click Caption and type the desired text.

If you programmatically create a panel, by default, it doesn't receive a title. If you want the title, you must explicitly add it. Whether you created the control visually or dynamically, to specify or change its title, assign the desired string to its Caption property. Here is an example:

//---------------------------------------------------------------------------
void __fastcall TForm1::FormCreate(TObject *Sender)
{
	TPanel *pnlHolder = new TPanel(this);
	pnlHolder->Parent = this;

	pnlHolder->Top = 20;
	pnlHolder->Left = 20;
	pnlHolder->Width = 250;
	pnlHolder->Height = 100;

	pnlHolder->Caption = L"Enhancements";
}
//---------------------------------------------------------------------------

Practical Learning: Deleting the Caption of a Panel

• In the Object Inspector, click Caption and press Delete

Like the text-based controls that use a caption, you can control the horizontal alignment of the title of a panel. This is done using the Alignment property, which is based on the TAlignment enumerator. It lets you align the title to the left, the center, or the right. If the control, such as a panel would not display a caption, you can leave this property "as is". To visually change the Alignment property, click it on the Object Inspector to reveal its combo box. Click the arrow and select the desired value: taLeft, taCenter, or taRight. Of course, you can change the alignment using code.

To further control the alignment of the title of a panel, you can position the caption to the top, the middle or the bottom sides of the panel. To support this, the TCustomPanel class is equipped with a property named VerticalAlignment:

__property Classes::TVerticalAlignment VerticalAlignment =
{
	read=FVerticalAlignment,
	write=SetVerticalAlignment
};

This property is based on the TVerticalAlignment enumerator that has three members. To visually specify the vertical alignment, access the Object Inspector for the panel and select the desired value from the VerticalAlignment field. The options are:

taAlignTop

taVerticalCenter

taAlignBottom

As you may imagine, by combining the options of the (horizontal) Alignment and the VerticalAlignment properties, you have nine options to position the caption: top-left, top-center, top-right, middle-left, middle-center, middle-right, bottom-left, bottom-center, and bottom-right.

A panel object is drawn with two borders: an inner and an outer borders. The characteristic of a border is referred to as a bevel effect, which controls the border appearance of a panel. The effects of this characteristic are managed through the BevelInner and the BevelOuter properties. Using their combination, you can produce special effects as follows:

The other property to take into consideration is the BevelWidth value. This is an integer that controls the border of a panel by setting the distance between the inner and outer bevels. Here is the effect of a 2 value on the above pre-selections:

The BorderStyle property controls the line used to draw the border of the panel. It can have one of two values. The bsNone value, which is its default, indicates that there will not be a line drawn on the border. When the BorderStyle property is set to a bsSingle value, a line of 1 pixel is drawn around the panel. The above panels were drawn with a bsNone value for the BorderStyle. Here is the effect produced on panels that have a BorderWidth value of 2 and the BorderStyle set to bsSingle:

A panel can be used as a button, in which case the user would click it to initiate an action. A panel can also simply display a message to the user. In any case, if you want to display a word or a group of words, you can use the Caption property to show it.

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

1. On the form, make sure the panel is still selected.
   In the Object Inspector, click Align and select alLeft in its field
2. Click BevelOuter and select bvLowered
3. Click the check box of DockSite to set it to True
4. While Panel1 is still selected, in the Standard section of the Tool Palette, double-click the Panel control
5. Set the Align property to alClient
6. Set the DragKind to dkDock
7. Set the DragMode to dmAutomatic
8. Set the BevelOuter to bvNone
9. Set the Caption to Window Floater
10. While the Panel2 control is still selected, from the Standard section of the Tool Palette, double-click the Memo control
11.  Set its Align property to alClient
12. To test it, press F9
13. Double-click an empty area on the form to access the form's OnCreate event. Implement it as follows:
    

    //---------------------------------------------------------------------------
    void __fastcall TForm1::FormCreate(TObject *Sender)
    {
        TRect Recto(Left, Top, Left + Panel1->Width, Top + ClientHeight);
        Panel2->ManualFloat(Recto);
        Panel2->ManualDock(Panel1, Panel1, alClient);
    }
    //---------------------------------------------------------------------------

14. To test the program again, press F9
15. Close the form and return to your programming environment
16. Press F12 to display the form
17. Remember that, at this time, if the user closes the docking or floating window, it disappears completely. To recover from that, you can provide a menu or a button that would easily toggle the appearance or disappearance of the docking window.
    From the Standard section of the Tool Palette, click Panel and click an unoccupied area on the form
18. On the Object Inspector, click Caption and type Toggle
19. On the form, double-click Toggle to access its OnClick event and implemented it as follows (remember that, in our example, Panel2 is the real docking window while Panel1 is just the host of the floating window):
    

    //---------------------------------------------------------------------------
    void __fastcall TForm1::Button1Click(TObject *Sender)
    {
    	Panel2->Visible = !Panel2->Visible;
    }
    //---------------------------------------------------------------------------

20. Test the program