Click here to Skip to main content
14,983,300 members
Articles / Desktop Programming / MFC
Posted 21 Sep 2005


102 bookmarked

VividTree - A Colorful and Picturesque Owner Drawn CTreeCtrl Class

Rate me:
Please Sign up or sign in to vote.
4.85/5 (34 votes)
21 Sep 20053 min read
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.

Comments and Discussions

Generalthanks Pin
lishuhuakai25-Mar-15 4:48
Memberlishuhuakai25-Mar-15 4:48 
GeneralMy vote of 5 Pin
feihan27-Sep-12 22:52
Memberfeihan27-Sep-12 22:52 
GeneralMy vote of 5 Pin
Vider16-Mar-12 0:31
MemberVider16-Mar-12 0:31 
QuestionHow to add 2 icons in 1 tree item Pin
RunningThread18-Aug-10 3:35
MemberRunningThread18-Aug-10 3:35 
GeneralNeed to convet your code in pure win32. Pin
zakkas248315-May-09 4:31
Memberzakkas248315-May-09 4:31 
QuestionVividTree class is not listed by classwizard Pin
lalithaeapen19-Jan-09 19:56
Memberlalithaeapen19-Jan-09 19:56 
Generallink error Pin
xiaohelong1-May-07 16:13
Memberxiaohelong1-May-07 16:13 
GeneralRe: link error [modified] Pin
ChinaCoffee9-May-07 22:16
MemberChinaCoffee9-May-07 22:16 
GeneralDelete the item Pin
duoluoyidai20-Nov-06 15:51
Memberduoluoyidai20-Nov-06 15:51 
QuestionHow to user different image attach to different Item Pin
lincolnfz8-Aug-06 23:04
Memberlincolnfz8-Aug-06 23:04 
AnswerRe: How to user different image attach to different Item Pin
JimAlsup21-Feb-07 15:55
MemberJimAlsup21-Feb-07 15:55 
GeneralLinker errors ! Pin
mcv99920-Jul-06 5:12
Membermcv99920-Jul-06 5:12 
GeneralRe: Linker errors ! Pin
JimAlsup26-Jul-06 19:25
MemberJimAlsup26-Jul-06 19:25 
GeneralNice Work!!! Thanks. Pin
yangzzzz26-Jun-06 17:25
Memberyangzzzz26-Jun-06 17:25 
QuestionHow to show the tree line and expanding flag'-' and unexpanding flag '+' as the basic ctreectrl class Pin
zhoupeter13-Jun-06 23:16
Memberzhoupeter13-Jun-06 23:16 
AnswerRe: How to show the tree line and expanding flag'-' and unexpanding flag '+' as the basic ctreectrl class Pin
JimAlsup14-Jun-06 5:56
MemberJimAlsup14-Jun-06 5:56 
GeneralRe: How to show the tree line and expanding flag'-' and unexpanding flag '+' as the basic ctreectrl class Pin
megzhou14-Jun-06 15:39
Membermegzhou14-Jun-06 15:39 
GeneralRe: How to show the tree line and expanding flag'-' and unexpanding flag '+' as the basic ctreectrl class Pin
Ed The C8-May-09 4:27
MemberEd The C8-May-09 4:27 
GeneralNot able to add different icons Pin
ramprabuaccess16-Mar-06 19:39
Memberramprabuaccess16-Mar-06 19:39 
GeneralRe: Not able to add different icons Pin
JimAlsup27-Mar-06 11:58
MemberJimAlsup27-Mar-06 11:58 
GeneralRe: Not able to add different icons Pin
DomoG16-Jan-07 3:40
MemberDomoG16-Jan-07 3:40 
GeneralRe: Not able to add different icons Pin
Mahadev HK2-Dec-12 15:48
MemberMahadev HK2-Dec-12 15:48 
GeneralNice work, but ... Pin
tcm19981-Mar-06 1:27
Membertcm19981-Mar-06 1:27 
GeneralRe: Nice work, but ... Pin
JimAlsup1-Mar-06 15:07
MemberJimAlsup1-Mar-06 15:07 
GeneralIt is what I am looking for Pin
YorkHwe25-Feb-06 22:33
MemberYorkHwe25-Feb-06 22:33 

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.