Click here to Skip to main content
13,346,664 members (65,184 online)
Click here to Skip to main content
Add your own
alternative version


53 bookmarked
Posted 24 Feb 2007

A C# based thumbnail viewer

, 19 May 2007
Rate this:
Please Sign up or sign in to vote.
A C# based thumbnail viewer employing a BackgroundWorker to load images in the background.

JThumbnailView Demo project


Many a times we come across situations where it is required to show images from a directory as thumbnails. This control JThumnailView does exactly that. The additional feature of this control is that it uses a background worker to load images asynchronously.


It all started when I wanted to send some photos back home electronically. Of course, I could do that using e-mails; however, when doing so, it would mostly be zipped and sent. When I saw my parents struggling to keep track of where they saved the photos for later viewing, I realised that I needed to provide them something which could be controlled by me. Hence, I started developing an application which once installed on a machine will serve as an automatic picture downloader and a basic viewer. Thus, I was faced with the following challenges:

  1. How to do an automatic download? My answer came in the form of the edtFTPnet component, with which I could go and download file(s) from an FTP server. However, this posed another problem: every time I want to send new photos, I needed some mechanism which would transparently do it without any manual intervention. That is when I decided to use an XML file which the application would read and perform the necessary action. However, once I started developing the XML file, I wanted to encrypt it and give a different extension. Hence, I used a DESCryptoServiceProvider to perform the encryption/decryption for the file. Now, all I have to do is send my file (which has a *.pfi extension) and give a password. When this file is double clicked, it will ask for a password and it will start downloading the photos automatically from my FTP site.
  2. The second challenge for me was to provide a simple photo viewer in the same application so that the user need not worry about where the photos are stored. For this, I needed two components: an Explorer-like folder viewer and a thumbnail viewer. That is when I got the WindowsExplorer component written by Rajesh Lal. Though I had to make a little modifications to suit my requirements, it saved me a lot of time.
  3. The only thing remaining was a thumbnail viewer. I searched for a good one, but most of them were for ASP.NET. Finally, I saw one, but again it was based on VC++. That is when I decided to write one. I made it a control so that others could re-use it. This article describes the JThumnailView component I created for this purpose. For those who want the full version of the application, please contact me by email. I will be more than happy to provide it (though it is still in the beta phase!!!).

Using the Code

The component is very simple to understand. It has been derived from the standard ListView control so that I need not worry about things like scrolling, sorting etc. :).

The following are the main properties:

public int ThumbNailSize; //default value: 95

By default, it has a value of 95 (Windows Explorer seemed to use this size, so I made it the default).

public int ThumbBorderColor; //default value: Color.Wheat

Set this if you want the thumbnails to have a different border.

public string FolderName; //default value: Application folder

This is the directory from which the thumbnails are to be loaded. The component has another property CanLoad which should be set to true to load the images. This should be set to true on the constructor of the form.

One of the main problems with most of the thumbnail viewers is that if the number of files in a directory is high, then the viewer takes a lot of time to load. To avoid this, the technique I am using is to create a default thumbnail which is just a square of the thumbnail size and set this as the image-index for all the items. This will give the user an impression that the thumbnails have been loaded. Then the actual thumbnails are loaded in the background using a BackgroundWorker.

private BackgroundWorker myWorker = new BackgroundWorker();

The loading of items is handled in the method ReloadItems().

private void ReLoadItems() 
    string strFilter = "*.jpg;*.png;*.gif;*.bmp"; 
    List fileList = new List(); 
    string[] arExtensions = strFilter.Split(';'); 
    foreach (string filter in arExtensions) 
        string[] strFiles = Directory.GetFiles(folderName, filter); 
        for (int i = 0; i < strFiles.Length; i++) 
            FileInfo fiTemp = new FileInfo(strFiles[i]); 
            Items.Add(fiTemp.Name, 0).Tag = strFiles[i]; } 
        if (myWorker != null) { myWorker.RunWorkerAsync(fileList); } 

The AddDefaultThumb() method creates a default thumbnail as mentioned above. The actual thumbnails are drawn in the DoWork() event of the BackgroundWorker. The thumbnails are drawn using the usual graphic methods.

Points of Interest

The use of the BackgroundWorker definitely improved the efficiency of the viewer considerably. Another interesting thing was the use of PixelOffSetMode and InterpolationMode of the Graphics object. When I drew the thumbnails first, I could not match the clarity of the images in the Windows Explorer thumbnail. That is when I tried out the various PixelOffSetModes and the InterpolationModes. I achieved the desired result with the following combination:

PixelOffsetMode = PixelOffsetMode.None;

InterpolationMode = InterpolationMode.HighQualityBicubic;


Version 1.1

Thanks for all the valuable comments, I have modified the component to include some more checks :). I have also modified the demo to include a minimal picture viewer. Thanks once again to all of you, especially Michael for his special interest and feedback. I still have not really tested dynamic dispose and creation, and hence not sure whether the problem is still there.


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


About the Author

Sreejai R. Kurup
Web Developer
United Arab Emirates United Arab Emirates
No Biography provided

You may also be interested in...

Comments and Discussions

GeneralMy vote of 1 Pin
yoke27-Aug-12 20:26
memberyoke27-Aug-12 20:26 
GeneralMy vote of 5 Pin
manoj kumar choubey26-Feb-12 21:56
membermanoj kumar choubey26-Feb-12 21:56 
GeneralNice, but... Pin
Doncp10-Jan-11 12:30
memberDoncp10-Jan-11 12:30 
GeneralAbout the source code Pin
Cisily13-May-09 0:30
memberCisily13-May-09 0:30 
GeneralStill inconsistency with the thumbnail and the filename Pin
martinmoesbypetersen10-Jan-09 1:24
membermartinmoesbypetersen10-Jan-09 1:24 
GeneralThumbnail Generation Pin
Member 352586317-Dec-08 23:09
memberMember 352586317-Dec-08 23:09 
GeneralMy vote of 1 Pin
Wertugo5558-Dec-08 22:53
memberWertugo5558-Dec-08 22:53 
GeneralGreat Work!! Pin
Richard Blythe10-Oct-08 20:11
memberRichard Blythe10-Oct-08 20:11 
Generalfull version of the application Pin
Member 36825483-Aug-08 20:55
memberMember 36825483-Aug-08 20:55 
GeneralError Pin
mfmanca30-Oct-07 10:57
membermfmanca30-Oct-07 10:57 
GeneralRe: Error Pin
Edward Ceballos29-May-08 23:41
memberEdward Ceballos29-May-08 23:41 
Generalgetting filename of selected items Pin
Elsys19-Oct-07 19:05
memberElsys19-Oct-07 19:05 
GeneralStop BackGroundWorker Pin
fracasado31-Aug-07 8:56
memberfracasado31-Aug-07 8:56 
GeneralRe: Stop BackGroundWorker Pin
Sreejai R. Kurup31-Aug-07 19:30
memberSreejai R. Kurup31-Aug-07 19:30 
Questioncan this be modded to work for mpeg thumbnails ? Pin
UltraWhack31-May-07 8:09
memberUltraWhack31-May-07 8:09 
AnswerRe: can this be modded to work for mpeg thumbnails ? Pin
Sreejai R. Kurup31-May-07 19:03
memberSreejai R. Kurup31-May-07 19:03 
GeneralRe: can this be modded to work for mpeg thumbnails ? Pin
UltraWhack1-Jun-07 3:22
memberUltraWhack1-Jun-07 3:22 
GeneralBug: Thumbnail image inconsistency with real image Pin
mpgjunky17-May-07 7:06
membermpgjunky17-May-07 7:06 
GeneralCrashes if you make it start loading new thumbnails before it's finished Pin
mrhaan11-Apr-07 8:40
membermrhaan11-Apr-07 8:40 
GeneralBackgroundWorker Pin
BushRob27-Mar-07 13:11
memberBushRob27-Mar-07 13:11 
GeneralRe: BackgroundWorker Pin
Sreejai R. Kurup4-Apr-07 20:48
memberSreejai R. Kurup4-Apr-07 20:48 
GeneralRe: BackgroundWorker Pin
wmhp120-Apr-07 13:15
memberwmhp120-Apr-07 13:15 
AnswerRe: BackgroundWorker [modified] Pin
mpgjunky17-May-07 7:18
membermpgjunky17-May-07 7:18 
GeneralNo source code Pin
cykophysh3924-Feb-07 22:53
membercykophysh3924-Feb-07 22:53 
GeneralRe: No source code Pin
Sreejai R. Kurup25-Feb-07 1:01
memberSreejai R. Kurup25-Feb-07 1:01 

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.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.180111.1 | Last Updated 19 May 2007
Article Copyright 2007 by Sreejai R. Kurup
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid