Support

glyFX Guides : Microsoft Visual Basic 6

Using glyFX icons in Microsoft Visual Basic 6

This document outlines the basic procedure on how to use the glyFX toolbar images with Microsoft Visual Basic 6. A similar procedure applies to earlier versions, however there are differences in the user interface. The terminology used in this article would apply to all versions.

There are two main mechanisms for adding icons on your controls, image lists and embedding into controls.

Image Lists

Image Lists allow you to have a single object that contains all of your icons. This allows you to edit the images without having to modify each individual control within your application. If you use the same icon on more than one control, it stores a single copy of that icon, rather than duplicate the image. This guide is broken up into 4 seperate parts;

Embedding

Embedding an image into a control is a quick way of adding an icon to your user interface. The selected control will directly store the icon resource. This method is very quick, but not as efficient as using Image Lists, although necessary since some controls are not compatible with Image Lists. This guide has just 1 part;

Part 1 - Adding an ImageList

A default installation of Visual Basic 6 does not display the Image List component. It is part of the Microsoft Common Controls, which are installed on every version of Windows. If your Toolbox panel does not contain the Image List, you will need to add it to your project (otherwise, please continue to Step 4).

Step 1

Right click on any empty space in your Toolbox panel, and select Components from the drop down menu.

Right click the Toolbox panel, and select Components from the menu

Step 2

Using the Components dialog, scroll down to Microsoft Windows Common Controls and tick the box. Depending on your operating system, you may have more than one set of these controls listed. To check the differences between the different versions, please visit the Microsoft MSDN web site. Once you have selected the control, click the OK button.

Tick the Microsoft Windows Common Controls checkbox in the Components dialog

Step 3

Your Toolbox panel should now show the new controls.

The new controls will be displayed in the Toolbox panel

Step 4

Select the Image List control from the Toolbox panel and drag it onto your form.

Select the Image List control from the Toolbox panel      Drag the Image List control to your form

Part 2 - Setting Image List properties

Step 1

Right click the Image List control and select Properties from the drop down menu. This will display the property dialog for the control.

Right click the control, and select Properties from the menu to display the options for the Image List

Step 2

From the General tab, select or enter the size of the images that you want to use in this Image List. Depending on which sets you own, this may be 16x16, 24x24, 32x32, 48x48 or 64x64). Make sure that the UseMaskColor box is checked.

Select the size of the image you wish to use in this Image List

Step 3

Click the Color tab, and select MaskColor from the Properties list. This tells the Image List what colour should be made transparent in the icons. Using the Color Palette list, scroll down until you find Magenta and select it and then click the Apply button.

Select the MaskColor item in the Color Properties list      Select Magenta in the Color Palette list

Part 3 - Adding icons to the Image List

Step 1

Select the Images tab in the Image List Property Pages dialog. Click the Insert Picture button, which will display a standard Windows Open File dialog, where you may select a bitmap (.BMP) image from one of the glyFX folders.

Click the Insert Picture button in the Image List Property Pages window to insert icons into the Image List

Step 2

Once you have selected an image (or multiple images), the Image List Property Pages dialog will display the icon you have added. You can continue adding as many images as you need (you can always edit the contents of the ImageList at a later stage).

Image List Property Pages window with an icon added

Part 4 - Using the Image List

This part demonstrates how to use the Image List with a standard toolbar control. The procedure is very similar for other controls that support the Image List. This includes third party controls from other vendors.

Step 1

Select the Tool Bar control from the Toolbox panel. Click on the form to insert the control.

Select the Tool Bar control from the Toolbox panel      Click on the form to insert the Tool Bar Control

Step 2

Right click on the Tool Bar control, and click Properties from the drop down menu to display the Tool Bar Property Pages dialog.

Right click the Tool Bar and select Properties

Step 3

On the General tab, click the ImageList drop down and select the Image List control you have added.

In the Tool Bar Property Pages window, select the Image List you want to use

Step 4

Select the Buttons tab, so that you can add button controls to your Tool Bar. Now click Insert Button to create a new tool button. Set the Image property to the index of the image you want to use (in our case, it is the first image) and click OK.

Click Insert Button to create a tool button control on your Tool Bar      Set the Image property to the index of the icon you want to use

Step 5

The final result - a Tool Bar control, with a button using a high quality glyFX icon!

The final result - a Tool Bar using a high quality glyFX icon

Embedding: Part 1 - Adding images to controls

This example shows how to add an image directly to a Command Button control. The method is similar for other controls that support images, including ones from third party vendors.

Step 1

Select the Command Button control in the Toolbox panel, and drag it to your form.

Command Button control in the Toolbox panel      Drag the button to your form

Step 2

In the Properties panel, click the Picture editor button. This will display a standard Windows Open File dialog, where you need to select a bitmap (.BMP) or gif (.GIF) image from one of the glyFX folders.

In the Properties panel, click the Picture editor button to select an icon

Step 3

Click the MaskColor drop down in the Properties panel, to display the colour editor and select the Magenta colour. Alternatively you can enter &H00FF00FF& directly into the text box. Now scroll down to the UseMaskColor property and set it to true. This will allow Visual Basic to make the background colour of the icons transparent.

Set the MaskColor property to Magenta      Set the UseMaskColor property to true to make the icons transparent

Step 4

Set the buttons Style property to Graphical - this allows it to display the icon.

Set the buttons Style property to Graphical

Step 5

The final result - a Command Button containing a high quality glyFX icon!

A Command Button containing a high quality glyFX icon!

My Account

Lost your password? Create account!