Outlook style GUI - three-way split form

• Download project source - 2 Kb

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.

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.

tb1->Style=ToolBarButtonStyle::DropDownButton;

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

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.

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.

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.

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.

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.

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

Now I have added some columns

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.

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

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

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

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

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.

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.

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

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