Home

VCL Controls: Button Groups

 

Introduction to Button Groups

 

Description

A button group is a control that holds a series of rectangular buttons. The buttons are grouped as an array or collection where each has a specific position. Each button can display a caption or a bitmap. To use a button, a user can click it. You as the programmer would have to identify the button that was clicked and take appropriate action. In reality, the VCL provides tremendous flexibility for the implementation of this scenario.

 

Practical LearningPractical Learning: Introducing Button Groups

  1. Start Embarcadero RAD Studio
  2. To create a new application, on the main menu, click File -> New -> VCL Forms Application - C++Builder
  3. In the Object Inspector, change the properties of the form as follows:
    Caption: Sign Language
    Name:    frmLanguage
    Position: poScreenCenter
  4. To save the project, on the Standard toolbar, click the Save All button Save All
  5. Click the New Folder button
  6. Type SignLanguage1 as the name of the folder and press Enter twice to display its content
  7. Type Language as the name of the unit and press Enter
  8. Type SignLanguage as the name of the project and press Enter
  9. Press F9 to test the form
  10. Close the form
  11. From the resources that accompany these lessons, copy the picture files whose names are made of one letter and the extension .bmp
  12. Paste them in the Debug folder of the current project
  13. Return to your programming environment

Creating a Button Group

To support the button group, the VCL provides a class named TButtonGroup. The TButtonGroup class is derived from TCustomControl. The TCustomControl class is based on TWinControl:

TButtonGroup Inheritance

The TButtonGroup class and its buttons are defined in the ButtonGroup.hpp header file that also contains the ButtonGroup namespace.

To visually create a button group, in the Additional section of the Tool Palette, click the TButtonGroup icon TButtonGroup and click the form or other container. To programmatically get a button group, create a pointer to TButtonGroup. Use its constructor to initialize the variable assign a container to its Parent property. Here is an example:

//---------------------------------------------------------------------------
void __fastcall TForm1::btnCreateClick(TObject *Sender)
{
	TButtonGroup * bgpSelection = new TButtonGroup(this);
	bgpSelection->Parent = this;
}
//---------------------------------------------------------------------------

Practical LearningPractical Learning: Creating a Button Group

  1. Design the form as follows: 
     
    Sign Language
    Control Center Color Name Kind 
    TButtonGroup TButtonGroup     bgpSigns  
    TPanel TPanel   clWhite    
    TImage TLabel True   imgSign  
    TBitBtn TBitBtn       bkClose
     
  2. Save all
 

Characteristics of a Button Group

 

The Border Style

By default, the button group appears with a 3-D border. This aspect is controlled by the BorderStyle property that is based on the TFormBorderStyle enumeration.

__property Forms::TFormBorderStyle BorderStyle = 
{
	read=FBorderStyle,
	write=SetBorderStyle
};

If you don't want the button group to show a border, set this property to bsNone instead of its default bsSingle value.

 

Practical LearningPractical Learning: Setting the Border Style

  1. On the form, click the button group to select it
  2. In the Object Inspector, click BorderSyle and select bsNone

The Button Group as a Control

A button group is primarily a normal control. It gets its fundamental characteristics from the TWinControl and the TControl classes. This makes it possible to have a name, a location, a size and visibility. You can set these aspects during design or programmatically. Here is an example:

//---------------------------------------------------------------------------
void __fastcall TForm1::btnCreateClick(TObject *Sender)
{
	TButtonGroup * bgpSelection = new TButtonGroup(this);
	bgpSelection->Parent = this;

	bgpSelection->Left = 8;
	bgpSelection->Top  = 40;
}
//---------------------------------------------------------------------------

Introduction to the Buttons of the Group

By definition, a button group holds a series of buttons. The buttons are created as a collection. To visually create the buttons:

  • Double-click the button group on the form or container
  • Right-click the button group and click Items Editor...

Any of these actions would open the Editing ButtonGroup Items window:

