Click here to Skip to main content
12,689,801 members (25,411 online)
Click here to Skip to main content
Add your own
alternative version


100 bookmarked

VividTree - A Colorful and Picturesque Owner Drawn CTreeCtrl Class

, 21 Sep 2005
Rate this:
Please Sign up or sign in to vote.
An colorful owner drawn CTreeCtrl derived class loosly modeled after Skype's main window.

VividTree Image


This owner draw tree control allows for the creation of a tree control loosely resembling the embedded tree in Skype's main window. It demonstrates the basics of creating an owner-drawn tree control, but more importantly, demonstrates gradient backgrounds fills, bitmap backgrounds, flicker free drawing, and how to deal with these in a scrollable and resizable dialog.

Building and Running the Demo Code

Both VC++ 6.0 and VC++ 7.1 project files are included. VC++ 7.1 output directories use the normal Debug/Release directory names. VC+ 6.0 uses VS6_Debug and VS6_Release. The demonstration program has a context (right-click) menu which allows you to change play with some of the different display modes.

Using the code

Importing the code into your project is a fairly easy process. Below are some simple steps to follow:

Step 1: Import the files and resources

Start by simply adding the two source files VividTree.cpp and VividTree.h to your project. Now, add the two bitmap resources (tree_closed.bmp and tree_opened.bmp) and set their resource ID names to IDB_TREE_CLOSED and IDB_TREE_OPENED.

Step 2: Create or change your CTreeCtrl based object

If you already have a CTreeCtrl object, change its declaration to VividTree and include VividTree.h, or create a new CTreeCtrl object and change its declaration to VividTree.

Step 3: Customize the Look

Several customizations are available to change VividTree's look. These class interfaces are shown below:

// BackGround Mode Interfaces 
BkMode   GetBkMode( );
void     SetBkMode( BkMode bkgd_mode );

// Gradient Property Interfaces
void     SetBkGradients( COLORREF from, COLORREF to );
COLORREF GetBkGradientFrom( );
COLORREF GetBkGradientTo( );
bool     GetGradientHorz();
void     SetGradientHorz( bool horz ); // true = horizontal, false = vertical

// Bitmap Background Interfaces
bool     GetBitmapTiledMode();
void     SetBitmapTiledMode( bool tiled );
void     SetBitmapID( UINT id );

// Leaf ICON Setup
virtual void  SetItemIcon( HICON icon );
virtual HICON GetItemIcon( HTREEITEM item );  // Overridable

The left most screenshot graphic (above) mostly shows the default look of VividTree. The one customization done was to add a default icon to the tree leafs (see the code below). Note: the default implementation of GetItemIcon only supports one icon, but GetItemIcon is overridable to allow derived classes to be more prolific in their graphic usage.

m_icon = (HICON)LoadImage( AfxGetApp()->m_hInstance, 
        16, 16, LR_VGACOLOR );
m_tree.SetItemIcon( m_icon );

In the second screenshot graphic above, a background bitmap is added. The bitmap is stretched to fit the size of the window and re-stretched on a window size change. Below is the initialization code added to achieve this:

m_tree.SetBitmapID( IDB_CODE_PROJECT );
m_tree.SetBkMode( VividTree::BK_MODE_BMP );

In the third screenshot graphic above, VividTree is configured to tile the graphic in the client window. The code to set this mode is:

m_tree.SetBitmapTiledMode( true );


Below is the version history for VividTree:

  • 9/1/2005 - 1.0.0

    Initial implementation.

Bug Reports

If you have a bug report, or a bug fix, you can contact me through email or with the forums below. I would appreciate a notification of any bugs discovered or improvements that could be made to help the control grow for everyone.


This code is provided "as is" with no expressed or implied warranty. You may use, or derive works from this file without any restrictions except those listed below:

  • The original code header must be kept in the derived work.
  • If your derived work is distributed in any form, you must notify the author and provide a short description of the product and intended audience.
  • You may not sell this code or a derived version of it as part of a commercial code library.

Offering the author a free licensed copy of any end product using this code is not required, but does endear you with a bounty of good karma.

Other Code Projects Used by This Project:


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Web Developer
United States United States
I live in the San Francisco Bay Area. I am married and have two wonderful daughters.

You may also be interested in...

Comments and Discussions

Generalthanks Pin
lishuhuakai25-Mar-15 5:48
memberlishuhuakai25-Mar-15 5:48 
GeneralMy vote of 5 Pin
feihan27-Sep-12 23:52
memberfeihan27-Sep-12 23:52 
GeneralMy vote of 5 Pin
Vider16-Mar-12 1:31
memberVider16-Mar-12 1:31 
QuestionHow to add 2 icons in 1 tree item Pin
RunningThread18-Aug-10 4:35
memberRunningThread18-Aug-10 4:35 
GeneralNeed to convet your code in pure win32. Pin
zakkas248315-May-09 5:31
memberzakkas248315-May-09 5:31 
QuestionVividTree class is not listed by classwizard Pin
lalithaeapen19-Jan-09 20:56
memberlalithaeapen19-Jan-09 20:56 
Generallink error Pin
xiaohelong20051-May-07 17:13
memberxiaohelong20051-May-07 17:13 
GeneralRe: link error [modified] Pin
ChinaCoffee9-May-07 23:16
memberChinaCoffee9-May-07 23:16 
复制资源 CVT1100 致命错误。 type:STRING name:7、 language:0x0409
转换到 COFF 期间失败 " LNK1123 致命错误文件无效或损坏:

如果文件中的现有资源文件和新资源字符串表 ID 冲突出现第二条错误信息。 资源编译器编译字符串表, 时它保留一组的 16 ID。 例如, 如果 ID 100 用于字符串表的第一个资源文件中并使用 ID 110 的第二个资源文件, 字符串表中发生冲突。

要解决此问题, 请按照下列步骤:
1. 新资源文件的字符串表中添加一个字符串条目。
2. 为了避免冲突, 请不要使用字符串 ID 是太关闭到对方的 MFC 项目不同资源文件中。 例如, 如果一个资源文件包含字符串 ID 100, 不使用 ID 值其他资源文件的同一 MFC 项目中 100 到 115 范围中

Sorry, Chinese
GeneralDelete the item Pin
duoluoyidai20-Nov-06 16:51
memberduoluoyidai20-Nov-06 16:51 
QuestionHow to user different image attach to different Item Pin
lincolnfz9-Aug-06 0:04
memberlincolnfz9-Aug-06 0:04 

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.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170113.4 | Last Updated 21 Sep 2005
Article Copyright 2005 by JimAlsup
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid