Click here to Skip to main content
12,297,165 members (66,158 online)
Click here to Skip to main content
Add your own
alternative version


505 bookmarked

A Serious Outlook Style Navigation Pane Control

, 15 Nov 2010 CC (ASA 2.5)
Rate this:
Please Sign up or sign in to vote.
A quality rendered Outlook style navigation pane control

1. Introduction

Who doesn't know the Outlook Navigation Pane on the left side of the Outlook screen? Do you want to use the Navigation Pane in your project for free? Read on.


2. Background

There is a lot of junk on the .NET market. Small study room projects being sold as large toolkits providing a bunch of crappy controls for a lot of money. To extend my portfolio and to give the open source community something back, I decided to make this control available free of charge. This control is also a note to control vendors, take your customers serious and provide valuable controls and support for their money. So enough preaching, let's get cracking.

Windows Form, the King is Dead??

I decided to create this control for Windows Forms to show the potential of Windows Forms. Windows Forms is not dead, because it performs betters and is responsive. WPF has a way to go. Besides that, you need a designer to design your controls, otherwise you'll end up with a Christmas tree.

3. Structure of the Navigation Pane

In this section, I'll briefly explain the basic objects of the Navigation Pane.

Buttons bands and groups

The Navigation Pane consist of bands, buttons and groups. The bands (2) are the basic object the Pane exists of. Each band is one to one linked to a button (1). The band is the container that comes to the front when the user clicks on one of the buttons. The band contains the other controls like the group (3). The bands can be expanded with groups which can be compared to the groups in Outlook. The Group is a control container which can be collapsed and expanded.


A button has three states, normal, when it's hovered by the mouse and when it's the active button or when the button is down.

normal hovered active
Button normal Button hovered Button Active

A button is one to one linked to band. If a band appears as part of the control, a new button appears as well. It's not possible to add buttons without adding a band.


A group have two states, either it's expanded and all child controls are visible or it's collapsed and only the header is visible.

expanded collapsed
Group expanded Group collapsed

4. Layout

The main class of the control (NaviBar) contains barely more than two collections containing the buttons and the bands. The most important intelligence is in the layout classes. The only thing the main class does is deciding when the layout process should be invoked. This is the layout engine principle. Explained in more depth here on MSDN.

Schema layout

The layout process decides what control should be visible, active and at what position, etc. The advantage of this principle is that it’s really easy to implement a different layout without too much hassle, because the main control only knows that there is an layout but what it exactly does, he doesn't care either. As long as it looks nice, like the toolbox in Visual Studio or like the Navigation pane in Outlook, or some other fancy view.

Renderers and Colortable

Separate classes are responsible for drawing the controls. The main class delegates like a lazy manager. The renderers are only responsible for drawing the objects, the colours are coming from separate classes, the colortables. If you are in a good mood, you can use flashy bright colors with a few lines of coding:

NaviButtonRenderer.ColorTable = FlashyColorTable

This elegant principle is ripped away from the default .NET menus which are coming with Visual Studio.

5. Features

Here is a brief list of the features. To see the whole package, see the demo project.


It’s possible to present the Navigation Pane in compact mode. Click on one of the small buttons on the top right of the header of the control. You can also collapse the Navigation Pane by setting the NaviBar.Collapsed property to true. If the end-user clicks on the collapsed bar, the band will popup on top of the other controls.

Bar Collapsed Bar expanded
Collapsed mode Expanded mod


The Navigation Pane comes in six different flavors. Office 2007 is the main layout and for those who are stuck in the past, there is the Office 2003 look and feel. If you want to create a new colourstyle, you need to make an override of the NaviColorTable class.

Office 2007 Blue Office 2007 Black Office 2007 Silver
Office 2007 Blue Office 2007 Black Office 2007 Silver
Office 2003 Blue Office 2003 Silver Office 2003 Green
Office 2003 Blue Office 2003 Silver Office 2003 Green
Office 2010 Blue Office 2010 Silver Office 2010 Black
Office 2010 Blue Office 2010 Silver Office 2010 Black

