Home

Toolbars

   

Fundamentals of Toolbars

 

Introduction

A toolbar is a rectangular objects that displays a series of buttons. A toolbar is usually positioned in the top section of a form, usually under the main menu. Here is an example:

Toolbar

A toolbar is a classic control container. It can host edit boxes, buttons, etc. It is up to you to decide whether your application needs a toolbar and what you want to position on it.

A toolbar is primarily a container. This means that by itself, a toolbar means nothing, it doesn't do anything, and it may not even appear to the user. The controls you position on it give it meaning. Still, because of its position, it enjoys some visual characteristics but also imposes some restrictions to its hosted objects. Although it is a container, a toolbar must be hosted by another container. For this reason, the dimensions, mainly the width, of a toolbar are restricted to those of its host.

Practical LearningPractical Learning: Introducing Toolbars

  1. Start Embarcadero RAD Studio
  2. To start a new application, on the main menu, click File -> New -> VCL Forms Application - C++Builder
  3. In the Object Inspector, change the following properties:
    Caption: Picture Viewer
    FormStyle: fsMDIForm
    Name: frmPictureViewer
    Position: poScreenCenter
  4. In the Tool Palette, click Dialogs
  5. Click the OpenFileDialog button OpenFileDialog and click the form
  6. In the Object Inspector, change its characteristics as follows:
    Name: dlgOpen
    Title: Open a Picture
  7. In the Tool Palette, click Standard
  8. Click the TMainMenu button OpenFileDialog and click the form
  9. On the form, right-click MainMenu1 and click Menu Designer...
  10. Right-click somewhere in the Menu Designer and click Insert From Template...
  11. In the Insert Template dialog box, click MDI Frame Menu
     
    Insert Template
  12. Click OK
  13. In the Menu Designer, click the box under Exit
  14. In the Objects Inspector, change the following properties:
    Caption: &Close
    Enabled: (Uncheck to get) False
    Name: mnuFileClose
  15. Click the box under the Close menu item
  16. In the Object Inspector, click Caption, type - and press Enter
  17. Move the Close menu item, and the separator to position them under Save As...
     
    Menu Designer
  18. Double-click the Close menu item
  19. Change the document as follows:
    //---------------------------------------------------------------------------
    void __fastcall TfrmPictureViewer::mnuFileCloseClick(TObject *Sender)
    {
    	// If there is at least one child document, close it
    	if( MDIChildCount > 0 )
    		ActiveMDIChild->Close();
    
    	// After closing the last document,
    	// check the number of current chil forms.
    	// If there is none, disable the Close menu item
    	if( MDIChildCount == 0 )
    		mnuFileClose->Enabled = False;
    }
    //---------------------------------------------------------------------------
  20. In the Menu Designer, click File and double-click Exit
  21. Close the Menu Designer
  22. Implement the event as follows:
    //---------------------------------------------------------------------------
    void __fastcall TfrmPictureViewer::Exit1Click(TObject *Sender)
    {
    	Close();
    }
    //---------------------------------------------------------------------------
  23. In the Object Inspector, click Properties
  24. To add a new form, on the main menu, click File -> New -> Form - C++Builder
  25. In the Object Inspector, change the the following properties:
    AutoScroll: True
    Name to frmViewer
  26. In the Tool Palette, click System, click TPaintBox Paint Box and click the form
  27. In the Object Inspector, change its properties as follows:
    Left: 0
    Name: pbxPicture
    Top: 0
  28. On top of the Code Editor, click Unit1.cpp to display the first form
  29. On the main menu, click File -> Use Unit...
  30. In the Use Unit dialog box, click Unit2.cpp
  31. Click Header and click OK
  32. In the top section of the Code Editor, click Unit2.cpp
  33. Under the Code Editor, click Unit2.h
  34. In the public section, declare a few variables as follows:
    //---------------------------------------------------------------------------
    
    #ifndef ViewerH
    #define ViewerH
    //---------------------------------------------------------------------------
    #include <Classes.hpp>
    #include <Controls.hpp>
    #include <StdCtrls.hpp>
    #include <Forms.hpp>
    
    #include <jpeg.hpp>
    #include <GIFImg.hpp>
    #include <pngimage.hpp>
    //---------------------------------------------------------------------------
    enum PictureType { Bitmap, JPEG, GIF, PNG };
    //---------------------------------------------------------------------------
    class TfrmView : public TForm
    {
    __published:	// IDE-managed Components
    	TPaintBox *pbxPicture;
    private:	// User declarations
    public:		// User declarations
    	Graphics::TBitmap * bmpPicture;
    	TJPEGImage        * jpgPicture;
    	TGIFImage         * gifPicture;
    	TPngImage         * pngPicture;
    
    	PictureType pctType;
    	
    	__fastcall TfrmView(TComponent* Owner);
    };
    //---------------------------------------------------------------------------
    extern PACKAGE TfrmView *frmView;
    //---------------------------------------------------------------------------
    #endif
    
  35. In the Object Inspector, click Events
  36. Double-click OnClose
  37. Implement the event as follows:
    //---------------------------------------------------------------------------
    __fastcall TfrmView::TfrmView(TComponent* Owner)
    	: TForm(Owner)
    {
    	// Initialize the variables
    	bmpPicture = new Graphics::TBitmap;
    	jpgPicture = new TJPEGImage;
    	gifPicture = new TGIFImage;
    	pngPicture = new TPngImage;
    }
    //---------------------------------------------------------------------------
    void __fastcall TfrmView::FormClose(TObject *Sender, TCloseAction &Action)
    {
    	bmpPicture->Free();
    	jpgPicture->Free();
    	gifPicture->Free();
    	pngPicture->Free();
    
    	Action = caFree;
    }
    //---------------------------------------------------------------------------
  38. In the Events section of the Object Inspector, double-click OnPaint
  39. Change the file as follows:
    //---------------------------------------------------------------------------
    void __fastcall TfrmView::FormPaint(TObject *Sender)
    {
        // Display the picture from the top-left section to the end
        switch(pctType)
        {
    	case PictureType::Bitmap:
    	    pbxPicture->Canvas->Draw(0, 0, bmpPicture);
    	    break;
    	case PictureType::JPEG:
    	    pbxPicture->Canvas->Draw(0, 0, jpgPicture);
    	    break;
    	case PictureType::GIF:
    	    pbxPicture->Canvas->Draw(0, 0, gifPicture);
    	    break;
    	case PictureType::PNG:
    	    pbxPicture->Canvas->Draw(0, 0, pngPicture);
    	    break;
        }
    }
    //---------------------------------------------------------------------------
  40. In the top section of the Code Editor, click Unit1.cpp
  41. On the form, double-click MainMenu1
  42. In the Menu Designer, under File, double-click Open
  43. Close the Menu Designer
  44. Implement the event as follows:
    //---------------------------------------------------------------------------
    void __fastcall TfrmPictureViewer::Open1Click(TObject *Sender)
    {
        if( dlgOpen->Execute() )
        {
    	TfrmViewer *frmChild = new TfrmViewer(Application);
    
    	frmChild->FormStyle = fsMDIChild;
    	mnuFileClose->Enabled = True;
    	UnicodeString fileExtension = ExtractFileExt(dlgOpen->FileName);
    
    	if( fileExtension == ".bmp" )
    	{
    	    frmChild->pctType = PictureType::Bitmap;
    	    // Get the picture from the file
    	    frmChild->bmpPicture->LoadFromFile(dlgOpen->FileName);
    
    	    // Resize the paint box to the size of the picture
    	    frmChild->pbxPicture->ClientWidth  = frmChild->bmpPicture->Width;
    	    frmChild->pbxPicture->ClientHeight = frmChild->bmpPicture->Height;
    	} // Do the same for the other file types
    	else if( fileExtension == ".jpg" )
    	{
    	    frmChild->pctType = PictureType::JPEG;
    	    frmChild->jpgPicture->LoadFromFile(dlgOpen->FileName);
    	    frmChild->pbxPicture->ClientWidth  = frmChild->jpgPicture->Width;
    	    frmChild->pbxPicture->ClientHeight = frmChild->jpgPicture->Height;
    	}
    	else if( fileExtension == ".gif" )
    	{
    	    frmChild->pctType = PictureType::GIF;
    	    frmChild->gifPicture->LoadFromFile(dlgOpen->FileName);
    
    	    frmChild->pbxPicture->ClientWidth = frmChild->gifPicture->Width;
    	    frmChild->pbxPicture->ClientHeight = frmChild->gifPicture->Height;
    	}
    	else if( fileExtension == ".png" )
    	{
    	    frmChild->pctType = PictureType::PNG;
    	    frmChild->pngPicture->LoadFromFile(dlgOpen->FileName);
    
    	    frmChild->pbxPicture->ClientWidth  = frmChild->pngPicture->Width;
    	    frmChild->pbxPicture->ClientHeight = frmChild->pngPicture->Height;
    	}
    	else
    	{
    		ShowMessage(L"Unknown file type");
    		return;
    	}
    
    	// Display the file name in the title bar of the child form
    	frmChild->Caption = L"File Name: " + ExtractFileName(dlgOpen->FileName);
        }
    }
    //---------------------------------------------------------------------------

