Click here to Skip to main content
11,638,351 members (74,284 online)
Click here to Skip to main content

Thumbnails Viewer using ListCtrl

, 27 Jan 2006 CPOL 375K 12.6K 193
Rate this:
Please Sign up or sign in to vote.
Show thumbnails of images, include JPG, TIFF, BMP, etc.

Sample Image - ThumbViewer.jpg

Introduction

There are several image libraries and sources currently available. So I made my mind up to make a free Image Viewer using a free image library, and I got many free demo programs. I think a good image viewer must be able to show thumbnail images in a selected directory. I found some sources showing thumbnails, but they didn't support several formats, only BMP files. This thumbnail viewer is based on CxImage, so if there is an image format supported by CxImage, this viewer also supports that format.

Implementation

I want to show you the core part in this article. How to make a CListCtrl, CImageList, and then how to load images and attach that image to an ImageList.

1. Creating CListCtrl and CImageList

I used a CListView instead of CListCtrl, but you know that CListView uses CListCtrl internally. So overriding Create(...) will make your icon view CListCtrl initially. And then on OnInitialUpdate(), make ImageList which can support 24 bit color images and attach to CListCtrl.

return CListView::Create(lpszClassName, _T("ListView"),
  dwStyle|LVS_SHOWSELALWAYS|LVS_ALIGNTOP|LVS_ICON|LVS_SINGLESEL|
  LVS_AUTOARRANGE, rect, pParentWnd, nID, pContext);

....
m_ImageListThumb.Create(THUMBNAIL_WIDTH, THUMBNAIL_HEIGHT, ILC_COLOR24, 0, 1);
 ListCtrl.SetImageList(&m_ImageListThumb, LVSIL_NORMAL);

2. Load Images and Insert Items

Create a Compatible DC and a Bitmap Handle. Stretch a loaded image to the Bitmap Handle and then attach it to CBitmap. Finally, replace CBitmap with an image in the ImageList.

unsigned __stdcall CThumbViewerView::LoadThumbNail(LPVOID lpParam)
{
 CThumbViewerView* pView=(CThumbViewerView*)lpParam;
 CThumbViewerDoc* pDoc=pView->GetDocument();

 CListCtrl& ListCtrl=pView->GetListCtrl();
 CImageList* pImgList=&pView->m_ImageListThumb;

 // reset our image list
 for(int i=0; i<pImgList->GetImageCount(); i++)
  pImgList->Remove(i); 

 // remove all items from list view
 ListCtrl.DeleteAllItems();

 pImgList->SetImageCount(pDoc->m_vFileName.size());

 char path[MAX_PATH];
 vector<CString>::iterator iter;
 
 // Set redraw to FALSE to avoid flickering during adding new items
 ListCtrl.SetRedraw(FALSE);
 int nIndex=0;
 for(iter=pDoc->m_vFileName.begin(); 
     iter!=pDoc->m_vFileName.end() && pView->m_bTerminate!=true; 
     iter++, nIndex++)
 {
          ListCtrl.InsertItem(nIndex, *iter, nIndex);
 }

 ListCtrl.SetRedraw(TRUE);
 ListCtrl.Invalidate();

 // Create Brushes for Border and BackGround
 HBRUSH hBrushBorder=::CreateSolidBrush(RGB(192, 192, 192));
 HBRUSH hBrushBk=::CreateSolidBrush(RGB(255, 255, 255));

 // Border Size
 RECT rcBorder;
 rcBorder.left=rcBorder.top=0;
 rcBorder.right=THUMBNAIL_WIDTH;
 rcBorder.bottom=THUMBNAIL_HEIGHT;

 const float fRatio=(float)THUMBNAIL_HEIGHT/THUMBNAIL_WIDTH;

 int XDest, YDest, nDestWidth, nDestHeight;
 nIndex=0;
 for(iter=pDoc->m_vFileName.begin(); 
     iter!=pDoc->m_vFileName.end() && pView->m_bTerminate!=true; 
     iter++, nIndex++)
 {
  // Load Image File
  sprintf(path, "%s\\%s", pDoc->m_strCurrentDirectory, *iter);

  int nImageType=pDoc->GetTypeFromFileName(path);
  if(nImageType==CXIMAGE_FORMAT_UNKNOWN)
   continue;

  CxImage image(path, nImageType);

  if(image.IsValid()==false)
   continue;

  // Calculate Rect to fit to canvas
  const float fImgRatio=(float)image.GetHeight()/image.GetWidth();
  if(fImgRatio > fRatio)
  {
   nDestWidth=THUMBNAIL_HEIGHT/fImgRatio;
   XDest=(THUMBNAIL_WIDTH-nDestWidth)/2;
   YDest=0;
   nDestHeight=THUMBNAIL_HEIGHT;
  }
  else
  {
   XDest=0;
   nDestWidth=THUMBNAIL_WIDTH;
   nDestHeight=THUMBNAIL_WIDTH*fImgRatio;
   YDest=(THUMBNAIL_HEIGHT-nDestHeight)/2;
  }

  CClientDC cdc(pView);
  HDC hDC=::CreateCompatibleDC(cdc.m_hDC);
  HBITMAP bm = CreateCompatibleBitmap(cdc.m_hDC, THUMBNAIL_WIDTH, 
                                      THUMBNAIL_HEIGHT);
  HBITMAP pOldBitmapImage = (HBITMAP)SelectObject(hDC,bm);
  // Draw Background
  ::FillRect(hDC, &rcBorder, hBrushBk);

  // Draw Image
  image.Stretch(hDC, XDest, YDest, nDestWidth, nDestHeight);

  // Draw Border
  ::FrameRect(hDC, &rcBorder, hBrushBorder);

  SelectObject(hDC, pOldBitmapImage);

  // Attach to Bitmap and Replace image in CImageList
  CBitmap bitmap;
  bitmap.Attach(bm);
  pImgList->Replace(nIndex, &bitmap, NULL);

  // Redraw only a current item for removing flickering and fast speed.
  ListCtrl.RedrawItems(nIndex, nIndex);

  // Release used DC and Object
  DeleteDC(hDC);
  DeleteObject(bm);
 }
 DeleteObject(hBrushBorder);
 DeleteObject(hBrushBk);

 ListCtrl.Invalidate();
 pView->m_bRunning=false;
 pView->m_bTerminate=false;

 _endthreadex( 0 );

 return 0;
}

