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 clicked button 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 - Delphi
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. From the resources that accompany these lessons, copy the picture files whose names are made of one letter and the extension .bmp
10. Paste them in the folder of the current project

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.pas file that also contains the ButtonGroup package.

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, declare a variable of type TButtonGroup. Use its constructor to initialize the variable assign a container to its Parent property. Here is an example:

unit Unit1;

interface

uses
  Windows, Messages, SysUtils, Variants, Classes,
  Graphics, Controls, Forms, ButtonGroup, Dialogs;

type
  TForm1 = class(TForm)
    procedure FormCreate(Sender: TObject);
  private
    { Private declarations }
  public
    { Public declarations }
  end;

var
  Form1: TForm1;

implementation

{$R *.dfm}

procedure TForm1.FormCreate(Sender: TObject);
    var bgpSelection : TButtonGroup;
begin
    bgpSelection := TButtonGroup.Create(Form1);
    bgpSelection.Parent := Form1;
end;

end.

1. Design the form as follows: 
    
   

   Control Align Center Color Name Kind  TButtonGroup       bgpSigns   TPanel     clWhite     TImage alClient 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 BorderStyle: TBorderStyle 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:

procedure TForm1.FormCreate(Sender: TObject);
    var bgpSelection : TButtonGroup;
begin
    bgpSelection := TButtonGroup.Create(Self);
    bgpSelection.Parent := Self;

    bgpSelection.Left := 8;
    bgpSelection.Top  := 40;
end;

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 Items: TGrpButtonItems read FButtonItems write SeTGrpButtonItems;

The TGrpButtonItems class is based on the TCollection class (a member of the Classes.pas 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 CategoryButtons.pas.

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 ButtonOptions: TGrpButtonOptions read FButtonOptions write SetGrpButtonOptions;

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:

procedure TForm1.FormCreate(Sender: TObject);
    var
        bgpSelection : TButtonGroup;
        gbi          : TGrpButtonItem;
begin
    bgpSelection := TButtonGroup.Create(Self);
    bgpSelection.Parent := Self;

    bgpSelection.Left := 8;
    bgpSelection.Top  := 40;

    gbi := bgpSelection.Items.Add
end;

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

procedure TForm1.FormCreate(Sender: TObject);
    var
        bgpSelection : TButtonGroup;
        gbi          : TGrpButtonItem;
begin
    bgpSelection := TButtonGroup.Create(Self);
    bgpSelection.Parent := Self;

    bgpSelection.Left := 8;
    bgpSelection.Top  := 40;

    gbi := bgpSelection.Items.Add;
    gbi.Caption := 'Save'
end;

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 ButtonWidth: Integer 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 ButtonHeight: Integer 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 and implement the event as follows:

   procedure TfrmLanguage.ButtonGroup1Items0Click(Sender: TObject);
   begin
       imgSign.Picture.LoadFromFile('a.bmp')
   end;

4. In the Editing Button Group Items, click 1 - B and, in the Events section of the Object Inspector, double-click OnClick
5. Implement the event as follows:

   procedure TfrmLanguage.bgpSignsItems1Click(Sender: TObject);
   begin
       imgSign.Picture.LoadFromFile('b.bmp')
   end;

6. In the Editing Button Group Items, click 2 - C and, in the Events section of the Object Inspector, double-click OnClick
7. Implement the event as follows:

   procedure TfrmLanguage.bgpSignsItems2Click(Sender: TObject);
   begin
       imgSign.Picture.LoadFromFile('c.bmp')
   end;

8. In the Editing Button Group Items, click 3 - D and, in the Events section of the Object Inspector, double-click OnClick
9. Implement the event as follows:

   procedure TfrmLanguage.bgpSignsItems3Click(Sender: TObject);
   begin
       imgSign.Picture.LoadFromFile('d.bmp')
   end;

10. In the Editing Button Group Items, click 4 - E and, in the Events section of the Object Inspector, double-click OnClick
11. Implement the event as follows:

    procedure TfrmLanguage.bgpSignsItems4Click(Sender: TObject);
    begin
        imgSign.Picture.LoadFromFile('e.bmp')
    end;

12. In the Editing Button Group Items, click 5 - F and, in the Events section of the Object Inspector, double-click OnClick
13. Implement the event as follows:

    procedure TfrmLanguage.bgpSignsItems5Click(Sender: TObject);
    begin
        imgSign.Picture.LoadFromFile('f.bmp')
    end;

14. In the Editing Button Group Items, click 6 - G and, in the Events section of the Object Inspector, double-click OnClick
15. Implement the event as follows:

    procedure TfrmLanguage.bgpSignsItems6Click(Sender: TObject);
    begin
        imgSign.Picture.LoadFromFile('g.bmp')
    end;

16. In the Editing Button Group Items, click 7 - H and, in the Events section of the Object Inspector, double-click OnClick
17. Implement the event as follows: 

    procedure TfrmLanguage.bgpSignsItems7Click(Sender: TObject);
    begin
        imgSign.Picture.LoadFromFile('h.bmp')
    end;

18. In the Editing Button Group Items, click 8 - I and, in the Events section of the Object Inspector, double-click OnClick
19. Implement the event as follows:

    procedure TfrmLanguage.bgpSignsItems8Click(Sender: TObject);
    begin
        imgSign.Picture.LoadFromFile('i.bmp')
    end;

20. In the Editing Button Group Items, click 9 - J and, in the Events section of the Object Inspector, double-click OnClick
21. Implement the event as follows:

    procedure TfrmLanguage.bgpSignsItems9Click(Sender: TObject);
    begin
        imgSign.Picture.LoadFromFile('j.bmp')
    end;

22. In the Editing Button Group Items, click 10 - K and, in the Events section of the Object Inspector, double-click OnClick
23. Implement the event as follows:

    procedure TfrmLanguage.bgpSignsItems10Click(Sender: TObject);
    begin
        imgSign.Picture.LoadFromFile('k.bmp')
    end;

24. In the Editing Button Group Items, click 11 - L and, in the Events section of the Object Inspector, double-click OnClick
25. Implement the event as follows:

    procedure TfrmLanguage.bgpSignsItems11Click(Sender: TObject);
    begin
        imgSign.Picture.LoadFromFile('l.bmp')
    end;

26. In the Editing Button Group Items, click 12 - M and, in the Events section of the Object Inspector, double-click OnClick
27. Implement the event as follows:

    procedure TfrmLanguage.bgpSignsItems12Click(Sender: TObject);
    begin
        imgSign.Picture.LoadFromFile('m.bmp')
    end;

28. In the Editing Button Group Items, click 13 - N and, in the Events section of the Object Inspector, double-click OnClick
29. Implement the event as follows:

    procedure TfrmLanguage.bgpSignsItems13Click(Sender: TObject);
    begin
        imgSign.Picture.LoadFromFile('n.bmp')
    end;

30. In the Editing Button Group Items, click 14 - O and, in the Events section of the Object Inspector, double-click OnClick
31. Implement the event as follows:

    procedure TfrmLanguage.bgpSignsItems14Click(Sender: TObject);
    begin
        imgSign.Picture.LoadFromFile('o.bmp')
    end;

32. In the Editing Button Group Items, click 15 - P and, in the Events section of the Object Inspector, double-click OnClick
33. Implement the event as follows:

    procedure TfrmLanguage.bgpSignsItems15Click(Sender: TObject);
    begin
        imgSign.Picture.LoadFromFile('p.bmp')
    end;

34. In the Editing Button Group Items, click 16 - Q and, in the Events section of the Object Inspector, double-click OnClick
35. Implement the event as follows:

    procedure TfrmLanguage.bgpSignsItems16Click(Sender: TObject);
    begin
        imgSign.Picture.LoadFromFile('q.bmp')
    end;

36. In the Editing Button Group Items, click 17 - R and, in the Events section of the Object Inspector, double-click OnClick
37. Implement the event as follows:

    procedure TfrmLanguage.bgpSignsItems17Click(Sender: TObject);
    begin
        imgSign.Picture.LoadFromFile('r.bmp')
    end;

38. In the Editing Button Group Items, click 18 - S and, in the Events section of the Object Inspector, double-click OnClick
39. Implement the event as follows:

    procedure TfrmLanguage.bgpSignsItems18Click(Sender: TObject);
    begin
        imgSign.Picture.LoadFromFile('s.bmp')
    end;

40. In the Editing Button Group Items, click 19 - T and, in the Events section of the Object Inspector, double-click OnClick
41. Implement the event as follows:

    procedure TfrmLanguage.bgpSignsItems19Click(Sender: TObject);
    begin
        imgSign.Picture.LoadFromFile('t.bmp')
    end;

42. In the Editing Button Group Items, click 20 - U and, in the Events section of the Object Inspector, double-click OnClick
43. Implement the event as follows:

    procedure TfrmLanguage.bgpSignsItems20Click(Sender: TObject);
    begin
        imgSign.Picture.LoadFromFile('u.bmp')
    end;

44. In the Editing Button Group Items, click 21 - V and, in the Events section of the Object Inspector, double-click OnClick
45. Implement the event as follows:

    procedure TfrmLanguage.bgpSignsItems21Click(Sender: TObject);
    begin
        imgSign.Picture.LoadFromFile('v.bmp')
    end;

46. In the Editing Button Group Items, click 22 - W and, in the Events section of the Object Inspector, double-click OnClick
47. Implement the event as follows:

    procedure TfrmLanguage.bgpSignsItems22Click(Sender: TObject);
    begin
        imgSign.Picture.LoadFromFile('w.bmp')
    end;

48. In the Editing Button Group Items, click 23 - X and, in the Events section of the Object Inspector, double-click OnClick
49. Implement the event as follows:

    procedure TfrmLanguage.bgpSignsItems23Click(Sender: TObject);
    begin
        imgSign.Picture.LoadFromFile('x.bmp')
    end;

50. In the Editing Button Group Items, click 24 - Y and, in the Events section of the Object Inspector, double-click OnClick
51. Implement the event as follows:

    procedure TfrmLanguage.bgpSignsItems24Click(Sender: TObject);
    begin
        imgSign.Picture.LoadFromFile('y.bmp')
    end;

52. In the Editing Button Group Items, click 25 - Z and, in the Events section of the Object Inspector, double-click OnClick
53. Implement the event as follows:

    procedure TfrmLanguage.bgpSignsItems25Click(Sender: TObject);
    begin
        imgSign.Picture.LoadFromFile('z.bmp')
    end;

54. Save all
55. To test the application, on the main menu, click Run -> Run
56. Click some of the buttons
     
    
     
    
     
    
57. 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 Images: TCustomImageList 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.