Support

glyFX Guides : Microsoft Visual Studio .NET

Using glyFX icons in Microsoft Visual Studio .NET

This document outlines the basic procedure on how to use the glyFX toolbar images with Microsoft Visual Studio .NET tools. The steps for using glyFX icons on your toolbars, buttons and other controls is the same, regardless of whether you use Visual Basic, Visual C#, Visual C++ or Visual J#, as the components are common to all.

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

Image Lists

Image Lists allow you to keep a single object that contains all of your icons in one place. The advantage is that you can edit the images in the Image List, and the controls will automatically update if you have made any changes to those icons. If you use a particular image on more than one control it also lets you store just one copy of the image within the application, rather than within each control. This guide is broken up into 4 seperate parts;

Embedding

Embedding an image directly into a control is a fast way of assigning icons to your user interface elements. The selected control will directly store the image resource. This method is not as efficient as using Image Lists, but is sometimes necessary as some controls are not compatible with Image Lists. This guide has just 1 part;

Image Lists: Part 1 - Adding an Image List

Step 1

Select the Windows Form components in the Toolbox panel.

Select Window Forms component section in the Toolbox panel

Step 2

\

Scroll down the list, until you find the ImageList component, and select it.

Scroll down the list until you find the ImageList component      Select the ImageList component

Step 3

Drag the ImageList component to your form, it will automatically appear beneath the form designer.

Drag the ImageList to your form, and it will appear beneath the form designer

Image Lists: Part 2 - Setting Image List properties

Step 1

Click the TransparentColor editor button in the Properties panel. Scroll down to Fuchsia and double click it (this is the default background colour for the glyFX bitmap files).

Click the TransparentColor editor in the Properties panel, and select Fuchsia

Step 2

Click the ColorDepth editor button in the Properties panel. Select the Depth16Bit or Depth24Bit option and double click it. Please note, the images will also work when set to Depth8bit (for 256 colour systems), however their quality will be lower.

Click the ColorDepth editor in the Properties panel, and select Depth24Bit

Step 3

Depending on what size you require, edit the ImageSize Width and ImageSize Height properties to the required size (depending on which sets you own, this may be 16, 24, 32, 48 or 64). Both dimensions must be the same.

Modify the image Width and Height settings, depending on which size you are planning to use

Step 4

Click the Images editor button to invoke the Image Collection Editor (where you can add individual icons to the Image List).

Click the Images editor button to start the Image Collection Editor

Image Lists: Part 3 - Adding icons to the Image List

Step 1

Click the Add button in the Image Collection Editor window. This will display a standard Windows Open File dialog, where you may select a bitmap (.BMP) or gif (.GIF) image from one of the glyFX folders.

Click the Add button in the Collection Editor window to insert icons into the ImageList

Step 2

Once you have selected an image, the Collection Editor 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).

Collection Editor window with an icon added

Image Lists: Part 4 - Using the Image List

This part demonstrates how to use the ImageList with a standard button control. The procedure is identical for other controls that support the ImageList.

Step 1

Select the Button control from the Toolbox panel (which can be found in the Windows Forms section) and drag the button to the form.

Select the Button control from the Toolbox panel      Drag a button to your form

Step 2

Click the ImageList dropdown button in the Properties panel, and select the ImageList control you want to use.

In the Properties panel, select the ImageList you want to use

Step 3

Click the ImageIndex dropdown button in the Properties panel, and select the icon that you want to use on this button (or other control).

Using the Properties panel, click the ImageIndex button to select the icon you want to use on the button

Step 4

The final result - a button control containing a high quality glyFX toolbar icon!

The final result - a button control with a high quality glyFX icon

Embedding: Part 1 - Adding images to controls

This example shows how to add an image directly to a Button control, the procedure is similar for other controls.

Step 1

Select the Windows Form components in the Toolbox panel.

Select Window Forms component section in the Toolbox panel

Step 2

Select the Button control from the Toolbox panel and drag the button to the form.

Select the Button control from the Toolbox panel      Drag a button to your form

Step 3

Click the Image editor button in the Properties panel. This will display a standard Windows Open File dialog, where you need to select a gif (.GIF) or png (.PNG) image from one of the glyFX folders.

Do not select the bitmap (.BMP) images, as these will display with a Fuschia background (Visual Studio can only mask background colours when you use an Image List). Please see our FAQ page for details on how to get the PNG and GIF versions of the images.

In the Properties panel, click the Image button and select an image file

Step 4

The final result - a button control containing a high quality glyFX toolbar icon!

The final result - a button control with a high quality glyFX icon

My Account

Lost your password? Create account!