Other DevExpress WinForms Cheat Sheets
DevExpress controls and components contain ~ImageOptions properties that allow you to specify images.
- Use the ~ImageOptions.Image property to specify a raster image.
- Use the ~ImageOptions.SvgImage property to specify a vector image, and the ~ImageOptions.SvgImageSize property to set the size. DevExpress controls can choose SVG icon colors according to the current application skin and SVG skin palette.
Examples of ~ImageOptions properties in controls: SimpleButton.ImageOptions, GridColumn.ImageOptions, BarButtonItem.ImageOptions, LayoutControlItem.ImageOptions, LabelControl.ImageOptions.
To display images in DevExpress WinForms data-aware controls (Gantt Control, Data Grid, Tree List, Vertical Grid, etc.) you can create an Unbound Column and assign cell images using the ColumnView.CustomUnboundColumnData event. Also, in this event, you can specify an empty image according to your usage scenario.
To display images in this column, use the PictureEdit editor as a column editor. See these articles for details:
Replace Default Cell Editors at Design Time
Replace Default Cell Editors.
To display icons within bound cells, you can use approaches we described here: Cell Icons.
To display images in captions of any controls supporting HTML-inspired Text Formatting, you can use the Image tag. The main idea here is to add required images to your project and then display them in the item captions using the Image tag.
Examples
Display a label with an image and the HTML-formatted text
Display icons in standalone editors
Use the editor's Properties.ContextImageOptions property.
Display images in cells of data-aware controls (Data Grid, Tree List, etc.)
If your database contains a field that stores images, create a column in a data-aware control, bind this column to the target field, and assign an in-place PictureEdit editor to this column (see ColumnEdit).
You can create an unbound column to display images that are not stored in the underlying database.
Other techniques to display icons in cells include:
- Conditional formatting - Allows you to display icons in cells to visualize different values or value ranges.
- ImageComboBox in-place editor allows you to display "value - icon" pairs (suitable for enumeration values).
- Context icons in in-place text editors - Create an in-place editor (a repository item) and use its RepositoryItemTextEdit.ContextImageOptions property to specify an image. Handle the GridView.CustomRowCellEdit event to dynamically assign the created in-place editor to target cells.
- Show the HTML-formatted text with icons - Use the in-place RepositoryItemHypertextLabel editor.
- Handle the CustomDrawCell event to manually paint images (see GridView.CustomDrawCell and TreeList.CustomDrawNodeCell).
For more information, refer to the following article: Cell Icons
Even though this article relates to Data Grid, the same approaches can be used for other data-aware DevExpress controls (Gantt Control, Tree List, Vertical Grid, etc.).
Display an image in a tooltip
Use a SuperToolTip object to show a tooltip. Assign an image to this tooltip's item from the ToolTipItem.ImageOptions.Image or ToolTipItem.ImageOptions.SvgImage property.
Display context dependent raster images
Use a control's ImageOptions.ImageUri property to assign a raster image that adjusts its size and color scheme depending on the applied skin and the control's size. Refer to the following help article for details: Image Gallery and Context-Dependent Images.
Display image instead of text in a cell
You can hide the bound column by settings its Column.Visible to False and add a new Unbound Column instead. Then handle the CustomUnboundColumnData event and obtain the cell text from your data source in the event handler, load an image and assign it to the e.Value parameter.
Display image and check box in BarCheckItem
You can use HTML-inspired Text Formatting for this. The main idea here is to add required images to your project and then display them in the item captions using the Image tag:
C#barCheckItem1.Caption = "<image=#exporttocsv> CSV";