CodeProject: Thumbnails Viewer using ListCtrl. Free source code and programming help

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.

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.

Acknowledgment

History

You must Sign In to use this message board.


Per page

FirstPrevNext

hello, I came across one question. I need your help...

cciill

7:42 5 Sep '09

I download this source code in my project. But I came across a question. This source code using cximagecrtd.lib, when I use Threshold2() in my project, It can do nothing. So I change it to cximage.lib for toghther the before will shield the other one. After changing the lib, it can only work for bmp files. I want to know how to settle this question? please help me...
Sign In·View Thread·PermaLink

Why can't I hide the VScroll in listctrl???

Sophia29

22:30 25 Nov '08

Well done! I want to hide VScroll and just show HScoll in listctrl, but it seems doesn't work! Do you know why? I want to program better and better from now on!
Sign In·View Thread·PermaLink	2.00/5

Datagrid thumbnail images

skyair

16:49 29 Jun '08

hi, do you know how to upload pictures as thumbnails inside datagrid and if user click on any picture, the picture opens in bigger size? will appriciate any help
Sign In·View Thread·PermaLink

Hai

Sivan Manimala

0:09 3 Jun '08

First of all very good work
the one i was actually looking for
but I need to load the images into a list control.
I tried with the following code.
I added 12 fully qualified file names into the vector m_vFileName
but after loading i was only able to see the file names in the list control.
Please help me.

////////////////////////
CODE
//////////////////////

CListCtrl& ListCtrl=m_listImages;//The CListCtrl object in the dialog class
m_ImageListThumb.Create(THUMBNAIL_WIDTH,THUMBNAIL_HEIGHT,ILC_COLOR,m_vFileName.size(),1);
CImageList* pImgList=&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(m_vFileName.size());

TCHAR 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=m_vFileName.begin(); iter!=m_vFileName.end(); 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=m_vFileName.begin(); iter!=m_vFileName.end(); iter++, nIndex++)
{
// Load Image File
_stprintf(path, _T("%s"),*iter);

int nImageType=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;
}

CDC *cdc=GetDC();
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();

Thanks In advance

www.ktsinfotech.com

Possible to only highlight name and not picture?

alan93

11:09 29 May '08

I'm using a parallel list box for selecting images in the thumbnail list viewer. However when I select one , its hard to see the images when they are highlighted. I wonder how it could be made so that it doesn't highlight the image, just the name? Also, would it be possible to not include ".jpg" on end of items and still have them display?
Sign In·View Thread·PermaLink

Re: Possible to only highlight name and not picture?

DevoraNur

21:51 24 Oct '09

has anyone found a simple solution to this problem? I'm still looking for one....
Sign In·View Thread·PermaLink

Re: Possible to only highlight name and not picture?

alan93

3:44 28 Oct '09

I figured it out and believe I did it this way by creating custom redraw for the listctrl.

.h -> afx_msg void OnCustomdrawMyList ( NMHDR* pNMHDR, LRESULT* pResult );
.cpp -> ON_NOTIFY ( NM_CUSTOMDRAW, IDC_LIST_MYLIST, OnCustomdrawMyList )