Creating a Toolbar

You can create a toolbar visually or programmatically. To support toolbars, the VCL provides a class named TToolBar. The TToolBar class is a member of the ComCtrls.hpp header file and it is derived from the TToolWindow class. The the TToolWindow class is derived from the TWinControl class:

TToolBar Inheritance

To visually create a toolbar, in the Win32 section of the Tool Palette, click TToolBar TToolBar and click the form. To programmatically create a toolbar, declare a variable of type TToolBar. When initializing it, indicate what control will act as its owner, which is usually the main form of the application. Here is an example:

//---------------------------------------------------------------------------
void __fastcall TForm1::FormCreate(TObject *Sender)
{
	TToolBar *tbrStandard = new TToolBar(this);
	tbrStandard->Parent = this;
}
//---------------------------------------------------------------------------

Practical LearningPractical Learning: Creating a Toolbar

  1. Display the first form
  2. On the Tool Palette, click Win32
  3. Click TToolBar Toolbar
  4. Click the form
  5. While the toolbar is still selected on the form, in the Object Inspector, click Name, type tbrStandard and press Enter

Adding a Button to a Toolbar

By default, just after you have added a toolbar to a form, it is empty, waiting for you to add objects to it. The primary type of object that displays on a toolbar is a button and a toolbar can use one or as many buttons as possible. To visually add a button to a toolbar, right-click it on the form and click New Button:

New Button

This would add an empty button to the toolbar:

New Button

A button on a toolbar is an object of type TToolButton. The TToolButton class is defined in ComCtrls.hpp. The TToolButton class is derived from the TGraphicControl class:

TToolButton Inheritance

To programmatically create a button, declare a variable of type TToolButton. When initializing it, specify its owner and its parent. These should be the toolbar that will carry it. Here is an example:

//---------------------------------------------------------------------------
void __fastcall TForm1::FormCreate(TObject *Sender)
{
	TToolButton *btnToolbar = NULL;
	TToolBar *tbrStandard = new TToolBar(this);
	tbrStandard->Parent = this;
	tbrStandard->AllowTextButtons = True;

	btnToolbar = new TToolButton(tbrStandard);
	btnToolbar->Parent = tbrStandard;
}
//---------------------------------------------------------------------------

Once a button exists on a toolbar, to use it, the user can click the button. This causes the button to fire an OnClick event. You can use this event to specify the behavior you want.

 
 
 

Characteristics of Buttons of a Toolbar

  

Text on a Button

A button on a toolbar can be made to display text, just as done on a menu item. In order to prepare its buttons to show text, a toolbar must allow it. To support this, the TToolBar class is equipped with the AllowTextButtons property:

__property bool AllowTextButtons =
{
    read=FAllowTextButtons,
    write=SetAllowTextButtons
};

To configure this visually, access the Object Inspector for the toolbar and set its AllowTextButtons field to True. In the same way, you can programmatically set this property. Here is an example:

//---------------------------------------------------------------------------
void __fastcall TForm1::FormCreate(TObject *Sender)
{
	TToolButton *btnToolbar = NULL;
	TToolBar *tbrStandard = new TToolBar(this);
	tbrStandard->Parent = this;
	tbrStandard->AllowTextButtons = True;

	btnToolbar = new TToolButton(tbrStandard);
	btnToolbar->Parent = tbrStandard;
}
//---------------------------------------------------------------------------