Editing ButtonGroup Items

To support the collection of buttons, the TButtonGroup class is equipped with a property named Items. This property is of type TGrpButtonItems that is a member of the ButtonGroup namespace:

__property Buttongroup::TGrpButtonItems * Items =
{
    read=FButtonItems,
    write=SeTGrpButtonItems
};

The TGrpButtonItems class is based on the TCollection class (a member of the Classes.hpp header file). Each button of the TGrpButtonItems collection is of type TGrpButtonItem. The TGrpButtonItem class implements the TBaseButtonItem class. TBaseButtonItem is derived from the TBaseItem class and both classes are defined in the CategoryButtons.hpp header file.

Options of Buttons

Some characteristics are shared by all buttons of a button group. Some of the aspects are managed by the ButtonOptions property, which is defined as a set:

__property System::Set ButtonOptions = 
{
	read=FButtonOptions,
	write=SetGrpButtonOptions
};

The ButtonOptions set uses members as:

enum Buttongroup__1{
	gboAllowReorder,
	gboFullSize,
	gboGroupStyle,
	gboShowCaptions
};

Creating a Button

To visually create a button:

  • Click the New button Add New
  • Right-click the window and click Add
  • Press Ins

To programmatically create a button, you have many options. You can call the Add() method that the TGrpButtonItems class inherits from TCollection. The TGrpButtonItems::Add() method returns a TGrpButtonItem object. When calling the Add() method, you should get its return value. Here is an example:

//---------------------------------------------------------------------------
void __fastcall TForm1::btnCreateClick(TObject *Sender)
{
	TButtonGroup * bgpSelection = new TButtonGroup(this);
	bgpSelection->Parent = this;

	bgpSelection->Left = 8;
	bgpSelection->Top  = 40;

	TGrpButtonItem * gbi = bgpSelection->Items->Add();
}
//---------------------------------------------------------------------------

In the same way, you can call the Add() method as many times as necessary to create the buttons. You can use the returned value of the TGrpButtonItems::Add() method as you see fit. For example, you can specify its characteristics using the properties of the TGrpButtonItem class.

Practical LearningPractical Learning: Creating the Buttons

  1. On the form, right-click the button group and click Items Editor...
  2. On the Editing Button Group Items, the New button Add New
  3. Click it again and again to get 26 buttons (the window will display indexes from 0 - TGrpButtonItem to 25 - TGrpButtonItem)

Re-Ordering the Buttons

When you call the Add() method, the buttons are created in the order you access this method. When the application displays, the buttons will show in that order. If you want, you can allow the users to change the sequence of buttons. To do this, set the gboAllowReorder member of the ButtonOptions value to True. When this is done, the change the position of a button, the user can drag it from one position to another.

The Captions of the Buttons

One of the characteristics of a button is to show a caption. The TGrpButtonItem class provides this through its Caption property. First, if you want the buttons to show captions, set the gboShowCaptions member of the ButtonOptions value to True. Once this is done, assign the desired string to a button. Here is an example:

//---------------------------------------------------------------------------
void __fastcall TForm1::Button1Click(TObject *Sender)
{
	TButtonGroup * bgpSelection = new TButtonGroup(this);
	bgpSelection->Parent = this;

	bgpSelection->Left = 8;
	bgpSelection->Top  = 40;

	TGrpButtonItem * gbiSave = bgpSelection->Items->Add();
	gbiSave->Caption = L"Save";
}
//---------------------------------------------------------------------------

You don't have to specify a caption for each button. Still, if a button doesn't have a caption, you should use another means to let the user know what the button is used for.

Practical LearningPractical Learning: Setting the Captions on Button

  1. On the Editing Button Group Items, click 0 - TGrpButtonItem
  2. In the Object Inspector, click Caption and type A
  3. In the same way, set the captions of the other buttons from B to Z

Sign Language

The Common Size of the Buttons

