Image Gallery and Context-Dependent Images
- 4 minutes to read
The DevExpress Image Gallery provides access to a large set of icons drawn by our designers. You are free to use these images in your applications as icons within all DevExpress components and controls.
Launch the Image Gallery
When you specify an icon for any non-DevExpress UI element at design time, the standard Visual Studio “Select Resource” dialog invokes.
For DevExpress controls, this dialog is placed inside a custom “Image Picker” dialog as a tab.
In this dialog, switch to the “DX Image Gallery” tab to browse and choose DevExpress Image Gallery icons.
Image Gallery UI
The figure below illustrates the DevExpress Image Gallery interface.
Category List
Icons in the Image Gallery are grouped by categories: arrows, mail, navigation, zoom, etc. Check boxes in this list allow you to hide all images that belong to a specific category.
Size Selector
All Image Gallery icons are available in two sizes - 16x16 and 32x32 pixels. Use these check boxes to filter icons by the required size.
Color Palettes
Check boxes in this group allow you to choose images by color scheme.
- Colored - default image set, contains volumetric multi-color images.
- Grayscale - flat dark-gray icons that fit monochrome UIs.
- DevAV - a set of flat icons for Hybrid UI applications.
- Office 2013 - flat icons inspired by Office 2013 applications.
Resource Selector
You can add selected icons to either form or project resources. DevExpress icons added to project resources can be assigned to non-DevExpress controls using the standard Visual Studio “Select Resource” dialog.
Search Panel
Allows you to enter text strings (e.g., “New”) to find required icons.
Gallery Icons
Images that fit your filter criteria are shown in the large area at the dialog’s right. For your convenience, icons are placed under their category names.
Image URI (Context-Dependent Images)
The DevExpress Image Gallery provides a set of images (icons), which when assigned to certain DevExpress controls and components, change their appearance depending on the current application context. The application context taken into account involves the current skin and image size (large or small) required by the control/component.
The following screenshots demonstrate how the same context-dependent images are painted by toolbar buttons in different skins.
DevExpress controls and components that support context-dependent images provide ImageUri properties of the DxImageUri type. The DxImageUri.Uri property addresses the required image in the DX Image Gallery with the image’s common name. For instance, for the images above, the ImageUri properties of toolbar buttons address images using the “Open”, “Save”, “SaveAll”, “Undo” and “Redo” common names. Once you specify an image’s common name, the control will automatically display the correct image version depending on the current context.
At design time, to specify a context-dependent image for a control/component, select the control/component and click the ellipsis button for the ImageUri property (some controls allow you to customize frequently used properties - including the ImageUri property - via smart tag menus). Click the ellipsis button to invoke the Image Picker, which displays all available context-dependent images. Select an image and click OK.
In code, you can specify the ImageUri property as shown below. Common names of images can be found in the Image Picker dialog. Hover over an image to display its common name as a tooltip.
As mentioned above, the actual displayed image is dependent on the current application context. The palette of the displayed image is automatically determined based on the applied skin.
The size of the displayed image is also determined automatically depending on the use case. For instance, the same button in the Ribbon Control can display either a large or small icon. The Ribbon Control supports automatic replacement of large button images with small ones when the control’s width is reduced. When an image is assigned to a button with the ImageUri property, the large or small version of the image will be automatically chosen from the DX Image Gallery based on the required image size.
The ImageUri property overrides other properties that are used to provide icons for the same UI element (Image, Glyph, LargeGlyph, ImageIndex, etc.).
Note
The DevExpress.Images.v17.2 library needs to be deployed when assigning context-dependent images to visual elements.
Accessing Image Gallery Icons From Code
Image Gallery provides no public API to access its images from code. As a workaround, you can use an ImageCollection[](xref:DevExpress.Utils.SharedImageCollection) populated with Gallery icons. Collection items can then be accessed by a zero-based index notation.