After allowing text buttons, when creating a button, assign text to its Caption property. Of course, you can do this visually in the Object Inspector or programmatically. Here is an example:

//---------------------------------------------------------------------------
void __fastcall TForm1::FormCreate(TObject *Sender)
{
	TToolButton *btnToolbar = NULL;
	TToolBar *tbrStandard = new TToolBar(this);
	tbrStandard->Parent = this;
	tbrStandard->AllowTextButtons = True;

	btnToolbar = new TToolButton(tbrStandard);
	btnToolbar->Parent = tbrStandard;
	btnToolbar->Caption = "New";
}
//---------------------------------------------------------------------------

The Style of a Button

Besides, or instead of, text, a button can be made to show a picture or else. This characteristic is handled by the Style property of the TToolButton class:

__property Comctrls::TToolButtonStyle Style = {read=FStyle,write=SetStyle};

The style of a button is based on the TToolButtonStyle enumeration. To indicate that you want a button to appear with text (only), specify its Style property as tbsTextButton. Here is an example:

//---------------------------------------------------------------------------
void __fastcall TForm1::FormCreate(TObject *Sender)
{
	TToolButton *btnToolbar = NULL;
	TToolBar *tbrStandard = new TToolBar(this);
	tbrStandard->Parent = this;
	tbrStandard->AllowTextButtons = True;

	btnToolbar = new TToolButton(tbrStandard);
	btnToolbar->Parent = tbrStandard;
	btnToolbar->Caption = "New";
	btnToolbar->Style = tbsTextButton;
}
//---------------------------------------------------------------------------

In the same way, you can add as many buttons as you want.

A Buttons' Separator

On a toolbar, a separator that appears with | as its caption. To help you create a separator, create a new button and set its Style to tbsSeparator. Here is an example:

//---------------------------------------------------------------------------
void __fastcall TForm1::FormCreate(TObject *Sender)
{
	TToolButton *btnToolbar = NULL;
	TToolBar *tbrStandard = new TToolBar(this);
	tbrStandard->Parent = this;
	tbrStandard->AllowTextButtons = True;

	btnToolbar = new TToolButton(tbrStandard);
	btnToolbar->Parent = tbrStandard;
	btnToolbar->Caption = "New";
	btnToolbar->Style = tbsTextButton;

	btnToolbar = new TToolButton(tbrStandard);
	btnToolbar->Parent = tbrStandard;
	btnToolbar->Caption = "Open";
	btnToolbar->Style = tbsTextButton;

	btnToolbar = new TToolButton(tbrStandard);
	btnToolbar->Parent = tbrStandard;
	btnToolbar->Style = tbsSeparator;

	btnToolbar = new TToolButton(tbrStandard);
	btnToolbar->Parent = tbrStandard;
	btnToolbar->Caption = "Print";
	btnToolbar->Style = tbsTextButton;
}
//---------------------------------------------------------------------------

Bitmapped Buttons

Instead of (or besides) text, a button can display (only) a picture. To start, you must create an image list and assign it to the toolbar. To support bitmaps on a button, the TToolBar class is equipped with the Images property that is of type TCustomImageList:

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

To property a toolbar to have its buttons display bitmaps, assign a TImageList collection to its Images property. You can do this visually or programmatically. Here is an example:

//---------------------------------------------------------------------------
void __fastcall TForm1::FormCreate(TObject *Sender)
{
	TImageList * lstImages = new TImageList(this);
	Graphics::TBitmap *bmpImage = new Graphics::TBitmap;

	bmpImage->LoadFromFile(L"C:\\buttons\\new.bmp");
	lstImages->Add(bmpImage, NULL);
	bmpImage->LoadFromFile(L"C:\\buttons\\open.bmp");
	lstImages->Add(bmpImage, NULL);

	TToolBar *tbrStandard = new TToolBar(this);
	tbrStandard->Parent = this;
	tbrStandard->Images = lstImages;
}
//---------------------------------------------------------------------------

To support bitmaps, the TToolButton class is equipped with an indexed property named ImageIndex:

__property int ImageIndex = {read=FImageIndex,write=SetImageIndex};

To visually specify the index of a button, click it on the form and select the number in the ImageIndex field of its Object Inspector. To do this programmatically, assign the desired number to the ImageIndex proeprty. Here are examples:

