Image List Editor
- 6 minutes to read
The Image List Editor is a dialog you can use to populate an image list (TcxImageList) with images at design time.
This dialog allows you to do the following:
- Add images
- Replace images
- Move images
- Delete images
Invoke the Image List Editor
The image list uses the TdxSmartImage component that allows you to store the following images:
- Simple bitmaps (BMP)
- Graphics Interchange Format (GIF) images with animation support
- Joint Photographic Experts Group (JPG, JPEG, and others) images
- Portable Network Graphics (PNG) images
- Tagged Image File Format (TIFF and TIF) images
- Windows icons (ICO)
- Scalable Vector Graphics (SVG) images
You can use the Image List Editor to populate the image list with images. To invoke this dialog, double-click an image list or click the Edit… item in its context menu at design time.
Add Images
The Image List Editor allows you to populate an image list with images from different sources.
From Files
Load supported image files from the local file system. To invoke the Open dialog, click the Add Image button and select Load From Disk….
The Image List Editor resizes images if their dimensions do not match the target size selected in the Image Size combo box.
The dialog expands the loaded image up to the image list’s dimensions symmetrically with transparent pixels if the image is smaller than the list’s size. The editor shrinks loaded images to the target size if they are too large. If the loaded image’s width and height exceed the target image dimensions in two or more times, the dialog offers you to split the image into pieces and append them to the list.
Note
The dialog always resizes SVG images to the image list’s current dimensions without quality loss.
You can click the Convert All Images to 32-bit button to convert all stored images to the 32-bit (RGBA) color format and improve your application’s performance.
From the Icon Library
Add images from the DevExpress Icon Library with the Image Picker. To open it, click the Add Image button and select Load From DevExpress Icon Library….
Refer to the following topic for detailed information on how to select and load images from the DevExpress Icon Library: Image Picker.
The Image List Editor resizes images from the DevExpress Icon Library in the same way as images from files.
Replace Images
The Image List Editor allows you to replace loaded images with other images from different sources.
From Files
Replace a loaded image with an image from a file. Focus the target image in the Images gallery, click the Replace Image button, and select Replace From Disk… to invoke the Open dialog and choose another image.
From the Icon Library
Replace the loaded image with an image from the DevExpress Icon Library. Focus the target image in the Images gallery, click the Replace Image button, and select Replace From DevExpress Icon Library… to invoke the Image Picker dialog.
Select an image in this dialog and click OK to replace the image.
You can also right-click an image and select Locate in DevExpress Icon Library… to open the Image Picker at the focused image and replace it with another image.
If the image is not found, the Image List Editor displays the following warning message:
Note
You can select Locate in DevExpress Icon Library… only if the focused image is added to an image list from the DevExpress Icon Library in DevExpress VCL v21.2 or later.
The Locate in DevExpress Icon Library… item is disabled if you select multiple images.
Move Images
The Image List Editor allows you to move loaded images within an image list or between multiple image lists.
Cut, Copy, and Paste Images
The dialog supports cut, copy, and paste operations. To perform them, select specific images in the Images gallery and press Ctrl+X, Ctrl+C, and Ctrl+V, respectively. Alternatively, you can right-click the selection and choose the corresponding item in the context menu.
The copy and cut operations copy and move selected images to the clipboard, respectively. The paste operation inserts images in the clipboard at the first selected image and deletes the selection. If no image is selected, the paste operation appends images in the clipboard to the Images gallery. If the dimensions of pasted images do not match the size of the target image list, the dialog adjusts them the same way as images from other sources.
Export and Import Images
The Image List Editor allows you to export images to a file and import them from a file. Select specific images and click the Export Images button display export options.
The drop-down list has the Export as Bitmap…, Export as PNG…, and Export as SVG… items that allow you to invoke the Save As dialog and save the selection as a BMP, PNG, or SVG file.
Note
The Export as SVG… item is displayed only if one SVG image is selected in the Images gallery.
If no image is selected, the Image List Editor exports all loaded images to a file. To import exported images, load an export file as described in the section above and allow the image to be split.
You can directly import images from another image list. Click the Import Images button and select a source image list to append images from it.
Note
The Import Images button is active only if the application has at least one more image list with the same image size.
Delete Images
You can delete images from an image list with the Image List Editor. Select specific images in the Images gallery and click the Delete Images button to delete them. Click the Clear button to remove all images from the image list.
Customize Preview Settings
The Image List Editor allows you to customize preview settings for loaded images.
The following list describes UI elements you can use to customize preview settings:
- “Show Image Types” Button
- Click the Show Image Types button to show or hide the types of loaded images in the Images gallery.
- “Show Gridlines” Check Box
- Check the Show Gridlines check box to show dotted gridlines over the image preview area. The gridlines split the preview box into square sections that visualize image pixels.
- “Color Palette” Combo Box
- The Color Palette combo box allows you to display the focused SVG image preview with the selected skin palette. You can select None to display the SVG image with original colors.
- “Background Fill” Combo Box
- Use the Background Fill combo box to choose the checkered pattern or a solid color as the background for the preview box.
Apply or Cancel Changes
The Image List Editor has buttons in the bottom-right corner that allow you to apply or cancel pending changes.
The following list describes these buttons:
- OK
- The OK button applies all changes and closes the Image List Editor.
- Cancel
- The Cancel button discards all changes and closes the Image List Editor.
- Apply
- The Apply button only applies all pending changes.