Skip to main content

Image Picker

  • 7 minutes to read

Image Picker is a design-time dialog that allows you to select images from predefined sources, such as the DevExpress Icon Library, or create and manage custom icon collections for use in controls and image list components.

VCL Shared Libraries: The Image Picker Dialog

Image Picker UI

The Image Picker dialog has three or four tabs depending on its target.

Vector Icons Tab

Vector Icons is the main tab of the Image Picker where you can select SVG icons from the DevExpress Icon Library.

VCL Shared Libraries: The Vector Icons Tab Layout

The Vector Icons tab has the following UI elements:

Image Gallery
The Image Gallery lists all icons from selected collections and categories. You can use this gallery to preview and select icons.
Search Box
The Search box at the top of the Image Gallery allows you to filter out all icons whose names do not include the search string.
Collection Box

The Collection box lists available icon collections. The Image Gallery displays icons from selected collections.

You can click the Add a custom collection button to add a custom icon collection and use it in the same manner as any collection shipped with the DevExpress Icon Library.

Categories Box
The Categories box lists available categories from all icon collections regardless of their current visibility. You can uncheck individual collections and categories to narrow down your search.
Selection Box
The Image Picker dialog displays the Selection box only when the dialog is invoked for a TcxImageList or TcxImageCollection component. The Selection box contains all icons the dialog adds to the target list when you click the OK button or press the Enter key.

The Image Gallery displays images from the DevExpress Icon Library. You can position the mouse pointer at an image to display the full path to the image as well as its name, category, and collection.

VCL Shared Libraries: An Icon Hint in the Image Gallery

You can right-click an icon in the gallery to display a context menu.

VCL Shared Libraries: The Image Gallery Context Menu

The Image Gallery context menu includes the following options:

Show in Explorer…
Runs Windows Explorer and opens the folder where the target icon is located. Unlike all other options, the Image Gallery context menu always includes this option.
Add to Selection
Adds the current selection in the Image Gallery to the Selection box.
Select All
Selects all icons in the Image Gallery. You can drag and drop the current selection to the Selection box.
Select All in the Current Category
The menu item caption depends on the category of the target icon. This menu item selects all icons in the current category. You can add the current selection to the Selection box.
Deselect All
Clears selection in the Image Gallery.
Deselect All in the Current Category
The menu item caption depends on the category of the target icon. This menu item deselects all icons in the current category.

Collection Box and Custom Collection Management

The Collection box displays and manages the list of available icon collections. You can check or uncheck a category to display or hide all icons that belong to the category in the Image Gallery. The Categories box lists all categories from all icon collections regardless of their visibility.

Note

Custom/third-party icons may require pre-processing with our SVG Icon Builder tool to adapt these icons to DevExpress VCL skins and palettes. Our tool can adjust icon size and color settings according to DevExpress guidelines.

To add a custom icon collection, click the Add a custom collection button in the Image Picker dialog, select the target folder in a shell dialog, and click the Select button.

VCL Shared Libraries: Add a Custom Icon Collection

Like predefined DevExpress Icon Library collections, the added folder should include nested category folders populated with images. The Image Picker dialog uses the target folder’s name as a collection name displayed in the Collection box. To remove a selected custom collection from the DevExpress Icon Library, select the required collection and click the Remove the selected collection button:

VCL Shared libraries: Remove a Custom Icon Collection

Note

The DevExpress Icon Library maintains the list of custom icon collections in the following Microsoft Windows® Registry directory:

%Computer%\HKEY_CURRENT_USER\SOFTWARE\Developer Express\IconLibrary\Collections

You cannot remove predefined icon collections from the DevExpress Icon Library. A custom collection remove operation does not remove the corresponding folder from the file system.

Selection Box

The Image Picker dialog displays the Selection box only when the dialog is invoked for a TcxImageList or TcxImageCollection component. The Image Picker adds all icons in the Selection box to the target list if you click the OK button or press the Enter key.

To populate the Selection box with icons from the Image Gallery, you can double-click the required icons, drag-and-drop the current selection into the Selection box, or select the Add to Selection item in the gallery context menu.

Like the Image Gallery, the Selection box can display a context menu for an icon. You can use the menu to manage selection, remove individual icons from the box, or open the source folder in Windows Explorer.

VCL Shared Libraries: The Selection Box Context Menu

To remove individual icons from the Selection box, you can also double-click them or press the Delete key when at least one icon is selected.

Raster Icons Tab

The Raster Icons tab lists all collections and categories of bitmap icons in the DevExpress Icon Library.

VCL Shared Libraries: The Raster Icons Tab Layout

Compared to Vector Icons, the Raster Icons tab contains an additional Size box that allows you to filter out available icons by size.

Font Icons Tab

The Font Icons tab allows you to select and use font icons available in Microsoft Windows® 10 and newer operating systems.

VCL Shared Libraries: The Font Icons Tab Layout

The Image Picker dialog allows you to use font icons in the same manner as any other icon from custom collections or the DevExpress Icon Library. In addition, you can change the color of icons selected in the Image Gallery before you add them to the Selection box as follows:

VCL Shared Libraries: Change Font Icon Color

Important Font Icon Limitations

A font icon is an SVG image that contains a character from a special font shipped with the operating system. Since an SVG image with text contains only font glyph references rather than actual font glyphs, an application can display a font icon only if the corresponding font is available in the target operating system:

Microsoft Windows® 11

This operating system ships with the following special fonts: Segoe Fluent Icons (default) and Segoe MDL2 Assets.

DevExpress-powered applications use glyphs from the Segoe Fluent Icons font to display font icons:

VCL Shared Libraries: A Font Icon Example in Windows 11

Microsoft Windows® 10

This operating system ships with the Segoe MDL2 Assets special font:

VCL Shared Libraries: A Font Icon Example in Windows 10

Important

Developer Express Inc does not embed, include, or distribute font icons available in the Image Picker dialog. You must independently review and agree to license third-party icon collections form their respective owners. Use these font icons only if client machines run Microsoft Windows® 10 or newer.

Picture Editor Tab

The Image Picker dialog includes the Picture Editor tab when a user clicks an ellipsis button of a Glyph or Image property of a DevExpress component or UI element that can display only one image.

VCL Shared Libraries: A Glyph Property Ellipsis Button

The Picture Editor tab allows you to manage an image associated with one component or UI element.

Picture Editor Tab

The Picture Editor tab has the following buttons:

Load…
Invokes the Open dialog and allows you to load an image from the file system.
Save…
Invokes the Save As dialog and allows you to save an image in the preview box to a file.
Clear
Removes the current image.
Import…
Displays a list of available image sources (controls) in a drop-down menu. Click a menu item to load the corresponding image.