Click here to Skip to main content
13,195,379 members (67,319 online)
Click here to Skip to main content
Add your own
alternative version


100 bookmarked
Posted 21 Sep 2005

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

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 
Generalthanks! Pin
-=Seph=-20-Feb-06 21:05
member-=Seph=-20-Feb-06 21:05 
Generalno vertical scroll bar Pin
breakpoint26-Jan-06 15:14
memberbreakpoint26-Jan-06 15:14 
GeneralRe: no vertical scroll bar Pin
JimAlsup28-Jan-06 18:59
memberJimAlsup28-Jan-06 18:59 
GeneralRe: no vertical scroll bar Pin
breakpoint19-Mar-06 15:31
memberbreakpoint19-Mar-06 15:31 
Hi Jim,

Thanks. I got it working now. I implemented the control in a resizeable dialog app and found out that I am 'moving'(using MoveWindow()) way beyond the parent window Smile | :)

It works perfectly well now.

"We don't see things how they are. We see things as we are." -Talmud
GeneralHelp with a Link error Pin
Doug Knudson27-Sep-05 3:54
memberDoug Knudson27-Sep-05 3:54 
GeneralRe: Help with a Link error Pin
JimAlsup27-Sep-05 4:24
memberJimAlsup27-Sep-05 4:24 
GeneralRe: Help with a Link error Pin
Doug Knudson27-Sep-05 5:11
memberDoug Knudson27-Sep-05 5:11 
GeneralRe: Help with a Link error Pin
lory@Lxw20-Dec-05 6:41
memberlory@Lxw20-Dec-05 6:41 
GeneralRe: Help with a Link error Pin
lincolnfz1-Aug-06 15:45
memberlincolnfz1-Aug-06 15:45 
GeneralJust what I needed! Pin
Nitron24-Sep-05 5:30
memberNitron24-Sep-05 5:30 
GeneralWell work,Thank you very much Pin
swqswqswqswq21-Sep-05 18:47
memberswqswqswqswq21-Sep-05 18:47 
GeneralNice ! Pin
ddmcr21-Sep-05 10:10
memberddmcr21-Sep-05 10:10 

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.171019.1 | Last Updated 21 Sep 2005
Article Copyright 2005 by JimAlsup
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid