Home

VCL Controls: The Bevel

 

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.

Creating a Bevel

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

TBevel Inheritance

 

 

 

To add a bevel to your form, click the TBevel button Bevel 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.

Characteristics of Bevels

 

Introduction

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 Shape

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:

Bevel Shape
Bevel Shape

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

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

The Style

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;
}
//---------------------------------------------------------------------------

Practical LearningPractical Learning: Using a Bevel Control

  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

Bevel Effect

Bevel Effect

 
 
 

Home Copyright © 2010-2011 FunctionX, Inc.