Right to Left

This Navigation Pane is among the few who do support Right to left layout. Not much work when the layout has been defined in separate classes. It’s possible that not all features are like they should be. If one of the Arabics would like to test it and make me happy with the results?

Flowing from the large buttons, to small buttons to menu items

When there is not enough space for the small overflow buttons, the buttons will appear as menuitems:

Overflow to menu

Saving Settings

Options form

It’s possible for the end user to customize the layout. Like the ordering of the buttons or the visibility of the buttons. It’s possible to save the layout settings in an external data file. The details which are saved are the ordering of the buttons, the visibility of the buttons, the amount of visible buttons, the position of the splitter and whether the Pane is collapsed or not.

The settings are stored in the Settings property in the NaviBar class. To save these settings to a file, add a reference to Guifreaks.NavigationBar.XmlSerializers.dll. This DLL uses XML Serialization and is generated with sgen.exe for performance considerations. You as a developer are responsible for saving the settings to a data file of your preference. Here is a sample of saving the settings to an XML file.

if (saveFileDialogSettings.ShowDialog() == DialogResult.OK)
      string fileName = saveFileDialogSettings.FileName;
      NaviBarSettingsSerializer serial = new NaviBarSettingsSerializer();
      using (TextWriter w = new StreamWriter(fileName))
         serial.Serialize(w, naviBar1.Settings);
   catch (Exception ex)

You can use the same DLL to load the settings. After loading the settings, use the ApplySettings method in the NaviBar class to activate the settings.

if (openFileDialogSettings.ShowDialog() == DialogResult.OK)
      string fileName = openFileDialogSettings.FileName;
      NaviBarSettingsSerializer serial = new NaviBarSettingsSerializer();
      using (StreamReader reader = new StreamReader(fileName))
         NaviBarSettings settings = serial.Deserialize(reader) as NaviBarSettings;
         if (settings != null)
            naviBar1.Settings = settings;
   catch (Exception ex)

Integration with Visual Studio

The integration with Visual Studio is mostly the one that comes at the end of the list, the one I rather forget. But it's very important. Integration with the document outline window for example. Other design time features are clicking on the button activates the band and brings it to the front.


The Control comes with an installer which automatically adds a tab and toolboxitems in Visual Studio. If you want to have an installable package, go to

6. Samples

Here are a few basic code samples that should get you up running fast.

How to Add a New Group?

While you are into the designer, you can select the group from the toolbox and drag it into the band. Here is a code sample when you want to add a group from the source:

NaviGroup group = new NaviGroup();  
group.Text = "test";  
group.Expanded = true;  
group.Dock = DockStyle.Top;  

How to Add a New Band?

You can add a new band to the Navigation Pane using the NaviBar.Bands property. The small image appears when the button is presented in a horizontal way on the bottom. The large image appears when the buttons are presented horizontally as large buttons.

NaviBand band = new NaviBand();  
band.Text = "NaviBand" + (naviBar1.Bands.Count + 1).ToString();  
band.SmallImage = Properties.Resources.bookmark1;  
band.LargeImage = Properties.Resources.bookmark;  

How to Set the Layout?

The layout can be set using the NaviBar.LayoutStyle property.

naviBar1.LayoutStyle = NaviLayoutStyle.Office2003Silver;

How to Activate a Band?

Making a particular band the active band is fairly simple:

naviBar1.ActiveBand = naviBar1.Bands[0];


I recommend using the latest release and the installer.
The latest releases installer and source code can be found at


  • 13 November, 2010: Updated article to latest version
  • 21 October, 2009: Added a Visual Basic .NET sample project
  • 20 October, 2009: Article CodeProject
  • 16 October, 2009: Initial release


This article, along with any associated source code and files, is licensed under The Creative Commons Attribution-ShareAlike 2.5 License


About the Author

Netherlands Netherlands
I design software for a ERP software vendor in the Netherlands.

For more information, the latest version installer etc goto

You may also be interested in...

Comments and Discussions

Questionvisual studio 2013 community Pin
Member 1047859828-Sep-15 11:05
memberMember 1047859828-Sep-15 11:05 
AnswerRe: visual studio 2013 community Pin
HawVie7-Feb-16 10:51
memberHawVie7-Feb-16 10:51 
QuestionGetting Error Pin
Member 117133079-Jun-15 23:01
memberMember 117133079-Jun-15 23:01 
QuestionSuccess porting to VB? Pin
NFranks6-May-15 7:35
memberNFranks6-May-15 7:35 
SuggestionTool Tip Pin
anujithramanan28-Jan-15 1:03
memberanujithramanan28-Jan-15 1:03 
AnswerGet Height of Left Panel on Click Event Pin
Admilson Moreira Silva25-Jan-15 2:46
memberAdmilson Moreira Silva25-Jan-15 2:46 
QuestionCan I use this source code for a commercial product? Pin
Member 833375629-Dec-14 21:21
memberMember 833375629-Dec-14 21:21 
QuestionThank Pin
Vaibhav Bhavsar24-Nov-14 23:39
professionalVaibhav Bhavsar24-Nov-14 23:39 
GeneralHi Pin
Karthik Swaminathan 201230-Oct-14 0:11
groupKarthik Swaminathan 201230-Oct-14 0:11 
QuestionDesire for accordion behavior Pin
Sean_C_Roberts6-Oct-14 19:00
memberSean_C_Roberts6-Oct-14 19:00 
AnswerRe: Desire for accordion behavior Pin
HawVie6-Oct-14 22:03
memberHawVie6-Oct-14 22:03 
GeneralRe: Desire for accordion behavior Pin
Sean_C_Roberts7-Oct-14 1:27
memberSean_C_Roberts7-Oct-14 1:27 
QuestionAnything docked to the bottom of a NaviGroup doesn't get hidden when NaviGroup is collapsed Pin
Sean_C_Roberts6-Oct-14 18:54
memberSean_C_Roberts6-Oct-14 18:54 
AnswerRe: Anything docked to the bottom of a NaviGroup doesn't get hidden when NaviGroup is collapsed Pin
HawVie6-Oct-14 22:10
memberHawVie6-Oct-14 22:10 
Questionif there is PopUPminwidth why there is no PopUPMAXwidth? Pin
trialnerror3-Oct-14 10:57
membertrialnerror3-Oct-14 10:57 
AnswerRe: if there is PopUPminwidth why there is no PopUPMAXwidth? Pin
HawVie6-Oct-14 22:05
memberHawVie6-Oct-14 22:05 
Questionhow to add the Navigation into my existing project vb windows application Pin
Aiman Ali26-Aug-14 2:00
memberAiman Ali26-Aug-14 2:00 
QuestionClicking Twice Pin
Member 1101606915-Aug-14 22:24
memberMember 1101606915-Aug-14 22:24 
AnswerRe: Clicking Twice Pin
HawVie6-Oct-14 22:11
memberHawVie6-Oct-14 22:11 
QuestionInstaller Pin
cbretana26-Jun-14 5:16
membercbretana26-Jun-14 5:16 
QuestionCan place a form inside a band? Pin
mr_medallas9-Jun-14 7:02
membermr_medallas9-Jun-14 7:02 
Questionhow to change band font color in navigation band Pin
abhishek goutam28-Apr-14 18:15
memberabhishek goutam28-Apr-14 18:15 
GeneralOld version Pin
gokude8-Mar-14 3:49
membergokude8-Mar-14 3:49 
GeneralRe: Old version Pin
HawVie28-Apr-14 21:24
memberHawVie28-Apr-14 21:24 
QuestionAdding Bands & groups in code Pin
ivanmdeb2-Mar-14 23:30
memberivanmdeb2-Mar-14 23:30 
QuestionSharpDevelop Pin
Fratton6-Dec-13 3:25
memberFratton6-Dec-13 3:25 
AnswerRe: SharpDevelop Pin
HawVie6-Dec-13 4:28
memberHawVie6-Dec-13 4:28 
Bugpop up is not working well Pin
stelios198428-Nov-13 21:34
memberstelios198428-Nov-13 21:34 
AnswerRe: pop up is not working well Pin
HawVie28-Nov-13 22:48
memberHawVie28-Nov-13 22:48 
GeneralMy vote of 5 Pin
javierilillof16-Aug-13 0:52
memberjavierilillof16-Aug-13 0:52 
BugCannot change popup height Pin
Jack Han11-Aug-13 17:23
memberJack Han11-Aug-13 17:23 
QuestionHow to set the popup height & width??? Pin
Christophe140003-Jul-13 4:26
memberChristophe140003-Jul-13 4:26 
QuestionC# different color theme example Pin
unknown000000014-May-13 2:54
memberunknown000000014-May-13 2:54 
AnswerRe: C# different color theme example Pin
HawVie5-May-13 0:14
memberHawVie5-May-13 0:14 
QuestionNavband Click Event Pin
Shadow__Walker30-Apr-13 12:13
memberShadow__Walker30-Apr-13 12:13 
QuestionRuntime addition of groups or bands Pin
DeviL_Dawg26-Apr-13 13:13
memberDeviL_Dawg26-Apr-13 13:13 
QuestionEnabling autoscroll bar in group Pin
Member 935861112-Apr-13 0:03
memberMember 935861112-Apr-13 0:03 
AnswerRe: Enabling autoscroll bar in group Pin
Member 935861112-Apr-13 1:37
memberMember 935861112-Apr-13 1:37 
QuestionError in example? Pin
Member 935861111-Apr-13 5:23
memberMember 935861111-Apr-13 5:23 
AnswerRe: Error in example? Pin
HawVie11-Apr-13 7:14
memberHawVie11-Apr-13 7:14 
GeneralRe: Error in example? Pin
Member 935861111-Apr-13 23:54
memberMember 935861111-Apr-13 23:54 
QuestionAdding Controls (i.e. Button Control) during runtime to a Nav Group Pin
Mazonine17-Mar-13 14:46
memberMazonine17-Mar-13 14:46 
AnswerRe: Adding Controls (i.e. Button Control) during runtime to a Nav Group Pin
HawVie17-Mar-13 21:26
memberHawVie17-Mar-13 21:26 
QuestionNaviColorTable Override for new color style? Pin
demented_geek15-Mar-13 5:51
memberdemented_geek15-Mar-13 5:51 
AnswerRe: NaviColorTable Override for new color style? Pin
HawVie15-Mar-13 11:25
memberHawVie15-Mar-13 11:25 
GeneralRe: NaviColorTable Override for new color style? Pin
demented_geek16-Mar-13 3:32
memberdemented_geek16-Mar-13 3:32 
GeneralRe: NaviColorTable Override for new color style? Pin
demented_geek18-Mar-13 5:06
memberdemented_geek18-Mar-13 5:06 
GeneralRe: NaviColorTable Override for new color style? Pin
demented_geek18-Mar-13 5:43
memberdemented_geek18-Mar-13 5:43 
GeneralRe: NaviColorTable Override for new color style? Pin
HawVie18-Mar-13 6:56
memberHawVie18-Mar-13 6:56 
GeneralRe: NaviColorTable Override for new color style? Pin
Member 1186044224-Jul-15 0:44
memberMember 1186044224-Jul-15 0:44 

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.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.160525.2 | Last Updated 15 Nov 2010
Article Copyright 2009 by HawVie
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid