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.

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
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

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:

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

1. Design the form as follows: 
    
   

   Control Center Color Name Kind  TButtonGroup     bgpSigns   TPanel   clWhite     TImage True   imgSign   TBitBtn       bkClose

2. Save all

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.

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

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

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:

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.

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

To visually create a button:

• Click the New button
• 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.

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

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.

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.

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

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).

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.

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
    
   
    
   
    
   
9. After using the form, close it and return to your programming environment

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.