Click here to Skip to main content
15,444,353 members
Articles / Programming Languages / C++/CLI
Posted 28 Oct 2001


66 bookmarked

Outlook style GUI - three-way split form

Rate me:
Please Sign up or sign in to vote.
5.00/5 (32 votes)
3 Jul 2002CPOL4 min read
Demonstrates the usage of splitters, treeviews, listviews, panels, toolbars

Image 1


I saw a post on one of the boards where someone was asking whether typical GUIs are possible using the .NET framework. The one that came to my mind instantly was the Outlook Express GUI. I don't mean the Outlook folder bar or it's functionality. I meant the three-way split. MFC people are probably familiar with using CSplitterWnd. Well with .NET, things are actually easier.

I have included the zipped cpp source file. You can download it and compile it from the command line. If you want to use VS.NET, then first create a generic Managed C++ app using App Wizard and replace your main cpp file with the contents of my cpp file. And then on top add a #include "stdafx.h" otherwise you'll get an error while building.

This article will demonstrate the basics of adding toolbars, menus, treeviews, listviews, panels and splitters.

Adding the toolbar

We make use of the ToolBar class. First we create our ToolBar object.

ToolBar *t=new ToolBar();

Now we declare our toolbar buttons

ToolBarButton *tb1,*tb2,*tb3,*tb4,*tb5;

Creating the buttons is easy. Simply call the constructor with the toolbar text as argument.

tb1=new ToolBarButton("New Mail");

If we want to add drop-down menus to toolbar buttons, we normally give them the drop-down style where an inverted triangle is displayed. Doing that is also easy.


Once, we have created all the toolbar buttons we simply add them to our toolbar.


We can set some toolbar styles to determine the look and feel of the toolbar.


Once we've set up the toolbar we can add it to our form.


Creating the Treeview

We make use of the TreeView class and it's members. One particularly useful member is the Nodes property which returns the underlying TreeNodeCollection pointer. We can then use the Add method of the TreeNodeCollection object to add our nodes. Add returns a TreeNode object which we can use to add sub-nodes.

TreeNode *tnode;
tnode->Nodes->Add("Code Project");

As you can see we have added a node called 'Inbox' and we have used the returned TreeNode pointer to add sub-nodes.


We have docked the tree view to the left of the form and we have set some properties. We have also called the ExpandAll member function to expand all our nodes

The Listview

In Outlook Express we have a list view and an html view on the right of the tree view. I haven't used an html view here [not sure if there is such a view in the framework], but I have added two list views. I have then added both the list views to a panel as explained in the next section.

I have docked the first list view to the top and set its view property to detailed view.


Now I have added some columns

m_ptop->Columns->Add("From Address",300,HorizontalAlignment::Left);

Similar to the tree view Nodes property, the list view has an Items property which returns a ListView.ListViewItemCollection pointer. We use the Add member of the ListView.ListViewItemCollection class to add our list view text. This returns a ListViewItem pointer using which we can add data to the other columns.

ListViewItem *lvi;
lvi=m_ptop->Items->Add("Free Software Deal");

For the bottom list view we follow a similar procedure except for the docking style


We will later add these list views to a panel. Thus the top view will be docked to the top and the bottom view will fill the rest of the panel.

Creating the splitters

We use the Splitter class to create our splitters as follows. We first create our panel splitter and set its docking style to DockStyle::Top


Now we create the form splitter that splits the form into the tree view and the panel.


The splitter allows the user to resize the docked control that is immediately before it in the docking order. Therefore I set the X-coordinate of the splitter to one pixel to the right of the tree view. 

Creating the Panel

Now we add the two list views and the panel splitter to our panel.


Now that we have done it we need to set the docking style of the panel.


Finishing up

Okay now we have a tree view with a docking style set to dock to the left and a panel with a fill docking style. Now we can add them both along with the form splitter to our form


That's all. I have also added a menu. If you don't know how to add a menu, take a look at my image viewer article where I have explained about adding menus.

The zip contains the entire cpp source. You may compile the source and run the application to see what we've done. You should get something similar to the screenshot given above, depending on your OS, theme and color settings.

Thank You


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

Written By
United States United States
Nish Nishant is a Principal Software Architect based out of Columbus, Ohio. He has over 17 years of software industry experience in various roles including Lead Software Architect, Principal Software Engineer, and Product Manager. Nish was a Microsoft Visual C++ MVP between 2002 and 2015.

Nish is an industry acknowledged expert in the Microsoft technology stack. He authored C++/CLI in Action for Manning Publications in 2005, and had previously co-authored Extending MFC Applications with the .NET Framework for Addison Wesley in 2003. In addition, he has over 140 published technology articles on and another 250+ blog articles on his WordPress blog. Nish is vastly experienced in team management, mentoring teams, and directing all stages of software development.

Contact Nish : If you are interested in hiring Nish as a consultant, you can reach him via his google email id voidnish.

Company Website :

Comments and Discussions

GeneralNice work! Pin
Eytukan9-May-09 20:11
MemberEytukan9-May-09 20:11 
General[Message Deleted] Pin
cpparasite7-May-09 21:40
Membercpparasite7-May-09 21:40 
GeneralRe: Nice Article but marketing underneath... PinPopular
Nish Nishant8-May-09 2:47
sitebuilderNish Nishant8-May-09 2:47 
General[Message Deleted] Pin
cpparasite3-Sep-09 2:32
Membercpparasite3-Sep-09 2:32 
GeneralRe: Nice Article but marketing underneath... Pin
toxcct14-Oct-09 3:50
Membertoxcct14-Oct-09 3:50 
GeneralRe: Nice Article but marketing underneath... Pin
cpparasite15-Oct-09 2:24
Membercpparasite15-Oct-09 2:24 
GeneralRe: Nice Article but marketing underneath... Pin
toxcct15-Oct-09 2:31
Membertoxcct15-Oct-09 2:31 
GeneralRe: Nice Article but marketing underneath... Pin
cpparasite15-Oct-09 2:37
Membercpparasite15-Oct-09 2:37 
GeneralRe: Nice Article but marketing underneath... Pin
toxcct15-Oct-09 2:43
Membertoxcct15-Oct-09 2:43 
GeneralRe: Nice Article but marketing underneath... Pin
cpparasite15-Oct-09 2:52
Membercpparasite15-Oct-09 2:52 
GeneralRe: Nice Article but marketing underneath... Pin
Jeremy Falcon8-May-09 3:56
professionalJeremy Falcon8-May-09 3:56 
GeneralRe: Nice Article but marketing underneath... Pin
toxcct8-May-09 4:19
Membertoxcct8-May-09 4:19 
GeneralRe: Nice Article but marketing underneath... Pin
Mark Salsbery8-May-09 5:49
MemberMark Salsbery8-May-09 5:49 
GeneralRe: Nice Article but marketing underneath... Pin
Eytukan9-May-09 20:16
MemberEytukan9-May-09 20:16 
Nobody gives you a book for free. Even if Bill gates writes a book, you will have to pay for it. And in this article, no where the author has asked you to buy it. It's your wish to buy if it interests you. If you are so scroogie and want to finish off everything online, Yes, the author of this article still maintains a blog and a site to answer you. Go check it.

Starting to think people post kid pics in their profiles because that was the last time they were cute - Jeremy.

QuestionHow to view a static and dynamic panel on one window Pin
ChrisAlex728-Aug-07 7:56
MemberChrisAlex728-Aug-07 7:56 
Questionwhy not a Form App? Pin
liyang yu9-Sep-04 4:57
Memberliyang yu9-Sep-04 4:57 
GeneralHELP!!!! Pin
abuhun4-Feb-04 16:03
Memberabuhun4-Feb-04 16:03 
GeneralRe: HELP!!!! Pin
Glyn19-Feb-04 4:38
MemberGlyn19-Feb-04 4:38 
GeneralExcellent Job! Pin
Matt Newman20-Nov-02 8:51
MemberMatt Newman20-Nov-02 8:51 

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.