//---------------------------------------------------------------------------
void __fastcall TForm1::FormCreate(TObject *Sender)
{
	TToolButton *btnToolbar = NULL;
	TImageList * lstImages = new TImageList(this);
	Graphics::TBitmap *bmpImage = new Graphics::TBitmap;

	bmpImage->LoadFromFile(L"C:\\buttons\\new.bmp");
	lstImages->Add(bmpImage, NULL);
	bmpImage->LoadFromFile(L"C:\\buttons\\open.bmp");
	lstImages->Add(bmpImage, NULL);

	TToolBar *tbrStandard = new TToolBar(this);
	tbrStandard->Parent = this;
	tbrStandard->Images = lstImages;

	btnToolbar = new TToolButton(tbrStandard);
	btnToolbar->Parent = tbrStandard;
	btnToolbar->ImageIndex = 0;

	btnToolbar = new TToolButton(tbrStandard);
	btnToolbar->Parent = tbrStandard;
	btnToolbar->ImageIndex = 1;
}
//---------------------------------------------------------------------------

Practical LearningPractical Learning: Adding Buttons to a Toolbar

  1. On the Tool Palette, click Win32
  2. Click TImageList Toolbar and click the form
  3. On the form, double-click ImageList1
  4. Click Add and add the following images: new.bmp, open.bmp, save.bmp, and print.bmp
  5. Click OK
  6. On the form, click the toolbar
  7. In the Object Inspector, click Images and select ImageList1
  8. On the form, right-click the toolbar and click New Button
  9. Right-click the right side of the first button and click New Button
  10. Right-click the empty area on the toolbar and click New Button
  11. Right-click the empty area on toolbar click New Separator
  12. Right-click the empty area on the toolbar and click New Button
  13. On the toolbar, click the second button from the left
  14. In the Object Inspector, click Events
  15. Click OnClick, click the arrow of the field and select Open1Click
  16. In the Object Inspector, click Properties
  17. Press F9 to test the project
  18. On the form, click the second button from left, select a picture, and click Open
  19. Close the application and return to your programming environment

Checked Buttons

You can make a button behave like a check box. That is, when the button is clicked, it gets down. If the button was down, when it is clicked, it becomes up. To support this, the Style of the TToolButton class has a member named tbsCheck. Therefore, to get this behavior, first set the Style to tbsCheck.

To support the scenario of being up or down, the TToolButton class is equipped with a Boolean property named Down:

__property bool Down = {read=FDown,write=SetDown};

To set a button down, set this property to True. To set it up, change this property to False. Since this is a read-write property, at any time, to get its state, check the value of the Down property. Here is an example that changes the down-up state and vice versa:

//---------------------------------------------------------------------------
void __fastcall TForm1::ToolButton1Click(TObject *Sender)
{
	ToolButton1->Down != ToolButton1->Down;
}
//---------------------------------------------------------------------------

Grouping the Buttons

You can make a group of button behave in mutual exclusion. That is, when one of the buttons in the same group is clicks, it gets down and the other buttons become up. To support this, the TToolButton class is equipped with the Grouped Boolean property.

To implement the mutual exclusive scenario:

  1. Create a separator to group the buttons
  2. For each button in the group:
    • Set the Grouped property to True
    • Set the Style to tbsCheck

A Menu on a Button

You can create a button that is made of two parts. The regular part is on the left side and the right side has a down-pointint arrow. When the user clicks the down-pointing arrow, a menu would display.

To create menu-equipped button, first create a popup menu. To implement this functionality, set the Style of the TToolButton to tbsDropDown. To let you apply a menu on a button, the TToolButton class is equipped with a property named DropDownMenu:

__property Menus::TPopupMenu * DropdownMenu = {read=FDropdownMenu,
					       write=SetDropdownMenu};

After creating a popup menu, assign it to the DropDownMenu property. You can do this using the Object Inspector or with code. Here is an example:

//---------------------------------------------------------------------------
void __fastcall TForm1::FormCreate(TObject *Sender)
{
	TToolButton *btnToolbar = NULL;
	TToolBar *tbrStandard = new TToolBar(this);
	tbrStandard->Parent = this;
	tbrStandard->ShowCaptions = True;

	TPopupMenu *mnuPopup = new TPopupMenu(this);
	TMenuItem *mnuItem = new TMenuItem(this);
	mnuItem->Caption = "First";
	mnuPopup->Items->Add(mnuItem);
	mnuItem = new TMenuItem(this);
	mnuItem->Caption = "Second";
	mnuPopup->Items->Add(mnuItem);
	mnuItem = new TMenuItem(this);
	mnuItem->Caption = "Third";
	mnuPopup->Items->Add(mnuItem);

	btnToolbar = new TToolButton(tbrStandard);
	btnToolbar->Parent = tbrStandard;
	btnToolbar->Caption = "New";
	btnToolbar->Style = tbsDropDown;
	btnToolbar->DropdownMenu = mnuPopup;
}
//---------------------------------------------------------------------------

This would produce:

Menu on a toolbar button

Of course, you can use a button that shows only text, only a bitmap, or both.

Characteristics of Toolbars

 

Introduction

When you add a toolbar to a form, it automatically positions itself to the top section of the form and uses the same width as the form. This means that the default Align value of a toolbar is alTop.

Besides its width, a toolbar is caterized by its height. When newly added to a form, a toolbar receives a default height of 29. You can change it if you want, by assigning a new value to its Height property.

A Collection of Buttons

To hold its collection of objects, the TToolBar class is equipped with a property named Buttons:

__property Comctrls::TToolButton * Buttons = {read=GetButton};

The TToolBar::Buttons property is a read-only collection. This means that it can only give you information about buttons that already exist on the toolbar. You cannot use it to create buttons.

To keep track of the buttons positioned on it, a toolbar provides other pieces of information such as

  • The number of buttons on it, represented by the ButtonCount read-only property:
    __property int ButtonCount = {read=GetButtonCount};
  • The width of each button, represented by the ButtonWidth property:
    __property int ButtonWidth = {read=FButtonWidth,write=SetButtonWidth};
  • The height of each button, represented by the ButtonHeight property:
    __property int ButtonHeight = {read=FButtonHeight,write=SetButtonHeight};

A Toolbar Holding a Main Menu

You can create a toolbar that either share the items with a main menu or acts itself as a main menu. To start, create a TMainMenu object with all the necessary options. If you don't want the form to display it, delete the value of its Menu property. To make a toolbar hold the main menu, the TToolBar class has a property named Menu:

__property Menus::TMainMenu * Menu = {read=FMenu,write=SetMenu};

Assign a TMainMenu object to the Menu property of your TToolBar object.

Pictures on Menu Items

 

Introduction

If you create a form that display a menu, whether it is a main menu or a popup menu, to make some menu items appealing, you can add pitures to them. Here are examples:

Images on Menu Items

To keep up with this tendency, the VCL makes it very easy to add pictures to menu items; all this without writing a single line of code.

Assigning a Bitmap to a Menu Item

To display a pictue on a menu item, you have two primary options.

The TMenuItem class is equipped with a property named Bitmap, which is of type TBitmap:

__property Graphics::TBitmap * Bitmap = {read=GetBitmap,write=SetBitmap};

After visually creating a menu, to apply a bitmap to a menu item, in the Menu Designer, click that item. In the Object Inspector, click Bitmap and click its button. In the Picture Editor, click Load. Locate a bitmap, select it, and click Open. In the Picture Editor, click OK.

To programmatically specify the picture to apply to a menu, access its Bitmap propert and assign an initialized TBitmap object to it. Here are examples:

//---------------------------------------------------------------------------
void __fastcall TForm1::FormCreate(TObject *Sender)
{
	Graphics::TBitmap *bmpImage = new Graphics::TBitmap;
	TMainMenu *mnuMain = new TMainMenu(this);

	TMenuItem *mnuFile = new TMenuItem(this);
	mnuFile->Caption = L"&File";

	bmpImage->LoadFromFile(L"C:\\Some Images\\new.bmp");

	TMenuItem *mnuFileNew = new TMenuItem(this);
	mnuFileNew->Caption = L"&New";
	mnuFileNew->Bitmap = bmpImage;
	mnuFile->Add(mnuFileNew);

	bmpImage->LoadFromFile(L"C:\\Some Images\\open.bmp");

	TMenuItem *mnuFileOpen = new TMenuItem(this);
	mnuFileOpen->Caption = L"&Open";
	mnuFileOpen->Bitmap = bmpImage;
	mnuFile->Add(mnuFileOpen);

	mnuMain->Items->Add(mnuFile);
}
//---------------------------------------------------------------------------

