Click here to Skip to main content
Click here to Skip to main content

Outlook style GUI - three-way split form

, 3 Jul 2002 CPOL
Rate this:
Please Sign up or sign in to vote.
Demonstrates the usage of splitters, treeviews, listviews, panels, toolbars


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)


About the Author

Nish Nishant

United States United States
Nish is a real nice guy who has been writing code since 1990 when he first got his hands on an 8088 with 640 KB RAM. Originally from sunny Trivandrum in India, he has been living in various places over the past few years and often thinks it’s time he settled down somewhere.
Nish has been a Microsoft Visual C++ MVP since October, 2002 - awfully nice of Microsoft, he thinks. He maintains an MVP tips and tricks web site - where you can find a consolidated list of his articles, writings and ideas on VC++, MFC, .NET and C++/CLI. Oh, and you might want to check out his blog on C++/CLI, MFC, .NET and a lot of other stuff -
Nish loves reading Science Fiction, P G Wodehouse and Agatha Christie, and also fancies himself to be a decent writer of sorts. He has authored a romantic comedy Summer Love and Some more Cricket as well as a programming book – Extending MFC applications with the .NET Framework.
Nish's latest book C++/CLI in Action published by Manning Publications is now available for purchase. You can read more about the book on his blog.
Despite his wife's attempts to get him into cooking, his best effort so far has been a badly done omelette. Some day, he hopes to be a good cook, and to cook a tasty dinner for his wife.

Comments and Discussions

GeneralNice work! PinmemberVuNic9-May-09 21:11 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    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.150326.1 | Last Updated 4 Jul 2002
Article Copyright 2001 by Nish Nishant
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid