Skip to main content
All docs
V24.2

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

How to: Display Images from a Data Field with Image Paths

  • 3 minutes to read

This example displays images within grid cells when a data source contains the file names of images stored on a local disk. The grid obtains the file names from the ImagePath data source field. If the file does not exist, the grid displays a generic picture.

The screenshot below shows the result.

WinForms Data Grid with Images

#Create an Unbound Column

using DevExpress.Data;
using DevExpress.XtraGrid.Columns;
using DevExpress.XtraGrid.Views.Grid;

void AddUnboundColumn(GridView view) {
    // Create an unbound column.
    GridColumn colImage = new GridColumn();
    colImage.FieldName = "Image";
    colImage.Caption = "Image";
    colImage.UnboundType = UnboundColumnType.Object;
    colImage.OptionsColumn.AllowEdit = false;
    colImage.Visible = true;

    // Add the Image column to the grid's Columns collection.
    view.Columns.Add(colImage);
}

#Create and Assign the PictureEdit to the Image Column

using DevExpress.XtraEditors.Repository;
using DevExpress.XtraEditors.Controls;

void AssignPictureEdittoImageColumn(GridColumn column) {
    // Create and customize the PictureEdit repository item.
    RepositoryItemPictureEdit riPictureEdit = new RepositoryItemPictureEdit();
    riPictureEdit.SizeMode = PictureSizeMode.Zoom;

    // Add the PictureEdit to the grid's RepositoryItems collection.
    gridControl1.RepositoryItems.Add(riPictureEdit);

    // Assign the PictureEdit to the 'Image' column.
    column.ColumnEdit = riPictureEdit;
}

#Load and Display Images

Handle the GridView’s CustomUnboundColumnData event to populate the unbound column with data. The event handler loads images, caches them in a dictionary, and displays them within appropriate cells.

using System.IO;
using System.Collections;
using  DevExpress.XtraGrid.Views.Base;

Dictionary<string, Image> imageCache = new Dictionary<string, Image>(StringComparer.OrdinalIgnoreCase);

void gridView1_CustomUnboundColumnData(object sender, CustomColumnDataEventArgs e) {
    if(e.Column.FieldName == "Image" && e.IsGetData) {
        GridView view = sender as GridView;
        string fileName = view.GetRowCellValue(view.GetRowHandle(e.ListSourceRowIndex), "ImagePath") as string ?? string.Empty;
        if(!imageCache.ContainsKey(fileName)) {
            Image img = GetImage(fileName);
            imageCache.Add(fileName, img);
        }
        e.Value = imageCache[fileName];
    }
}

Image GetImage(string path) {
    // Load an image by its local path, URL, etc.
    // The following code loads the image from te specified file.
    Image img = null;
    if(File.Exists(path))
        img = Image.FromFile(path);
    else
        img = Image.FromFile(@"c:\images\no-photo.jpg");
    return img;
}
See Also