All the buttons of a button group must have the same dimension. For this reason, their size is set by the parent control. You have many options. If you want all buttons to use the total width of the button group, set the gboFullSize member of the ButtonOptions value to True. If this is done, when you create a new button, it spans the whole width of the control. Otherwise, you can specify your own width for all buttons. To start, set the gboFullSize member of the ButtonOptions value to False. To let you specify the common width of all buttons, the TButtonGroup class is equipped with a property named ButtonWidth:

__property int ButtonWidth = {read=FButtonWidth,write=SetButtonWidth};

The value you assign to this property will be used by all controls. This property has nothing to do with the height. If you want to set the common height of the buttons, the TButtonGroup class provides the ButtonHeight property:

__property int ButtonHeight = {read=FButtonHeight,write=SetButtonHeight};

Because the width and the height are set independently, the buttons can have the same height with different widths, the same width with different heights, or the same size (width and height).

Using the Buttons

The items of a group button are normal Windows buttons. To use one of them, the user can click it. This causes the control to fire an OnClick event. From there, you as the programmer can do what you want.

Practical LearningPractical Learning: Using the Buttons

  1. On the Editing Button Group Items, click 0 - A
  2. In the Object Inspector, click Events
  3. Double-click OnClick
  4. In the same way, in the Editing Button Group Items, click each entry and, in the Events section of the Object Inspector, double-click OnClick
  5. Implement the events as follows:
    //---------------------------------------------------------------------------
    void __fastcall TfrmLanguage::bgpSignsItems0Click(TObject *Sender)
    {
    	imgSign->Picture->LoadFromFile("a.bmp");
    }
    //---------------------------------------------------------------------------
    void __fastcall TfrmLanguage::bgpSignsItems1Click(TObject *Sender)
    {
    	imgSign->Picture->LoadFromFile("b.bmp");
    }
    //---------------------------------------------------------------------------
    void __fastcall TfrmLanguage::bgpSignsItems2Click(TObject *Sender)
    {
    	imgSign->Picture->LoadFromFile("c.bmp");
    }
    //---------------------------------------------------------------------------
    void __fastcall TfrmLanguage::bgpSignsItems3Click(TObject *Sender)
    {
    	imgSign->Picture->LoadFromFile("d.bmp");
    }
    //---------------------------------------------------------------------------
    void __fastcall TfrmLanguage::bgpSignsItems4Click(TObject *Sender)
    {
    	imgSign->Picture->LoadFromFile("e.bmp");
    }
    //---------------------------------------------------------------------------
    void __fastcall TfrmLanguage::bgpSignsItems5Click(TObject *Sender)
    {
    	imgSign->Picture->LoadFromFile("f.bmp");
    }
    //---------------------------------------------------------------------------
    void __fastcall TfrmLanguage::bgpSignsItems6Click(TObject *Sender)
    {
    	imgSign->Picture->LoadFromFile("g.bmp");
    }
    //---------------------------------------------------------------------------
    void __fastcall TfrmLanguage::bgpSignsItems7Click(TObject *Sender)
    {
    	imgSign->Picture->LoadFromFile("h.bmp");
    }
    //---------------------------------------------------------------------------
    void __fastcall TfrmLanguage::bgpSignsItems8Click(TObject *Sender)
    {
    	imgSign->Picture->LoadFromFile("i.bmp");
    }
    //---------------------------------------------------------------------------
    void __fastcall TfrmLanguage::bgpSignsItems9Click(TObject *Sender)
    {
    	imgSign->Picture->LoadFromFile("j.bmp");
    }
    //---------------------------------------------------------------------------
    
    void __fastcall TfrmLanguage::bgpSignsItems10Click(TObject *Sender)
    {
    	imgSign->Picture->LoadFromFile("k.bmp");
    }
    //---------------------------------------------------------------------------
    void __fastcall TfrmLanguage::bgpSignsItems11Click(TObject *Sender)
    {
    	imgSign->Picture->LoadFromFile("l.bmp");
    }
    //---------------------------------------------------------------------------
    void __fastcall TfrmLanguage::bgpSignsItems12Click(TObject *Sender)
    {
    	imgSign->Picture->LoadFromFile("m.bmp");
    }
    //---------------------------------------------------------------------------
    void __fastcall TfrmLanguage::bgpSignsItems13Click(TObject *Sender)
    {
    	imgSign->Picture->LoadFromFile("n.bmp");
    }
    //---------------------------------------------------------------------------
    void __fastcall TfrmLanguage::bgpSignsItems14Click(TObject *Sender)
    {
    	imgSign->Picture->LoadFromFile("o.bmp");
    }
    //---------------------------------------------------------------------------
    void __fastcall TfrmLanguage::bgpSignsItems15Click(TObject *Sender)
    {
    	imgSign->Picture->LoadFromFile("p.bmp");
    }
    //---------------------------------------------------------------------------
    void __fastcall TfrmLanguage::bgpSignsItems16Click(TObject *Sender)
    {
    	imgSign->Picture->LoadFromFile("q.bmp");
    }
    //---------------------------------------------------------------------------
    void __fastcall TfrmLanguage::bgpSignsItems17Click(TObject *Sender)
    {
    	imgSign->Picture->LoadFromFile("r.bmp");
    }
    //---------------------------------------------------------------------------
    void __fastcall TfrmLanguage::bgpSignsItems18Click(TObject *Sender)
    {
    	imgSign->Picture->LoadFromFile("s.bmp");
    }
    //---------------------------------------------------------------------------
    void __fastcall TfrmLanguage::bgpSignsItems19Click(TObject *Sender)
    {
    	imgSign->Picture->LoadFromFile("t.bmp");
    }
    //---------------------------------------------------------------------------
    void __fastcall TfrmLanguage::bgpSignsItems20Click(TObject *Sender)
    {
    	imgSign->Picture->LoadFromFile("u.bmp");
    }
    //---------------------------------------------------------------------------
    void __fastcall TfrmLanguage::bgpSignsItems21Click(TObject *Sender)
    {
    	imgSign->Picture->LoadFromFile("v.bmp");
    }
    //---------------------------------------------------------------------------
    void __fastcall TfrmLanguage::bgpSignsItems22Click(TObject *Sender)
    {
    	imgSign->Picture->LoadFromFile("w.bmp");
    }
    //---------------------------------------------------------------------------
    void __fastcall TfrmLanguage::bgpSignsItems23Click(TObject *Sender)
    {
    	imgSign->Picture->LoadFromFile("x.bmp");
    }
    //---------------------------------------------------------------------------
    void __fastcall TfrmLanguage::bgpSignsItems24Click(TObject *Sender)
    {
    	imgSign->Picture->LoadFromFile("y.bmp");
    }
    //---------------------------------------------------------------------------
    void __fastcall TfrmLanguage::bgpSignsItems25Click(TObject *Sender)
    {
    	imgSign->Picture->LoadFromFile("z.bmp");
    }
    //---------------------------------------------------------------------------
  6. Save all
  7. To test the application, on the main menu, click Run -> Run
  8. Click some of the buttons
     
    Sign Language
     
    Sign Language
     
    Sign Language
  9. After using the form, close it and return to your programming environment

Using Images on Buttons

Instead of captions, you can display pictures on buttons. To make this possible, the TButtonGroup class provides the Images property:

__property Imglist::TCustomImageList * Images = {read=FImages,write=SetImages};

To start, create an image list and add images to it. If you use the default size of the buttons, you can visually create the list using the TImageList control. If you plan to use pictures whose sizes are not 16x16 pixels, you should programmatically create the list of items and manually specify the sizes of the images using the Width and the Height properties of the image list.

 After creating the image list, to assign the picture of a button, access its ImageIndex and assign the desired integral value.

 
 
 
 

Home Copyright © 2010-2011 FunctionX, Inc.