Image List Editor

From RAD Studio
Jump to: navigation, search

Go Up to Property Editors Index

Use the ImageList Editor at design time to add bitmaps and icons to a TImageList component.

While working in the image list editor, you can click Apply to save your current work without exiting the editor, or click OK to save your changes and exit the dialog. Using the Apply button is especially useful because once you exit the dialog, you cannot make any more changes to the existing images.

To Display the ImageList Editor

  1. Select the TImageList object in either the Form Designer or the Structure View.
  2. Do either of the following:
    • Double-click the TImageList object.
    • Right-click the TImageList object and select ImageList Editor from the context menu.


The Images pane shows preview images of all images in the current TImageList image list. Each image preview is displayed within a 24x24 area for easier viewing of multiple images. Numbers beneath image previews indicate zero-based positions of images within the image list. You can drag an image preview to its new position to change an image position in the image list.

Select an image preview to show the image in the Selected Image pane.

If you add an image (using the Add button) to the image list, you can - during the current invocation of the ImageList editor - alter properties of the selected image using the Transparent Color, Fill Color, and Options controls. However, once the ImageList editor is closed, these properties are fixed. If you select this image during new invocations of the ImageList editor, the Transparent Color, Fill Color, and Options controls are grayed and you cannot change any properties of the image.


Opens the Add Images dialog box, that lets you select one or more images to add to the image list. The added image appears highlighted in the preview list. If you have added several images, their numbers obtain sequential values in the image list.

If a bitmap is larger than the image list width or height by even increments, a prompt appears asking whether the ImageList editor should divide the image into several images. This is useful for toolbar bitmaps, which are usually composed of several small images in a sequence and stored as one larger bitmap.


Opens the Add Images dialog box, that lets you select an image to replace the selected image.


Removes the selected images from the image list.


Removes all images from the image list.


Opens the Export Images dialog box, which lets you to save the selected image to a .BMP file. This file contains the bitmap in its currently altered state, including any cropping or stretching.

Selected Image

The Selected Image pane displays the image currently selected in the Images pane. Click another image in the Images pane to display the other image.

Transparent Color

Use the Transparent Color drop-down to specify which color is used to create a mask for drawing the image transparently. The default transparent color is the color of the left-most pixel of the bitmap in the bottom line. You can also change the transparent color by clicking directly on a pixel in the selected image.

When an image has a transparent color, any pixels in the image of that color are not rendered in that color, but instead appear transparent, allowing whatever is behind the image to show through.

If the image is an icon, Transparent Color appears grayed and the transparent color is set to clNone. This is because icons are already masked.

Fill Color

Use the Fill Color drop-down to specify a color that is added around the edges of the selected image when it is smaller than the dimensions indicated by the Height and Width properties of the image list control.

This control is grayed if the selected image completely fills the dimensions specified by the image list (that is, if it is at least as big as the Height and Width properties). This control is also grayed for icon images, because icons act like masks with any outer boundaries transparent.


Use the Options radio buttons to indicate how the image list should render the selected image if it does not fit exactly in the dimensions specified by the Height and Width properties of the image list. (These buttons are disabled for icons.)

Option Description
Crop Displays the section of the image beginning at the top-left, extending the image list width and height towards the bottom-right.
Stretch Causes the entire image to stretch so that it fits the image list width and height.
Center Centers the image within the image list width and height. If the image width or height is larger than the image list width or height, the image may be clipped.

See Also