Click here to Skip to main content
Click here to Skip to main content

A C# based thumbnail viewer

, 19 May 2007 CPOL
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

Introduction

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.

Background

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. Smile | :) .

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() 
{ 
    BeginUpdate(); 
    Items.Clear(); 
    LargeImageList.Images.Clear(); 
    AddDefaultThumb(); 
    
    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); 
        fileList.AddRange(strFiles); 
        for (int i = 0; i < strFiles.Length; i++) 
        { 
            FileInfo fiTemp = new FileInfo(strFiles[i]); 
            Items.Add(fiTemp.Name, 0).Tag = strFiles[i]; } 
        } 
        
        fileList.Sort(); 
        EndUpdate(); 
        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;

History

Version 1.1

Thanks for all the valuable comments, I have modified the component to include some more checks Smile | :) . 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.

License

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

Share

About the Author

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

Comments and Discussions

 
GeneralMy vote of 1 Pinmemberyoke27-Aug-12 20:26 
GeneralMy vote of 5 Pinmembermanoj kumar choubey26-Feb-12 21:56 
GeneralNice, but... PinmemberDoncp10-Jan-11 12:30 
GeneralAbout the source code PinmemberCisily13-May-09 0:30 
GeneralStill inconsistency with the thumbnail and the filename Pinmembermartinmoesbypetersen10-Jan-09 1:24 
GeneralThumbnail Generation PinmemberMember 352586317-Dec-08 23:09 
GeneralMy vote of 1 PinmemberWertugo5558-Dec-08 22:53 
GeneralGreat Work!! PinmemberRichard Blythe10-Oct-08 20:11 
GeneralError Pinmembermfmanca30-Oct-07 10:57 
GeneralRe: Error PinmemberEdward Ceballos29-May-08 23:41 
Generalgetting filename of selected items PinmemberElsys19-Oct-07 19:05 
GeneralStop BackGroundWorker Pinmemberfracasado31-Aug-07 8:56 
GeneralRe: Stop BackGroundWorker PinmemberSreejai R. Kurup31-Aug-07 19:30 
Questioncan this be modded to work for mpeg thumbnails ? PinmemberUltraWhack31-May-07 8:09 
AnswerRe: can this be modded to work for mpeg thumbnails ? PinmemberSreejai R. Kurup31-May-07 19:03 
GeneralRe: can this be modded to work for mpeg thumbnails ? PinmemberUltraWhack1-Jun-07 3:22 
GeneralBug: Thumbnail image inconsistency with real image Pinmembermpgjunky17-May-07 7:06 
GeneralCrashes if you make it start loading new thumbnails before it's finished Pinmembermrhaan11-Apr-07 8:40 
GeneralBackgroundWorker PinmemberBushRob27-Mar-07 13:11 
GeneralRe: BackgroundWorker PinmemberSreejai R. Kurup4-Apr-07 20:48 
GeneralRe: BackgroundWorker Pinmemberwmhp120-Apr-07 13:15 
AnswerRe: BackgroundWorker [modified] Pinmembermpgjunky17-May-07 7:18 
GeneralNo source code Pinmembercykophysh3924-Feb-07 22:53 
GeneralRe: No source code PinmemberSreejai R. Kurup25-Feb-07 1:01 

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

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

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