Click here to Skip to main content
15,348,004 members
Articles / Desktop Programming / Windows Forms
Posted 20 Oct 2009


519 bookmarked

A Serious Outlook Style Navigation Pane Control

Rate me:
Please Sign up or sign in to vote.
4.94/5 (135 votes)
15 Nov 2010CC (ASA 2.5)6 min read
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.

Button normalButton hoveredButton 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.

Group expandedGroup 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 CollapsedBar expanded
Collapsed modeExpanded 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 BlueOffice 2007 BlackOffice 2007 Silver
Office 2007 BlueOffice 2007 BlackOffice 2007 Silver
Office 2003 BlueOffice 2003 SilverOffice 2003 Green
Office 2003 BlueOffice 2003 SilverOffice 2003 Green
Office 2010 BlueOffice 2010 SilverOffice 2010 Black
Office 2010 BlueOffice 2010 SilverOffice 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

Comments and Discussions

QuestionMake this tool available for Visual Studio 2019 Pin
Richard A. Arnold20-Mar-21 7:12
MemberRichard A. Arnold20-Mar-21 7:12 
QuestionAdding Navigation Panel in My Project Pin
Salim TS9-Oct-19 22:39
professionalSalim TS9-Oct-19 22:39 
QuestionInstaller and Source code link Pin
Salim TS9-Oct-19 22:35
professionalSalim TS9-Oct-19 22:35 
QuestionVisual Studio 2015 Pin
Member 1274922623-Nov-16 23:21
MemberMember 1274922623-Nov-16 23:21 
QuestionThanks Pin
jaadrare4-Oct-16 11:08
Memberjaadrare4-Oct-16 11:08 
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
JimmyGoogle769-Jun-15 23:01
professionalJimmyGoogle769-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
Nguyen Duy Phuong29-Dec-14 21:21
MemberNguyen Duy Phuong29-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
MemberKarthik 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
Bobjr7415-Aug-14 22:24
professionalBobjr7415-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 

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.