void CMyDlg::OnCustomdrawMyList ( NMHDR* pNMHDR, LRESULT* pResult )
{
	NMLVCUSTOMDRAW* pLVCD = reinterpret_cast<NMLVCUSTOMDRAW*>( pNMHDR );

	*pResult = 0;

	// If this is the beginning of the control's paint cycle, request
	// notifications for each item.

	if ( CDDS_PREPAINT == pLVCD->nmcd.dwDrawStage )
	{
		*pResult = CDRF_NOTIFYITEMDRAW;
	}
	else if ( CDDS_ITEMPREPAINT == pLVCD->nmcd.dwDrawStage )
	{
		// This is the pre-paint stage for an item.  We need to make another
		// request to be notified during the post-paint stage.

		*pResult = CDRF_NOTIFYPOSTPAINT;
	}
	else if ( CDDS_ITEMPOSTPAINT == pLVCD->nmcd.dwDrawStage )
	{
		// If this item is selected, re-draw the icon in its normal
		// color (not blended with the highlight color).

		LVITEM rItem;
		int    nItem = static_cast<int>( pLVCD->nmcd.dwItemSpec );

		// Get the image index and state of this item.  Note that we need to
		// check the selected state manually.  The docs _say_ that the
		// item's state is in pLVCD->nmcd.uItemState, but during my testing
		// it was always equal to 0x0201, which doesn't make sense, since
		// the max CDIS_* constant in commctrl.h is 0x0100.

		ZeroMemory ( &rItem, sizeof(LVITEM) );
		rItem.mask  = LVIF_IMAGE | LVIF_STATE;
		rItem.iItem = nItem;
		rItem.stateMask = LVIS_SELECTED;
		c_MyList.GetItem ( &rItem );

		// If this item is selected, redraw the icon with its normal colors.
		if ( rItem.state & LVIS_SELECTED )
		{
			CDC*  pDC = CDC::FromHandle ( pLVCD->nmcd.hdc );
			CRect rcIcon;

			// Get the rect that holds the item's icon.                    //ADDED
			c_MyList.GetItemRect ( nItem, &rcIcon, LVIR_ICON );        //ADDED
			rcIcon.top += 2;                                               //ADDED
			rcIcon.left += 21;                                             //ADDED
			rcIcon.bottom += 2;                                            //ADDED
			rcIcon.right += 21;                                            //ADDED

			// Draw the icon.
			m_MyImageListThumb.Draw ( pDC, rItem.iImage, rcIcon.TopLeft(),   //ADDED
				ILD_TRANSPARENT );

			*pResult = CDRF_SKIPDEFAULT;
		}
	}

}

You might have to change the numbers I added.

안녕하세요~ [modified]

rider76

16:22 17 Mar '08

hi~ last 2~3 years ago had met a Korean in the face here is..(perfectly conglish..understand do ju sam(hae joo sam~^^) wow~ realy how no long time see korean here. leave traces because very very glad. bye~^^ modified on Monday, March 17, 2008 9:28 PM
Sign In·View Thread·PermaLink	3.50/5

how can do it

thrudoor

0:27 28 Nov '07

i want list control sort thrudoor@hanmail.net
Sign In·View Thread·PermaLink	1.33/5

More smooth Picture!

OpenGL_VC

21:40 5 Apr '07

I don't know why,but if you change the code

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

to this:

	
// Draw Image
		RGBQUAD col = {255,255,255,255};
		image.Thumbnail(nDestWidth,nDestHeight,col);
		image.Draw2(hDC, XDest, YDest, nDestWidth, nDestHeight);

and then chang the code:


pDoc->m_pSelectedImage->Draw(lpDrawItemStruct->hDC, lpDrawItemStruct->rcItem);

to:


			// Draw Image
			RGBQUAD col = {255,255,255,255};
			CxImage image;
			if(pDoc->m_pSelectedImage)
			{
				image = *pDoc->m_pSelectedImage;
				CRect rect = lpDrawItemStruct->rcItem;
				image.Thumbnail(rect.Width(),rect.Height(),col);
				image.Draw(lpDrawItemStruct->hDC, lpDrawItemStruct->rcItem);
			}

			//pDoc->m_pSelectedImage->Draw(lpDrawItemStruct->hDC, lpDrawItemStruct->rcItem);

you will get the more smooth and better look pictures! Laugh

========================================
www.PhysDev.com (chinese)

Re: More smooth Picture!

moah

21:58 14 May '07

Thank you for your support
Sign In·View Thread·PermaLink	5.00/5

LINK : fatal error LNK1181: cannot open input file "./lib/cximagecrtu.lib"

SKhokalay

0:46 7 Dec '06

Hi , Im getting this error if i download your source and run it LINK : fatal error LNK1181: cannot open input file "./lib/cximagecrtu.lib" im not able to find cximagecrtu.lib file i want the UNICODE compatibility kinldy help me regards Sandeep Sandeep/-
Sign In·View Thread·PermaLink	1.91/5

LINK : fatal error LNK1181: cannot open input file "./lib/cximagecrtu.lib"

SKhokalay

0:51 7 Dec '06

pls send me the solution as soon as possilbe . im in very hurry only your project will save me... my mail ids are skhokalay@yahoo.co.in khokalay_s@hotmail.com sandeep.khokalay@gmail.com Sandeep/-
Sign In·View Thread·PermaLink	1.50/5

Re: LINK : fatal error LNK1181: cannot open input file "./lib/cximagecrtu.lib"

cristitomi

0:32 5 Apr '07

Hi! The library is for unicode release only. So if you want to compile the code without Unicode support, here is what you must do: 1) Remove this library from the Link Tab (Project->Settings ...) 2) Go to Build->Set Active Configuration and choose Win32 - Debug The code will now compile cleanly. All best! I am in love with VC++
Sign In·View Thread·PermaLink	2.50/5

