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
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
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
<pre lang=mc++>ToolBar *t=new ToolBar();
Now we declare our toolbar buttons
<pre lang=mc++>ToolBarButton *tb1,*tb2,*tb3,*tb4,*tb5;
Creating the buttons is easy. Simply call the constructor with the toolbar
text as argument.
<pre lang=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
Once, we have created all the toolbar buttons we simply add them to our
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
pointer. We can then use the
Add method of the
TreeNodeCollection object to add
Add returns a
TreeNode object which we can use to add sub-nodes.
<pre lang=mc++>TreeNode *tnode;
As you can see we have added a node called 'Inbox' and we have used the
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
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
Now I have added some columns
Similar to the tree view
Nodes property, the list view has an
which returns a
ListView.ListViewItemCollection pointer. We use the
ListView.ListViewItemCollection class to add our list view text. This
ListViewItem pointer using which we can add data to the other columns.
<pre lang=mc++>ListViewItem *lvi;
lvi=m_ptop->Items->Add("Free Software Deal");
For the bottom list view we follow a similar procedure except for the docking
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
Now we create the form splitter that splits the form into the tree view and
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.
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
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.