Click here to Skip to main content
13,250,883 members (52,826 online)
Click here to Skip to main content
Add your own
alternative version


73 bookmarked
Posted 1 Oct 2004

Showing the Image file thumbnail view in ListView control using VC++ 6.0

, 1 Oct 2004
Rate this:
Please Sign up or sign in to vote.
This sample program shows how to create a thumbnail view in ListView control.

Sample Image - Simple_Thumbnail_Listview.jpg


CListImageCtrl is MFC control derived from the CListCtrl class. The control has an extended feature for loading thumbnail view to the List control. It has a drag and drop functionality to get the image files from the window explorer and draw the thumbnail view for that image file. Here I have simply added a function for drawing that thing.

Step by Step procedure for creating the thumbnail

To develop the thumbnail ListView control, see the below section for step by step operations.

Create the ListImage Project

  1. Create a New Project using the VC++ - MFC AppWizard (.exe).
  2. Select the Dialog based option in the wizard - Step 1.
  3. Finish the wizard.

Now the new project classes added to the workspace (You can see the class files from the fileView tab in Project Workspace tree.

Create the ListImage class for the thumbnail image

  1. Go to the ClassView tab, select the project name and add a new MFC class by clicking the right mouse button on it.
  2. Select CListCtrl as a base class for that.
  3. Now the new class will be created in the project workspace.

How to bind the class to the listcontrol?

  1. Select the Dialog form from the ResourceView.
  2. Click the right mouse button from the form dialog and select the ClassWizard from the popup menu.
  3. Now go to Member variable section select ListControl from the control list.
  4. Press the Add variable button to add a variable for the ListControl. Select the variable type as the new created class name(ClistImageCtrl or ur added class name) in the Add member variable form.

Enable the Drop file for List Control…

  1. Select the Dialog form from the ResourceView.
  2. Open the Property window for List Control.
  3. In that check the “Accept Files” check box from the Extended Styles.

Get the dropped files from the Explorer

  1. Select the ListImage class from the classview.
  2. Open the class wizard for that.
  3. Add WM_DROPFILES Message function.
  4. OnDropFiles() function will be automatically added to the class.
void CListImageCtrl::OnDropFiles(HDROP hDropInfo) 
    WORD wNumFilesDropped = DragQueryFile(hDropInfo, -1, NULL, 0);

    CString firstFile="";
    CFile Cf;
    DWORD TmpVal;
    char szText[MAX_PATH];
    int kk=0;
    int tTot=(int)wNumFilesDropped;
    int m_TotCount;

    for (WORD x = 0 ; x < wNumFilesDropped; x++) 
        // Get the number of bytes required by the file's full pathname
        WORD wPathnameSize = DragQueryFile(hDropInfo, x, NULL, 0);

        // Allocate memory to contain full pathname & zero byte
        char * npszFile = (char *) LocalAlloc(LPTR, wPathnameSize += 1);

        // If not enough memory, skip this one
        if (npszFile == NULL) continue;
        DragQueryFile(hDropInfo, x, npszFile, wPathnameSize);

        if (firstFile=="")

        CString nFileText;
        CString nPath;
        CString pItemText=npszFile;
        CFile Cf;

        int i=pItemText.ReverseFind('\\');

        if (i==-1)
            if (i==-1)
            if (i==-1)
            if (i==-1)

            if (i!=-1)
                SetItemText(m_TotCount, 1, nPath);
                //Get File size
                if (Cf.Open(pItemText,0,0)==TRUE)
                    TmpVal = Cf.GetLength();
                    wsprintf(szText, "%lu", TmpVal);
                    if (TmpVal>1024)
                        double kTmpVal=TmpVal;
                        double kdvTmp=kTmpVal/1024;
                        if (TmpVal>1024)
                            double dTmpVal=TmpVal;
                            double dvTmp=dTmpVal/1024;
                            CString szT= 
                              ConvertDoubleToString(dvTmp) + _T(" MB"); 
                            wsprintf(szText, "%s", szT);
                            CString kszT= 
                              ConvertDoubleToString(kdvTmp) + _T(" KB"); 
                            wsprintf(szText, "%s", kszT);
                        wsprintf(szText, "%lu BYTES", TmpVal);
                    SetItemText(m_TotCount, 2, szText);
                HBITMAP bitm=LoadPicture(pItemText);
                if (bitm!=NULL)
                    CBitmap*    pImage = NULL;    
                    pImage = new CBitmap();                    
                    int imgP=m_imageList.Add(pImage,RGB(0,0,0));
                    SetItem(m_TotCount, 0, LVIF_IMAGE, NULL, imgP,0, 0, 0);

        // clean up

    // Free the memory block containing the dropped-file information

    // if this was a shortcut, we need to expand it to the target path
    int result=GetItemCount();
    SetItemState(result, LVIS_SELECTED | 
    EnsureVisible(result, TRUE);


Creating Thumbnail image for the Picture file

  1. Add the LoadPicture function to the ListImage class.
HBITMAP CListImageCtrl::LoadPicture(CString mFile)
    CString pFSize;
    WCHAR wpath[MAX_PATH];
    MultiByteToWideChar(CP_ACP, 0, mFile, -1, wpath, MAX_PATH);
    IPicture* pPic;
    OleLoadPicturePath(wpath, NULL, NULL, NULL, IID_IPicture,(LPVOID*)&pPic);
    if (pPic==NULL) return NULL;

    HBITMAP hPic = NULL;
    long nWidth=THUMWIDTH;
    long nHeight=THUMHEIGHT;
    long mWid,mHei;
    HBITMAP hPicRet = (HBITMAP)CopyImage(hPic, IMAGE_BITMAP, 
                        nWidth, nHeight , LR_COPYDELETEORG);   
    // Create Brushes for Border and BackGround
    HBRUSH hBrushBorder=::CreateSolidBrush(RGB(192, 192, 192));
    HBRUSH hBrushBk=::CreateSolidBrush(RGB(255, 255, 255));
    // Border Size
    RECT rcBorder;;
    const float fRatio=(float)THUMHEIGHT/THUMWIDTH;
    int XDest, YDest, nDestWidth, nDestHeight;
    // Calculate Rect to fit to canvas
    const float fImgRatio=(float)mHei/mWid;
    if(fImgRatio > fRatio)

    CClientDC cdc(this);
    HDC hDC=::CreateCompatibleDC(cdc.m_hDC);
    HBITMAP bm = CreateCompatibleBitmap(cdc.m_hDC, THUMWIDTH, THUMHEIGHT);
    HBITMAP pOldBitmapImage = (HBITMAP)SelectObject(hDC,bm);
    // Draw Background
    ::FillRect(hDC, &rcBorder, hBrushBk);
    // Draw Border
    ::FrameRect(hDC, &rcBorder, hBrushBorder);
    HBITMAP hBmReturn= (HBITMAP)::SelectObject(hDC, pOldBitmapImage);
    CDC hdcSrc, hdcDst;
    // Load the bitmaps into memory DC
    CBitmap* hbmSrcT = (CBitmap*) hdcSrc.SelectObject(hPicRet);
    CBitmap* hbmDstT = (CBitmap*) hdcDst.SelectObject(hBmReturn);
    // This call sets up the mask bitmap.
    hdcDst.BitBlt(XDest,YDest,nDestWidth, nDestHeight, &hdcSrc,0,0,SRCCOPY); 
    //hdcDst.StretchBlt(XDest,YDest,nDestWidth, nDestHeight, 
    //                             &hdcSrc,0,0,48,48,SRCCOPY);
    pOldBitmapImage = (HBITMAP)SelectObject(hdcDst.m_hDC,bm);
    // Release used DC and Object
    return pOldBitmapImage;


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


About the Author

Karpaga Rajan
Web Developer
India India
Around 7 years of experience in software development, system design, prototyping, testing, implementation, maintenance and documentation.

Experience in System oriented programming (developed Anti – Virus Kit, Network security system, etc) and Embedded systems.

Capable of developing Device Drivers and building Custom ActiveX Controls in VC++ 6.0

You may also be interested in...


Comments and Discussions

GeneralMy vote of 3 Pin
fly_vdream16-Aug-10 0:56
groupfly_vdream16-Aug-10 0:56 
Generalplease help me Pin
wangshumin27-Sep-09 4:26
memberwangshumin27-Sep-09 4:26 
Generalmemory leak and memory overflow found in this project Pin
liu8han10-Sep-09 20:22
memberliu8han10-Sep-09 20:22 
If you load enough quantities pictures in this application. you will find it does work at all. In my test, the limitation is 4973 (720 * 480 pixel) images.

After that I nvestigated in this code and found solution eventually.

Code snapshot
in ListImageCtrl.cpp
at line

95 //Adding Bitmap to the Imagelist
96 CBitmap* pImage = NULL;
97 pImage = new CBitmap();
98 pImage.Attach(bitm);
99 int imgP=m_imageList.Add(pImage,RGB(0,0,0));
100 //Link to the added listview item
101 InsertItem(m_TotCount,nFileText,imgP);

add code below

DeleteObject( bitm );
delete pImage;
GeneralBeginner code and wrong method Pin
kilt11-Aug-09 7:15
memberkilt11-Aug-09 7:15 
GeneralRe: Beginner code and wrong method Pin
hugh4vc14-Aug-09 4:02
memberhugh4vc14-Aug-09 4:02 
GeneralThe blue mask when image focused Pin
Member 373290315-Jul-09 18:32
memberMember 373290315-Jul-09 18:32 
GeneralThank you! Pin
xluo13-Mar-08 17:11
memberxluo13-Mar-08 17:11 
GeneralImprovement Pin
Struk Igor18-May-07 3:05
memberStruk Igor18-May-07 3:05 
GeneralCompiter Error-pls help Pin
zhaque18-Feb-07 1:25
memberzhaque18-Feb-07 1:25 
GeneralRe: Compiter Error-pls help Pin
zhaque18-Feb-07 2:24
memberzhaque18-Feb-07 2:24 
QuestionRetrieving Images from a CImageList Pin
geoyar15-Feb-07 10:23
membergeoyar15-Feb-07 10:23 
GeneralSuggestion if I may... Pin
Pandele Florin31-Jul-06 6:19
memberPandele Florin31-Jul-06 6:19 
Generaladd checkbox Pin
rung xanh27-Jul-06 0:08
memberrung xanh27-Jul-06 0:08 
QuestionHow remove thr file name Pin
alwittta28-Apr-06 21:57
memberalwittta28-Apr-06 21:57 
AnswerRe: How remove thr file name Pin
Karpaga Rajan28-Apr-06 22:14
memberKarpaga Rajan28-Apr-06 22:14 
GeneralSample downloaded is different than the snap given !! Pin
ji mehta7-Apr-06 2:46
memberji mehta7-Apr-06 2:46 
QuestionDoes it support larger or smaller image preview size ? Pin
ji mehta7-Apr-06 2:24
memberji mehta7-Apr-06 2:24 
Generalconversion from CString to char* required Pin
hutkey22-Jul-05 1:38
susshutkey22-Jul-05 1:38 
GeneralRe: conversion from CString to char* required Pin
Ali Ghanbari16-Aug-05 20:52
sussAli Ghanbari16-Aug-05 20:52 
GeneralRe: conversion from CString to char* required Pin
GoosiCodeName-Ali17-Aug-05 2:58
sussGoosiCodeName-Ali17-Aug-05 2:58 
GeneralCan't do it on another Image class Pin
Maverick7-Jan-05 8:31
memberMaverick7-Jan-05 8:31 
GeneralRotating an Image Pin
Alex Evans4-Jan-05 10:28
memberAlex Evans4-Jan-05 10:28 
QuestionHow do I add another list to display images in another folder? Pin
joshuafoo19801-Dec-04 22:29
memberjoshuafoo19801-Dec-04 22:29 
AnswerRe: How do I add another list to display images in another folder? Pin
Karpaga Rajan2-Dec-04 0:25
memberKarpaga Rajan2-Dec-04 0:25 
GeneralNeeds serious code clean-up. Pin
Peter Ritchie13-Nov-04 8:19
memberPeter Ritchie13-Nov-04 8:19 

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.171114.1 | Last Updated 1 Oct 2004
Article Copyright 2004 by Karpaga Rajan
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid