Skip Navigation LinksBCGSoft > Support > Developer Area > Toolbar Editor

Toolbar Editor

Toolbar Editor allows you easily create and manage application toolbars. You can add toolbar buttons, create and edit toolbar button images for various color modes and screen resolutions and associate buttons with command IDs.

Toolbar Editor works directly with project resources and modifies *.rc and resource.h files. Also it adds or modifies some files in the /res folder (images and *.rc2 files), therefore if you work with a source controlled project don't forget to check out the resources first.

The Toolbar Editor application is named BCGToolbarEditor.exe and installed in <install path>\BCGSoft\BCGControlBarPro\Designers folder. The corresponding shortcut is added to "BCGCBPro" application group.

Toolbar Editor supports images in .svg, .bmp, ico and .png formats with up to 32bpp colors, therefore you can quickly adapt the default toolbar (16 colors) to high quality semi-transparent look.

Description of Toolbar Editor interface.

Menu

  1. File:
    • Open... - opens an existing Visual Studio project (dsp, vcproj, vcxproj).
    • Close - closes a project being edited.
    • Save - saves a project being edited.
    • Exit - closes Toolbar Editor.
  2. Edit: allow to edit currently selected toolbar button images.
  3. View: allows to show or hide application toolbars, status bar and docking windows.
  4. Help: displays Toolbar Editor version info and this development guide.

Docking Windows

  1. Actions - displays shortcuts to actions available in the current context. For example, if there is no open project, you can only open an existing project, or project from the recent list:

    BCGSoft Toolbar Editor: 'Actions' pane

  2. Toolbars - displays a list of toolbars available in the project being edited. Use docking pane to add, delete and find toolbars (the corresponding buttons on the embedded toolbar:

    BCGSoft Toolbar Editor: 'Toolbars' pane

    If you click "Add" button the "Add Toolbar" dialog appears:

    BCGSoft Toolbar Editor: 'Add Button' dialog

    • ID: specify the new toolbar resource ID.
    • Width/Height: specify dimensions of a single image in toolbar's image list.
    • Language - allows to create localized resources.
  3. Properties - displays properties for the currently selected object (toolbar or toolbar button).

    The following screenshot illustrates toolbar properties:

    BCGSoft Toolbar Editor: 'Properties' pane

    • ID - toolbar resource ID
    • Images Hot/Cold/Disables - allows to assign existing image list IDs to the toolbar.
    • Width/Height - specifies a single image dimension in the toolbar's image list. Changing these properties affects all image lists.

    The following screenshot illustrates toolbar button properties:

    BCGSoft Toolbar Editor: 'Button Properties' pane

    • ID - toolbar button's command ID
    • Width/Height - specifies a single image dimension in the parent toolbar's image list. Changing these properties affects all image lists.
  4. Toolbox - contains a list of elements, which can be used for toolbar editing:

    BCGSoft Toolbar Editor: 'Toolbox' pane

    • Button - select this element to insert new buttons into a toolbar being edited.
    • Separator - select this element to insert separators between toolbar buttons.
    • Pointer - select this element to select buttons on a toolbar being edited.
  5. Images - displays a list of images available for the currently selected button (up to 4 images - default, hot, cold, disabled).

    BCGSoft Toolbar Editor: 'Images' pane

    The embedded toolbar allows to edit the selected image bringing up the image editor, import an image from an external file, copy the selected image to the Clipboard, paste an image from the Clipboard and clear the selected image.

Main View

The Main View displays a toolbar selected in the Toolbars window. You can edit this toolbar by clicking toolbar buttons. You can arrange existing buttons using drag&drop.

Right click brings up a context menu with available editing options:

BCGSoft Toolbar Editor: main view

You can define and edit additional image lists with hot, cold and disabled images (each image list is optional). If an image list has not been created, click the corresponding "Set ID..." button for the desired image list. It brings up a dialog, which allows to define a new image list ID, or select an existing ID:

BCGSoft Toolbar Editor: 'Image' dialog

When a new image list has been assigned to a toolbar, you can select it for editing by choosing the appropriate radio button:

BCGSoft Toolbar Editor: adding icon

This screenshot illustrates a new image list with disabled images, where a disabled image has been added for 3-rd button (Save). Image lists with hot and cold images have not been added, therefore their corresponding radio buttons are disabled.

Image Editor

The Image Editor dialog appears when you select "Edit Image" on the Images pane or from the toolbar editor's context menu on the Main View.

BCGSoft Toolbar Editor: image editing dialog

Add New Image

The Add New Image dialog appears when you click "Import Image" button on the embedded toolbar on the Images pane. The imported image will replace the currently selected image in the image list.

BCGSoft Toolbar Editor: 'Add icon' dialog

Click the "Load..." button to load an existing file (.svg, .bmp, .ico, and .png images are supported). Click "Clear" button to clear the image that has been loaded. Select transparent color from the drop-down color picker if the loaded image is not 32bpp.

General Workflow

  1. Start the application and open an existing Visual Studio project or separate resource file (*.rc).
  2. To add or delete a toolbar click the appropriate button on the Toolbars pane toolbar.
  3. Select a toolbar to be edited -> the default image list appears in the Main View.
  4. Click "Set ID..." button on the Main View to create additional image lists with hot, cold and disabled images (these image lists are optional).
  5. Select the desired radio button on the Main View to edit a specific image list.
  6. Use either Toolbox, or context menu, or Actions pane shortcuts to insert or delete toolbar buttons or separators. All image lists are updated accordingly.
  7. Select a toolbar button on the Main View and use drag&drop to change button's position. All image lists are updated accordingly.
  8. Use Properties pane to assign a command ID to a selected toolbar button (ID property). If you change Width or/and Height properties, all image lists will be updated.
  9. Use Images pane to edit images for selected toolbar buttons.
  10. Save the project and compile the application to see the changes. If you've added new image lists, you may need to specify their IDs in the application code.

Back to the Developer Area