Re: LINK : fatal error LNK1181: cannot open input file "./lib/cximagecrtu.lib"

Son Ji Seon

4:28 26 May '09

ooooooh~ Thank you so much! I searched around for this. ㅜ.ㅜ Your detailed explanation is Very easy!!
Sign In·View Thread·PermaLink

Problems in adding a new bar.

perhapszy

23:18 2 Aug '06

I want to add a new bar to show some infos of the files.

I think it better to use a dialog so it will be easy to use some controls.

So i try to use CViewBar(see http://www.codeproject.com/docking/dockview.asp)to do it.

But i failed to send a message to the dialog.

My code:

//CFuncView.h

#ifndef WM_MSG1
#define WM_MSG1 (WM_USER+101)
#endif

class CFuncView : public CFormView
......

//MainFrm.h
CViewBar m_wndFuncView;
//MainFrm.cpp

int CMainFrame::OnCreate(LPCREATESTRUCT lpCreateStruct)
{

......

CString sTitle;		
sTitle.Format(_T("FuncView"));
if (!m_wndFuncView.Create(this,
	RUNTIME_CLASS (CFuncView),
	(CCreateContext *)(lpCreateStruct->lpCreateParams),
	sTitle, WS_CHILD | WS_VISIBLE | CBRS_TOP,
	AFX_IDW_CONTROLBAR_FIRST + 33 ))
{
TRACE0("Failed to create ViewBar\n");
return -1;		// fail to create
}
m_wndFuncView.SetBarStyle(m_wndFuncView.GetBarStyle() |
CBRS_TOOLTIPS | CBRS_FLYBY | CBRS_SIZE_DYNAMIC);

m_wndFuncView.EnableDocking(CBRS_ALIGN_TOP);

EnableDocking(CBRS_ALIGN_ANY);

......

DockControlBar(&m_wndFuncView, AFX_IDW_DOCKBAR_TOP);

......

}

I send the msg when the document changes.
for example:

//CThumbViewerView::OnFileNew()

CMainFrame* pFrame=(CMainFrame*)AfxGetMainWnd();
pFrame->m_wndPreviewBar.SendMessage(WM_SIZE);
pFrame->m_wndFuncView.SendMessage(WM_MSG1);

But the dialog don't recieve any msg, plz give me some advice.

Re: Problems in adding a new bar.

moah

20:20 4 Aug '06

Is a new window successfully attached to your MainFrame window? If it is, how is the WM_MSG1 defined? How about sending another Win32 message, such as WM_SIZE.
Sign In·View Thread·PermaLink

Re: Problems in adding a new bar.

perhapszy

23:40 7 Aug '06

moah wrote:
Is a new window successfully attached to your MainFrame window?

yes

moah wrote:
If it is, how is the WM_MSG1 defined?

it's defined in CFuncView.h .

moah wrote:
How about sending another Win32 message, such as WM_SIZE.

The sub function can response to the WIn32 message.

Thank u for your help.

2.80/5

lill more help plz

tahinn

20:16 6 Jul '06

i don't want to use any library like CXImage, want to get the preview of only the availabe .bmp images in my pc, then how can i do that? Does it need a huge change?plz help, i'm very new in MFC.
Sign In·View Thread·PermaLink

Re: lill more help plz

moah

8:07 8 Jul '06

Hi tahinn.

It is your choice to select a Image Library.
And I chose CxImage because it is one of the finest Image Library which can be freely obtained from the Internet.

Although you may decide not to use CxImage, you should choose an alternative image library for BMP File.
Or maybe you can use CBitmap class(MFC include the class) and SetBitmapBits method of the CBitmap.

CxImage is just Image Library to help load a image file and draw to DC(Device Context).

Refer following two articles.
Then you can build your own Bitmap(BMP) image library.

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/winui/winui/windowsuserinterface/resources/introductiontoresources/resourcereference/resourcefunctions/loadimage.asp
http://www.codeguru.com/cpp/g-m/bitmap/viewers/article.php/c1775/

Re: lill more help plz

tahinn

3:50 12 Jul '06

YESSSSSSSSSSSSSSSSSSSSSSSSSSSSS, i hv done it.using the CBitmap Class.Thx a lot.
Sign In·View Thread·PermaLink

I can't build with Visual C++ 8 (2005)

Anderson Luís

18:34 5 Jul '06

Congratulations! This is a really good project. But I can't build in my machine I am using Visual C++ 8 and receive the following erros:

c:\test\scbarg.cpp(57) : error C2440: 'static_cast' : cannot convert from 'UINT (__thiscall CSizingControlBarG::* )(CPoint)' to 'LRESULT (__thiscall CWnd::* )(CPoint)'
Cast from base to derived requires dynamic_cast or static_cast
sizecbar.cpp

// My comments
Just in line:
ON_WM_NCHITTEST()

c:\test\control_bar\sizecbar.cpp(109) : error C2440: 'static_cast' : cannot convert from 'UINT (__thiscall CSizingControlBar::* )(CPoint)' to 'LRESULT (__thiscall CWnd::* )(CPoint)'
Cast from base to derived requires dynamic_cast or static_cast

// My comments
Just in line:
ON_WM_NCHITTEST()

Anderson Luís Oliveira e Silva
nosredna@terra.com.br

1.60/5

Re: I can't build with Visual C++ 8 (2005)

moah

7:53 8 Jul '06

The errors are occured from the 3rd party library, CSizingControlBar.
And unfortunately it was published a little long time ago. Frown

You can infer that the problems are because of mismatching return type of two functions.
Therefore you can simply fix the problem. Smile

1. Open scbarg.h, and see line 103.
Change afx_msg UINT OnNcHitTest(CPoint point);
to afx_msg LRESULT OnNcHitTest(CPoint point);

2. Open scbarg.cpp and see line 145
Change UINT CSizingControlBarG::OnNcHitTest(CPoint point)
to LRESULT CSizingControlBarG::OnNcHitTest(CPoint point)

3. Open sizecbar.h and see line 167
Change afx_msg UINT OnNcHitTest(CPoint point);
to afx_msg LRESULT OnNcHitTest(CPoint point);

4. Open sizecbar.cpp and see line 573
Change UINT CSizingControlBar::OnNcHitTest(CPoint point)
to LRESULT CSizingControlBar::OnNcHitTest(CPoint point)

Now, you'll see no more error. Smile

Re: I can't build with Visual C++ 8 (2005)

tdjdyq

20:26 23 Jul '08

f:\cpa\jpg\thumbviewer_src_1_1\dirtreectrl.cpp(463) : error C2065: “SHGDN_INCLUDE_NONFILESYS”: 未声明的标识符 >f:\cpa\jpg\thumbviewer_src_1_1\control_bar\sizecbar.cpp(1297) : error C2065: “afxChNil”: 未声明的标识符
Sign In·View Thread·PermaLink	1.71/5

show only .bmp images

tahinn

1:41 4 Jul '06

how can i show(get previw) the thumbnail images of only .bmp files?
Sign In·View Thread·PermaLink	1.00/5

Last Visit: 13:45 23 Nov '09 Last Update: 13:45 23 Nov '09

12 3 4 5 6 Next »

Introduction

Implementation

1. Creating CListCtrl and CImageList

2. Load Images and Insert Items

Acknowledgment

History