Reader Level:
ARTICLE

An "Outlook Like" control

Posted by aeddin Articles | Visual C# October 01, 2007
This is a control that behaves like the Tab control but have visual cues that look more like the Navigation panel in outlook. And since this is more of a tab control than a navigation panel control, you are free to add as many tabs as you like.
  • 0
  • 0
  • 17383
Download Files:
 

Introduction

This is a control that behaves like the Tab control but have visual cues that look more like the Navigation panel in outlook. And since this is more of a tab control than a navigation panel control, you are free to add as many tabs as you like.

The pattern used in coding the behavior of this control was to code the control behavior closer to the "Tab" control behavior than the Navigation panel behavior. Therefore, the control is made of a collection of Tabs; each Tab has 2 drawing surfaces and an Icon. The Icon is used when a Tab is not visible.

Please note that this control is not thread safe. I will make it thread safe at some point.  If you are interested in making it thread safe, you will have to modify the Change theme code in all the controls in the solution.

image006.png

How to use the Control?

1. Include the following Dll(s)

  • AdrdCBC.dll
  • AdrdHDC.dll
  • AdrdNavigationThemes.dll
  • AdrdTBC.dll
  • HDCUserControl.dll
  • NavCtl.dll
  • OtherThemes.dll 

In your project debug directory or at least in a directory that the PATH is known to VS. Or better yet, place them in the GAC.

2. Set a reference to "NavCtl.dll" in your project.

3. Add the control to your toolbox. To do this, right click in the toolbox and click "Choose Items".

4. In the "Choose Toolbox Items" dialog box, click "Browse" and find the "NavCtl.dll".

5. Once selected, the Control "AdrdNC" and "TabC" will be added to your Toolbox active tab.

6. Drag and drop the control on any form.

7. Now add a new User Control to your project. This user control must visually inherit from the "HDCControl" as in the next two figures.

 image-1.jpg

Figure 1:

image-2.jpg
Figure 2:

8. Design your User control by adding other controls to it.

9. In your code view of the containing form, create a locally scoped variable of type "AdrdNavigationTabCollection". The following is a code example

 

public partial class Form1 : Form

{

    AdrdNavigationTabCollection TabsCollection = new AdrdNavigationTabCollection();

10. In the form "Load" event, create a variable of type "AdrdNavigationTab"

AdrdNavigationTab tab = new AdrdNavigationTab();

11. Assign the UserControl you created in steps 7 and 8 to the "AdrdNavigationTab" variable HeaderControl and DetailControl properties.

tab.HeaderControl = new YOURCONTROL();

tab.DetailControl = new YOURCONTROL ();

Note: Replace "YOURCONTROL" with your User Control Name

12. Add the instant of "AdrdNavigationTab" you created in step 10 to the collection you created in step 9.

      TabsCollection.Add(tab);

13. Assign the instant of the collection "AdrdNavigationTabCollection" to the "AllTabsCollection" property of the control

this.adrdNC1.AllTabsCollection = TabsCollection;

14. (Optional) create the "OnTabAction" and "OnChildClick" handlers.

this.adrdNC1.OnTabAction += new TabActions(adrdNC1_OnTabAction);

this.adrdNC1.OnChildClick += new ChildControlWasClickedActions (adrdNC1_OnChildClick);

Important Steps

1. Make sure all your user controls (Tabs) inherit from HDCControl.

public partial class YOURCONTROL : HDCUserControl.HDCControl

2. To actually make the control pass values back and forth between the different surfaces and/or the containing form, always call the "OnAction" method of the "HDCControl" instant.

For example, if you included a TreeView control on your HDCControl Instant drawing surface and you want to update your containing form with the node text when the node selected is changed, you would do the following:

Call the "OnAction" method in the TreeView AfterSelection Even Handler like this

void tv_AfterSelect(object sender, System.Windows.Forms.TreeViewEventArgs e)

{

    OnAction(this, "Node selection Changed");

}

In your container form, code the AdrdNC Control  "OnTabAction" event.

3. The OnTabAction will pass you the HDCControl control instant that raised the OnAction event and the "AdrdNavigationTab" item. So you can have both drawing surfaces to the control and can cause changes on either of the drawing surfaces and/or the containing form.

The attached solution includes a "TestHarness" project that includes most of the implementations of the control.

Also, there is a DOC directory in the attached solution that holds some documentation I started working on while developing the control. Not complete though.

COMMENT USING

Trending up