KB Article T914488
Visible to All Users

Display Images in Controls - WinForms Cheat Sheet

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

Use HyperlinkLabelControl.


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:

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";

Help us improve this article

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.