Introduction to Bevels

Description

To make your development more striking, the VCL provides objects that can be used uniquely for their aesthetic appearance. Such is the case for the bevel control. Some other controls can be used as intermediate or carriers of aesthetic objects that other controls may need but cannot carry on their own.

A bevel is a VCL control used to enhance the display of a form by adding a box, a frame or a line. A bevel shares a lot of the other controls’ properties but a bevel is not a container.

To support the bevel, the VCL provides a class named TBevel. The TBevel class is based on the TGraphicControl class:

To add a bevel to your form, click the TBevel button in the Additional section of the Tool Palette and click a container.

If you want to dynamically create a bevel, declare a pointer to TBevel. Using the new operator, assign it the bevel constructor specifying the control component as the form on which the bevel will be positioned. You must also specify the parent of the bevel. You can dynamically create a bevel inside of a function or another control’s event. After creating the control, you can programmatically set its properties. If the control was created locally, set these properties in the function or event:

//---------------------------------------------------------------------------
void __fastcall TForm1::Button1Click(TObject *Sender)
{
	TBevel* Bvl = new TBevel(Form1);
	Bvl->Parent = this;
	Bvl->Height = 115;
	Bvl->Left = 8;
	Bvl->Top = 8;
	Bvl->Width = 210;
}
//---------------------------------------------------------------------------

If you had created the control in the header file, you can use a function or event to initialize the control.

In its uniqueness, although the bevel does not have much functionality, some of its properties make it a valuable accessory for your form’s look. By default, a bevel does not have a particular alignment on the form; it completely depends on the developer. Unlike the form and panel controls, the bevel control is not a container. Therefore, although you can place controls inside a bevel, the bevel does not control their position or alignment. In other words, the bevel does not "own" them.

The two most important properties of a bevel are its shape and its style. The Shape property is a TBevelShape enumerator that controls how the bevel appears. You can set the bevel to appear as a line, to show borders or to be empty. To set the shape of the bevel, click it on the form to select it. On the Object Inspector, click Shape to reveal its combo box and select from the list. The values and their effects are as follows:

To set the bevel’s shape programmatically, use code such as this:

//---------------------------------------------------------------------------
void __fastcall TForm1::Button1Click(TObject *Sender)
{
	Bevel1->Shape = bsFrame;
}
//---------------------------------------------------------------------------

The Style property is a TBevelStyle enumerator that specifies whether the bevel will be lowered or raised with regard to the surface of its host container. Its values are bsLowered (the default) and bsRaised. The above bevels were created with the BevelStyle set to bsLowered. Here is the effect when the BevelStyle is set to bsRaised:

You can change this property programmatically. Here is an example:

//---------------------------------------------------------------------------
void __fastcall TForm1::Button1Click(TObject *Sender)
{
	TBevel* Bvl = new TBevel(Form1);
	Bvl->Parent = this;
	Bvl->Height = 115;
	Bvl->Left = 8;
	Bvl->Shape = bsFrame;
	Bvl->Style = bsRaised;
	Bvl->Top = 8;
	Bvl->Width = 210;
}
//---------------------------------------------------------------------------

1. To create a new application, on the main menu, click File -> New -> VCL Forms Application - C++Builder
2. Set the dimensions of the form as follows:
   Height: 456
   Width: 504
3. Click the + sign on the HorzScrollBar and VertScrollBar fields and set each of their Visible properties to false
4. On the Tool Palette, click the Additional tab and double-click the Bevel control
5. Set the bevel properties as follows:
   Align: alNone
   Height: 18
   Left: 0
   Shape: bsBottomLine
   Style: bsLowered
   Top: 184
   Width: 490
6. On the Tool Palette, click the Standard section. Double-click the Panel control
7. Change the panel’s properties as follows:
   Caption: &Details >>
   Height: 25
   Left: 408
   Top: 160
   Width: 75
   Also add a few visual controls on the top and the bottom sections of the form
8. Double-click an unoccupied area on the form to initiate the form’s OnCreate event. Implement it as follows:
   

   //---------------------------------------------------------------------------
   void __fastcall TForm1::FormCreate(TObject *Sender)
   {
   	Height = 228;
   	Bevel1->Visible = False;
   }
   //---------------------------------------------------------------------------

9. Press F12 to display the form
10. Double-click the Details panel to initiate its OnClick event
11. Implement it as follows:
    

    //---------------------------------------------------------------------------
    void __fastcall TForm1::Panel1Click(TObject *Sender)
    {
    	if( Height == 228 )
    	{
    		Height = 456;
    		Bevel1->Visible = True;
    		Panel1->Caption = "&No Details";
    	}
    	else if( Height == 456 )
    	{
    		Height = 228;
    		Bevel1->Visible = False;
    		Panel1->Caption = "&Details >>";
    	}
    }
    //---------------------------------------------------------------------------

12. To test the application, on the Debug toolbar, click the Run button