Aesthetic and Graphics Controls

Bevels

Overview

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, the Image, and the Shape controls, etc. 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, this means that you can modify them at design and/or run times.

To add a bevel object to your form, click the Bevel button on the Additional tab of the Tool Palette and click on a container.

Characteristics of Bevel

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:

1. Create a new application with the starting form
2. Set the dimensions of the form as follows:
   Height: 456
   Width: 504
   BorderStyle: bsDialog
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 >>
   Cursor: crVSplit
   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. Double-click the Details panel to initiate its OnClick event. Implement it as follows:
    

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

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

The Bevel control has no other methods than the constructor and the destructor. All of its methods are derived from its parent and ancestor classes. The bevel control is based on the TBevel class.

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->Shape = bsFrame;
	Bvl->Style = bsRaised;
	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.

A picture is an object you display in your application for any desired purpose. In order to display a picture, you must have it somewhere so your application can either locate or import it. To support the display of a picture, the VCL provides the TImage class.

TImage is a class that carries as much information as necessary to display a picture on a form. The picture can be in any of the popular formats (jpeg, bmp, ico, etc). The easiest way to add a picture to a form is to add an Image control to a form after clicking the Image button from the Additional property page of the Tool Palette. When you click the container that will hold the Image control, a primary dashed rectangle is drawn as the placeholder of the picture:

The borders of the control display as dash lines to indicate that they will not display when the picture comes up. Like any other visual control, you can resize the Image object using the handles on its borders and/or corners.

The most important piece of information the control needs is probably a picture. This can be specified using the Picture property of the Object Inspector.

After specifying the picture for the Image object, you may find out that your image is smaller or bigger than the rectangle drawn on the form when you added the Image control. You have many options to solve this. If you want to use the whole actual size of the picture, you can manually resize the border of the Image control to accommodate the picture. Since the border of the Image control will not appear when the picture displays on the form at run time, you can enlarge the size of the Image control to be greater than the picture itself:

If you want to keep the size of the Image, you can instead resize the picture itself to fit in the Image control’s rectangle. This is taken care of by the Stretch Boolean property. The default value of the Stretch property is false, which means that you decide how to deal with the difference between the size of the Image control and the actual size of the picture. Using the Object Inspector, if you set the Stretch property to true, the picture would be automatically resized to use the whole size of the Image control. With Stretch set to true, even if you manually resize the picture or the Image by dragging the border, the picture and the Image would always have the same size.

If you set the Stretch property’s value to true, and if you resize the image by dragging one of the borders, the picture may become distorted. For example, the picture of a slim person may make him or her appear larger (or fat):

If you want to keep the ratio between the length and the height of the picture balanced during resizing, you can use the Proportional Boolean property. Its default value is false, in which case the picture can be resized "as is". To respect the ratio of the dimensions, set the Proportional property to true:

After adding a picture to an Image control, if the picture is smaller than the size of the Image control, the picture would be positioned in the top-left corner of the control. The positioning of the picture inside an Image is controlled by the Center property. Its default value is false, which means the top-left corner of the picture coincides with the top-left corner of the Image rectangular border. If the picture you are using is smaller than the size of the Image control but want to keep the size of the Image control, which could be valid during design, you can position the picture in the horizontal center and vertical middle of the borders of the Image. This is done by setting the Center Boolean property to true.

As its name suggests, a paint box is a control whose main purpose is to provide a platform for painting. The user never sees a paint box as it does not have borders and it is accessible only to the programmer. Like many other controls, the paint box provides a Canvas object that receives and manages the painting assignments performed on this control. In fact, the paint box has its own OnPaint() event for convenience.

To provide a paint box to your application, on the System tab of the Tool Palette, click the PaintBox button and click on the container that will own it.

Because a paint box’ main purpose is to provide an area for painting, the only inherent characteristic it has is a rectangular area which makes available a Canvas property. This Canvas member gives access to all necessary tools used to paint, including pens, brushes, colors, fonts, access to bitmaps, etc.

If you plan to use the whole area of the owner of the paint box, make sure you use the Align property to specify this.