Using an Image List

An alternative to show pictures on menu items consists of using an image list. To prepare pictures to display on a menu item, first create an image list. Using the Image List Editor, add the necessary pictures. Normally, the picture can be of any type but it is better to use icons.

To support this solution, the TMenu class, which is the parent of TMainMenu, has a property named Images:

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

As you can see, the TMenu::Images property is an object of type TCustomImageList, which is the parent of the TImageList class. After creating an image list, to visually specify that you want to use its pictures on a menu, on the form, click the main menu. In the Object Inspector, set the value of the Images field to the image list control. To do this programmatically, after creating a TMainMenu object, assign a TImageList value to its Images property. Here is an example:

//---------------------------------------------------------------------------
void __fastcall TForm1::FormCreate(TObject *Sender)
{
	TImageList * lstImages = new TImageList(this);
	
	. . . Add images to the image list

	TMainMenu *mnuMain = new TMainMenu(this);
	mnuMain->Images = lstImages;
}
//---------------------------------------------------------------------------

To support this solution, the TMenuItem class is equipped with a property named ImageIndex. After assigning an image list to a main menu, to visually apply a picture to a menu item, in the Menu Designer, click a menu item. In the Object Inspector, select a value in the ImageIndex field. To do this programmatically, assign the integer index to the menu item. Here are examples:

//---------------------------------------------------------------------------
void __fastcall TForm1::FormCreate(TObject *Sender)
{
	TImageList * lstImages = new TImageList(this);
	Graphics::TBitmap *bmpImage = new Graphics::TBitmap;

	bmpImage->LoadFromFile(L"C:\\Some Images\\new.bmp");
	lstImages->Add(bmpImage, NULL);
	bmpImage->LoadFromFile(L"C:\\Some Images\\open.bmp");
	lstImages->Add(bmpImage, NULL);
	bmpImage->LoadFromFile(L"C:\\Some Images\\save.bmp");
	lstImages->Add(bmpImage, NULL);
	bmpImage->LoadFromFile(L"C:\\Some Images\\print.bmp");
	lstImages->Add(bmpImage, NULL);

	TMainMenu *mnuMain = new TMainMenu(this);
	mnuMain->Images = lstImages;

	TMenuItem *mnuFile = new TMenuItem(this);
	TMenuItem *mnuFileNew = new TMenuItem(this);
	TMenuItem *mnuFileOpen = new TMenuItem(this);

	mnuFile->Caption = L"&File";

	mnuFileNew->Caption = L"&New";
	mnuFileNew->ImageIndex = 0;
	mnuFile->Add(mnuFileNew);

	mnuFileOpen->Caption = L"&Open";
	mnuFileOpen->ImageIndex = 1;
	mnuFile->Add(mnuFileOpen);

	mnuMain->Items->Add(mnuFile);
}
//---------------------------------------------------------------------------

Practical LearningPractical Learning: Assigning a Bitmap to a Menu Item

  1. On the form, click MainMenu1
  2. In the Object Inspector, click Images and select ImageList1
  3. On the form, right-click MainMenu1 and click Menu Designer...
  4. In the Menu Designer, under File, click New
  5. In the Object Inspector, click ImageIndex, click the arrow of its combo box and select 0
  6. In the Menu Designer, under File, click Open
  7. In the Object Inspector, click ImageIndex, click the arrow of its combo box and select 1
  8. In the Menu Designer, under File, click Save
  9. In the Object Inspector, click ImageIndex, click the arrow of its combo box and select 2
  10. In the Menu Designer, under File, click Print...
  11. In the Object Inspector, click ImageIndex, click the arrow of its combo box and select 0
  12. Close the Menu Designer
  13. Press F9 to test the project
  14. On the form, click File and see the pictures on the menu items
  15. Close the form and return to your programming environment
 
 
   
 

Home Copyright © 2010-2011 FunctionX, Inc.