Click here to Skip to main content
15,867,594 members
Articles / Programming Languages / C++/CLI
Article

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 187.7K   2.9K   67   19
Demonstrates the usage of splitters, treeviews, listviews, panels, toolbars

Image 1

Introduction

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.

MC++
ToolBar *t=new ToolBar();

Now we declare our toolbar buttons

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

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

MC++
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.

MC++
tb1->Style=ToolBarButtonStyle::DropDownButton;

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

MC++
t->Buttons->Add(tb3);
t->Buttons->Add(tb4);
t->Buttons->Add(tb5);

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

MC++
t->Appearance=ToolBarAppearance::Flat;
t->BorderStyle=BorderStyle::FixedSingle; 
t->Dock=DockStyle::Top;

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

MC++
this->Controls->Add(t);

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.

MC++
TreeNode *tnode;
tnode=m_ptreeview->Nodes->Add("Inbox");
tnode->Nodes->Add("Code Project");
tnode->Nodes->Add("Linux");

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

MC++
m_ptreeview->Dock=DockStyle::Left;
m_ptreeview->HideSelection=false; 
m_ptreeview->ShowPlusMinus=true;
m_ptreeview->ExpandAll();

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.

MC++
m_ptop->Dock=DockStyle::Top;
m_ptop->View=View::Details; 

Now I have added some columns

MC++
m_ptop->Columns->Add("Subject",150,HorizontalAlignment::Left);
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.

MC++
ListViewItem *lvi;
lvi=m_ptop->Items->Add("Free Software Deal");
lvi->SubItems->Add("jason@jason.org");

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

MC++
m_pbottom->Dock=DockStyle::Fill;

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

MC++
split2->Dock=DockStyle::Top;
split2->Height=2;

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

MC++
split1->Location=System::Drawing::Point(201,0); 
split1->Width=2;

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.

MC++
m_panel->Controls->Add(m_pbottom);
m_panel->Controls->Add(split2);
m_panel->Controls->Add(m_ptop); 

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

MC++
m_panel->Dock=DockStyle::Fill;

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

MC++
this->Controls->Add(m_panel);
this->Controls->Add(split1);
this->Controls->Add(m_ptreeview);

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

License

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 technology enthusiast from Columbus, Ohio. He has over 20 years of software industry experience in various roles including Chief Technology Officer, Senior Solution Architect, Lead Software Architect, Principal Software Engineer, and Engineering/Architecture Team Leader. Nish is a 14-time recipient of the Microsoft Visual C++ MVP Award.

Nish authored C++/CLI in Action for Manning Publications in 2005, and co-authored Extending MFC Applications with the .NET Framework for Addison Wesley in 2003. In addition, he has over 140 published technology articles on CodeProject.com and another 250+ blog articles on his WordPress blog. Nish is experienced in technology leadership, solution architecture, software architecture, cloud development (AWS and Azure), REST services, software engineering best practices, CI/CD, mentoring, and directing all stages of software development.

Nish's Technology Blog : voidnish.wordpress.com

Comments and Discussions

 
GeneralNice work! Pin
Eytukan9-May-09 20:11
Eytukan9-May-09 20:11 
General[Message Deleted] Pin
cpparasite7-May-09 21:40
cpparasite7-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
cpparasite3-Sep-09 2:32 
GeneralRe: Nice Article but marketing underneath... Pin
toxcct14-Oct-09 3:50
toxcct14-Oct-09 3:50 
GeneralRe: Nice Article but marketing underneath... Pin
cpparasite15-Oct-09 2:24
cpparasite15-Oct-09 2:24 
GeneralRe: Nice Article but marketing underneath... Pin
toxcct15-Oct-09 2:31
toxcct15-Oct-09 2:31 
GeneralRe: Nice Article but marketing underneath... Pin
cpparasite15-Oct-09 2:37
cpparasite15-Oct-09 2:37 
GeneralRe: Nice Article but marketing underneath... Pin
toxcct15-Oct-09 2:43
toxcct15-Oct-09 2:43 
GeneralRe: Nice Article but marketing underneath... Pin
cpparasite15-Oct-09 2:52
cpparasite15-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
toxcct8-May-09 4:19 
GeneralRe: Nice Article but marketing underneath... Pin
Mark Salsbery8-May-09 5:49
Mark Salsbery8-May-09 5:49 
GeneralRe: Nice Article but marketing underneath... Pin
Eytukan9-May-09 20:16
Eytukan9-May-09 20:16 
QuestionHow to view a static and dynamic panel on one window Pin
ChrisAlex728-Aug-07 7:56
ChrisAlex728-Aug-07 7:56 
Questionwhy not a Form App? Pin
liyang yu9-Sep-04 4:57
liyang yu9-Sep-04 4:57 
GeneralHELP!!!! Pin
abuhun4-Feb-04 16:03
abuhun4-Feb-04 16:03 
GeneralRe: HELP!!!! Pin
Glyn19-Feb-04 4:38
Glyn19-Feb-04 4:38 
GeneralExcellent Job! Pin
Matt Newman20-Nov-02 8:51
Matt 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.