Acknowledgment

You can download CxImage freely from here.

History

  • Ver. 1.0  15, Sep. 2003
    • First release.
  • Ver. 1.1  24, Mar. 2005
    • Fixed crashing when changing a directory fast.
    • Supports Unicode option using preprocessor _UNICODE.

License

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

Share

About the Author

moah
Web Developer
Korea (Republic Of) Korea (Republic Of)
Youngjin Kim lives in South Korea. I'm interested in every part of Computer Science, cause it has not been long time since graduate a University.
But now I'm working and researching on Pattern Recognition. Using that trying to recognize a Handwriting Prints. Korean and Chinese are my interesting Research Part.

You may also be interested in...

Comments and Discussions

 
QuestionNot able to run this code in dialog box Pin
chavakkula16-Jul-15 4:20
memberchavakkula16-Jul-15 4:20 
GeneralMy vote of 5 Pin
43noodles2-Jul-10 22:46
member43noodles2-Jul-10 22:46 
Generalhello, I came across one question. I need your help... Pin
cciill5-Sep-09 6:42
membercciill5-Sep-09 6:42 
QuestionWhy can't I hide the VScroll in listctrl??? Pin
Sophia2925-Nov-08 21:30
memberSophia2925-Nov-08 21:30 
GeneralDatagrid thumbnail images Pin
skyair29-Jun-08 15:49
memberskyair29-Jun-08 15:49 
GeneralHai Pin
Sivan Manimala2-Jun-08 23:09
memberSivan Manimala2-Jun-08 23:09 
QuestionPossible to only highlight name and not picture? Pin
alan9329-May-08 10:09
memberalan9329-May-08 10:09 
AnswerRe: Possible to only highlight name and not picture? Pin
DevoraNur24-Oct-09 20:51
memberDevoraNur24-Oct-09 20:51 
has anyone found a simple solution to this problem?
I'm still looking for one....
GeneralRe: Possible to only highlight name and not picture? Pin
alan9328-Oct-09 2:44
memberalan9328-Oct-09 2:44 
General안녕하세요~ [modified] Pin
rider7617-Mar-08 15:22
memberrider7617-Mar-08 15:22 
Questionhow can do it Pin
thrudoor27-Nov-07 23:27
memberthrudoor27-Nov-07 23:27 
GeneralMore smooth Picture! Pin
OpenGL_VC5-Apr-07 20:40
memberOpenGL_VC5-Apr-07 20:40 
GeneralRe: More smooth Picture! Pin
moah14-May-07 20:58
membermoah14-May-07 20:58 
GeneralLINK : fatal error LNK1181: cannot open input file "./lib/cximagecrtu.lib" Pin
SKhokalay6-Dec-06 23:46
memberSKhokalay6-Dec-06 23:46 
GeneralLINK : fatal error LNK1181: cannot open input file "./lib/cximagecrtu.lib" Pin
SKhokalay6-Dec-06 23:51
memberSKhokalay6-Dec-06 23:51 
GeneralRe: LINK : fatal error LNK1181: cannot open input file "./lib/cximagecrtu.lib" Pin
cristitomi4-Apr-07 23:32
membercristitomi4-Apr-07 23:32 
GeneralRe: LINK : fatal error LNK1181: cannot open input file "./lib/cximagecrtu.lib" Pin
Son Ji Seon26-May-09 3:28
memberSon Ji Seon26-May-09 3:28 
GeneralRe: LINK : fatal error LNK1181: cannot open input file "./lib/cximagecrtu.lib" Pin
Member 112204359-Nov-14 21:07
memberMember 112204359-Nov-14 21:07 
QuestionProblems in adding a new bar. Pin
perhapszy2-Aug-06 22:18
memberperhapszy2-Aug-06 22:18 
AnswerRe: Problems in adding a new bar. Pin
moah4-Aug-06 19:20
membermoah4-Aug-06 19:20 
GeneralRe: Problems in adding a new bar. Pin
perhapszy7-Aug-06 22:40
memberperhapszy7-Aug-06 22:40 
Questionlill more help plz Pin
tahinn6-Jul-06 19:16
membertahinn6-Jul-06 19:16 
AnswerRe: lill more help plz Pin
moah8-Jul-06 7:07
membermoah8-Jul-06 7:07 
GeneralRe: lill more help plz Pin
tahinn12-Jul-06 2:50
membertahinn12-Jul-06 2:50 
QuestionI can't build with Visual C++ 8 (2005) Pin
Anderson Luís5-Jul-06 17:34
memberAnderson Luís5-Jul-06 17:34 
AnswerRe: I can't build with Visual C++ 8 (2005) Pin
moah8-Jul-06 6:53
membermoah8-Jul-06 6:53 
GeneralRe: I can't build with Visual C++ 8 (2005) Pin
tdjdyq23-Jul-08 19:26
membertdjdyq23-Jul-08 19:26 
GeneralRe: I can't build with Visual C++ 8 (2005) Pin
wissli11-Jan-10 23:00
memberwissli11-Jan-10 23:00 
Questionshow only .bmp images Pin
tahinn4-Jul-06 0:41
membertahinn4-Jul-06 0:41 
AnswerRe: show only .bmp images Pin
moah4-Jul-06 18:46
membermoah4-Jul-06 18:46 
GeneralRe: show only .bmp images Pin
tahinn5-Jul-06 3:17
membertahinn5-Jul-06 3:17 
QuestionCFormView Pin
Karl Bahr29-Jun-06 10:05
memberKarl Bahr29-Jun-06 10:05 
AnswerRe: CFormView Pin
moah29-Jun-06 14:50
membermoah29-Jun-06 14:50 
GeneralRe: CFormView [modified] Pin
Rene Ortner4-Jul-06 6:27
memberRene Ortner4-Jul-06 6:27 
GeneralRe: CFormView Pin
moah4-Jul-06 18:42
membermoah4-Jul-06 18:42 
GeneralTwo or more thumbnails Pin
alwittta8-Mar-06 0:47
memberalwittta8-Mar-06 0:47 
GeneralRe: Two or more thumbnails Pin
moah8-Mar-06 22:18
membermoah8-Mar-06 22:18 
GeneralRe: Two or more thumbnails Pin
alwittta8-Mar-06 23:27
memberalwittta8-Mar-06 23:27 
GeneralRe: Two or more thumbnails Pin
moah9-Mar-06 0:31
membermoah9-Mar-06 0:31 
GeneralRe: Two or more thumbnails Pin
alwittta9-Mar-06 0:53
memberalwittta9-Mar-06 0:53 
GeneralRe: Two or more thumbnails Pin
moah10-Mar-06 1:03
membermoah10-Mar-06 1:03 
Questionsome information about the image Pin
ali2121212121212121-Feb-06 4:26
memberali2121212121212121-Feb-06 4:26 
AnswerRe: some information about the image Pin
moah21-Feb-06 14:54
membermoah21-Feb-06 14:54 
QuestionRe: some information about the image Pin
ali2121212121212122-Feb-06 9:50
memberali2121212121212122-Feb-06 9:50 
AnswerRe: some information about the image Pin
moah22-Feb-06 18:30
membermoah22-Feb-06 18:30 
AnswerRe: some information about the image Pin
ali2121212121212123-Feb-06 3:11
memberali2121212121212123-Feb-06 3:11 
GeneralRe: some information about the image Pin
CheetahSD1-Mar-06 9:48
memberCheetahSD1-Mar-06 9:48 
AnswerRe: some information about the image Pin
ali212121212121213-Mar-06 9:26
memberali212121212121213-Mar-06 9:26 
GeneralRe: some information about the image Pin
moah9-Mar-06 0:37
membermoah9-Mar-06 0:37 
QuestionHow do I add a window below listview ctl? Pin
CheetahSD10-Feb-06 7:42
memberCheetahSD10-Feb-06 7:42 

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
Web03 | 2.8.150728.1 | Last Updated 27 Jan 2006
Article Copyright 2003 by moah
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid