Click here to Skip to main content
14,637,998 members
Articles » Desktop Development » Grid & Data Controls » DataGrid and DataView
Posted 16 Sep 2008


86 bookmarked

Image Thumbnail Preview in DataGridView

Rate this:
4.43 (17 votes)
Please Sign up or sign in to vote.
4.43 (17 votes)
16 Sep 2008CPOL
Shows an implementation of displaying images in a DataGridView with image resizing and paging.


This is an implementation showing how to display thumbnail images in a DataGridView, with image resizing and paging. The main reason I created this was to allow users to preview thousands of images quickly and efficiently, whilst still having the core functions of the DataGridView, e.g., selecting cells etc.

Other solutions I have seen use owner panels or other controls, which work well, but don't allow a user to select images. Also, since the controls are owner drawn, they don't have the built-in events like SelectIndexChanged etc., which, in my scenario, makes them unusable. Other solutions I have seen only display a main image with previous and next previews, like a film strip preview. Again, I couldn't use them since I had a requirement to display thousands of images and the ability to navigate quickly through them.

So, if it saves someone some time, or gives them inspiration, then good.



The implementation will attempt to dynamically create the correct number of columns to fit the DataGridView width. The images are reloaded when the DataGridView resizes to fit the correct width.

A slider control is used to select the image thumbnail size. When the value changes, the images are reloaded, with the current set of images at the new selected image size.

The number of images displayed per page can be modified through the drop down list. If the value changes, then the images are redisplayed from the beginning; this is purely to make the implementation easier!


The column widths are calculated using the following code, which allows us to dynamically create the required number of columns to fit the actual width of the DataGridView:

int numColumnsForWidth = (dataViewImages.Width - 10) / (_imageSize + 20);

Another requirement was to display the minimum number of rows required for the number of images per page, the reason being I wanted it to look as professional as possible. To calculate the number of rows, we need to calculate the number of images that are to be displayed, then use the number of columns required to fit the DataViewGrid. Next, we use the modulus operator to check for a remainder to the calculation; if we get a result, then we add another row to display the overfill:

numRows = numImagesRequired / numColumnsForWidth; 

// Do we have a an overfill for a row
if (numImagesRequired % numColumnsForWidth > 0) 
   numRows += 1; 

The code dynamically creates the columns and rows using the previously calculated values. The value of 20 is simply a value used to create a border around the image, so that the user can see what images are selected:

// Dynamically create the columns
    dataViewImages.Columns[index].Width = _imageSize + 20;

// Create the rows
for (int index = 0; index < numColumnsForWidth; index++)
    DataGridViewImageColumn dataGridViewColumn = 
                            new DataGridViewImageColumn();

    dataViewImages.Rows[index].Height = _imageSize + 20;

The images are dynamically loaded from a previously loaded List<string> variable, which contains the image paths. The actual images are loaded from the file system. The code assigns the file name to the tooltip so that the image can be easily identified:

// Load the image from the file and add to the DataGridView
Image image = Helper.ResizeImage(_files[index], 

dataViewImages.Rows[rowIndex].Cells[columnIndex].Value = image;
dataViewImages.Rows[rowIndex].Cells[columnIndex].ToolTipText = 

The above code references a Helper.ResizeImage function, which is a simple routine that will, strangely enough, resize an image in memory:

public static Image ResizeImage(string file,
                                     int width,
                                     int height,
                                     bool onlyResizeIfWider)
    using (Image image = Image.FromFile(file))
        // Prevent using images internal thumbnail

        if (onlyResizeIfWider == true)
            if (image.Width <= width)
                width = image.Width;

        int newHeight = image.Height * width / image.Width;
        if (newHeight > height)
            // Resize with height instead
            width = image.Width * height / image.Height;
            newHeight = height;

        Image NewImage = image.GetThumbnailImage(width, 

        return NewImage;

Because some rows will have cells without images, due to the number of images being displayed not being equal to the number of rows * the number of columns, we need to set the cell to a null value, since a generic image not found icon will be displayed otherwise, which is unsightly:

// Blank the unused cells
if (numGeneratedCells > numImagesRequired)
    for (int index = 0; index < 
         numGeneratedCells - numImagesRequired; index++)
        DataGridViewCellStyle dataGridViewCellStyle = 
                              new DataGridViewCellStyle();
        dataGridViewCellStyle.NullValue = null;
        dataGridViewCellStyle.Tag = "BLANK";
        dataViewImages.Rows[rowIndex].Cells[columnIndex + 
                            index].Style = dataGridViewCellStyle;

The rest of the code deals with checking list boundary conditions to deal with situations like the user displaying less images than the number of images per page setting. Also, another key check is to ensure that we can display all the images when we get to the end of the list.


  • v1.0.0 - Initial release.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Mark Woan
United Kingdom United Kingdom
No Biography provided

Comments and Discussions

QuestionAdding file name over every images Pin
Member 119680732-Oct-16 17:51
MemberMember 119680732-Oct-16 17:51 
GeneralMy vote of 3 Pin
shareque27-Jun-12 20:34
Membershareque27-Jun-12 20:34 
Generalfirst comment Pin
lemonsoft30-May-12 16:25
Memberlemonsoft30-May-12 16:25 
Generalnice Pin
marcusquigley5-Feb-09 6:14
Membermarcusquigley5-Feb-09 6:14 
GeneralRe: nice Pin
marcusquigley5-Feb-09 6:41
Membermarcusquigley5-Feb-09 6:41 
GeneralNot able to open in Lower version Pin
Code4Help31-Dec-08 2:48
MemberCode4Help31-Dec-08 2:48 
JokeThanks! Pin
capitan_cavernicola10-Dec-08 0:59
Membercapitan_cavernicola10-Dec-08 0:59 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.