Click here to Skip to main content
15,886,578 members
Articles / Programming Languages / XML

Navigation Menu for Windows Forms (Outlook Bar Style)

Rate me:
Please Sign up or sign in to vote.
2.78/5 (14 votes)
2 Apr 2007CPOL2 min read 125K   7.7K   36   14
This article is about the creation of a user control which has the style like Outlook Express bar or DHTML Menu.

Screenshot - scrnshot.jpg

Introduction

For one of my hobby projects, I wanted to use a 'Main Menu'. Rather than using the menu feature of windows, I was thinking about some DHTML-style dropdown list menus. After searching, I got many paid and free controls from which I only liked Infragestics controls. But in practice, it is a big mess; I have to install the whole thing, my project is becoming too large and there is less performance. So I thought I must develop the user control of my dreams.

I would like to share my new user control with you so that you also can use it. It is easy to customize if you have knowledge in C#.

Using the Code

Just download the code and add to your Windows Forms project. The menu items can be added to the control using:

C#
ArrayList NavItems = new ArrayList();

ArrayList childNavItems = new ArrayList();
childNavItems.Add(new ctrlMenuBar.childNavItems("Leads", "mnuLeads"));
childNavItems.Add(new ctrlMenuBar.childNavItems("Project List", 
    "mnuProjectList"));
childNavItems.Add(new ctrlMenuBar.childNavItems("Development", 
    "mnuDevelopment"));

ctrlMenuBar.NavItem nv = new ctrlMenuBar.NavItem("Projects", "mnuProjects", 
    childNavItems, true);
NavItems.Add(nv);

In the following line: ctrlMenuBar.NavItem("Projects", "mnuProjects", childNavItems,true); the true is for telling the control whether it is the selected item or not. This parameter is optional. If you put true on more than one item, the last item will be the selected item.

For Rendering the menu, you have to call the method:

C#
ctrlMenuBar1.RenderMenu();

A typical menu initialization section will look like this:

C#
private void frmMain_Load(object sender, EventArgs e)
{
    ArrayList NavItems = new ArrayList();

    ArrayList childNavItems = new ArrayList();
    childNavItems.Add(new ctrlMenuBar.childNavItems("Leads", "mnuLeads"));
    childNavItems.Add(new ctrlMenuBar.childNavItems("Project List", 
        "mnuProjectList"));
    childNavItems.Add(new ctrlMenuBar.childNavItems("Development", 
        "mnuDevelopment"));

    ctrlMenuBar.NavItem nv = new ctrlMenuBar.NavItem("Projects", 
        "mnuProjects", childNavItems, true);
    NavItems.Add(nv);
    childNavItems = new ArrayList();
    childNavItems.Add(new ctrlMenuBar.childNavItems("Client List", 
        "mnuClientList"));

    nv = new ctrlMenuBar.NavItem("Clients", "mnuClients", childNavItems);

    NavItems.Add(nv);

    childNavItems = new ArrayList();
    childNavItems.Add(new ctrlMenuBar.childNavItems("Developer List", 
        "mnuDeveloperList"));

    nv = new ctrlMenuBar.NavItem("Developers", "mnuDevelopers", 
        childNavItems);

    NavItems.Add(nv);

    childNavItems = new ArrayList();
    childNavItems.Add(new ctrlMenuBar.childNavItems("Reports","mnuReports"));
    childNavItems.Add(new ctrlMenuBar.childNavItems("Events", "mnuEvents"));
    childNavItems.Add(new ctrlMenuBar.childNavItems("Documents",
        "mnuDocuments"));
    nv = new ctrlMenuBar.NavItem("Utilities", "mnuUtilities", childNavItems);

    NavItems.Add(nv);

    ctrlMenuBar1.MenuItems = NavItems;
    ctrlMenuBar1.RenderMenu();
}

You can catch the button click events from the control to the method OnMenuSelection(). For example:

C#
private void ctrlMenuBar_OnMenuSelection(object sender, EventArgs e)
{
    Button btn = (Button)sender;
    label1.Text = "You clicked: " + btn.Name;
}

Behind the Screens

Behind the screens, the User Control (ctrlMenuBar.cs) uses a main class ctrlMenuBar with two child classes: NavItem for parent menu items, and childNavItems for child menu items.

History

I am still making changes to the User Control. Whenever a major change is added, I will update this article. Thanks for trying my User Control.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Architect ORION INDIA SYSTEMS
India India
Praveen.V.Nair - aka NinethSense - PMP, Microsoft MVP - is working as a Head of Technology and Architecture at Orion India Systems, Kochi, India. He has been playing with electronics from the age of 10 and with computers from the age of 14. He usually blogs at http://blog.ninethsense.com/.

Comments and Discussions

 
Questionneed help in removing the spaces after the main menu Pin
Member 20577314-Aug-21 4:57
Member 20577314-Aug-21 4:57 
AnswerSource code for Visual Studio 2013 / 2015 Pin
Praveen Nair (NinethSense)3-Sep-15 8:05
Praveen Nair (NinethSense)3-Sep-15 8:05 
QuestionPort for VS2013 Pin
Praveen Nair (NinethSense)9-Aug-15 8:05
Praveen Nair (NinethSense)9-Aug-15 8:05 
namespace WindowsFormsApplication1
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}

private void Form1_Load(object sender, EventArgs e)
{
ArrayList NavItems = new ArrayList();

ArrayList childNavItems = new ArrayList();
childNavItems.Add(new UserControl1.childNavItems("Leads", "mnuLeads"));
childNavItems.Add(new UserControl1.childNavItems("Project List",
"mnuProjectList"));
childNavItems.Add(new UserControl1.childNavItems("Development",
"mnuDevelopment"));

UserControl1.NavItem nv = new UserControl1.NavItem("Projects", "mnuProjects",
childNavItems, true);
NavItems.Add(nv);


userControl11.MenuItems = NavItems;

userControl11.RenderMenu();
}

private void userControl11_OnMenuSelection(object sender, EventArgs e)
{
Button btn = (Button)sender;
Text = "You clicked: " + btn.Name;
}
}
}



//---------------------------

namespace WindowsFormsApplication1
{
public partial class UserControl1 : UserControl
{

public event EventHandler OnMenuSelection;
private static ArrayList NavItems = new ArrayList();
private static string selecteditem = string.Empty;

private System.Resources.ResourceManager rm = new System.Resources.ResourceManager("Resources", System.Reflection.Assembly.GetExecutingAssembly());
public UserControl1()
{
InitializeComponent();
}

public ArrayList MenuItems
{
set
{
NavItems = value;
}
get
{
return (NavItems);
}
}

private void UserControl1_Load(object sender, EventArgs e)
{

}
public void RenderMenu()
{
if (NavItems.Count == 0) return;
LoadMenuItems(NavItems);
}

private void LoadMenuItems(ArrayList NavItems)
{
int btnHeight = 30;//Properties.Resources.btnBgnd.Height;


Panel mainpanel = new Panel();
mainpanel.Dock = DockStyle.Top;
mainpanel.AutoSize = true;
mainpanel.Name = "mainpanel";

Panel pnl = new Panel();
pnl.Height = 20;
pnl.Dock = DockStyle.Top;
mainpanel.Controls.Add(pnl);
string selectedbutton = string.Empty;
foreach (NavItem navitems in NavItems)
{
Button btn = new Button();

btn.Height = btnHeight;
//btn.BackgroundImage = (Image)Properties.Resources.btnBgnd;
btn.Dock = DockStyle.Bottom;
btn.Name = navitems.eventCode;
btn.Click += new EventHandler(btn_Click);
btn.Text = navitems.MnuItem;

if (navitems.Selected == true) selectedbutton = btn.Name;

mainpanel.Controls.Add(btn);


pnl = new Panel();
pnl.Dock = DockStyle.Bottom;
pnl.Name = "panel_" + navitems.eventCode;
pnl.Visible = false;

foreach (childNavItems childnavitems in navitems.childNavItems)
{
pnl.Height = navitems.childNavItems.Count * btnHeight;
Button childbtn = new Button();

childbtn.FlatStyle = FlatStyle.Flat;
childbtn.FlatAppearance.MouseOverBackColor = Color.LightGray;
childbtn.Height = btnHeight;
childbtn.Dock = DockStyle.Bottom;
childbtn.Text = "- " + childnavitems.MnuItem;
childbtn.TextAlign = ContentAlignment.MiddleLeft;
childbtn.Click += new EventHandler(childbtnbtn_Click);
childbtn.Name = childnavitems.eventCode;


pnl.Controls.Add(childbtn);
}

mainpanel.Controls.Add(pnl);


}
panel1.Controls.Add(mainpanel);


if (selectedbutton != string.Empty)
{
Button btn = (Button)panel1.Controls["mainpanel"].Controls[selectedbutton];
selecteditem = btn.Name;
ShowChilds(btn);
}
}

private void btn_Click(object sender, EventArgs e)
{
if (selecteditem != ((Button)sender).Name)
{
ShowChilds((Button)sender);
}


OnMenuSelection(sender, e);
selecteditem = ((Button)sender).Name;

}
private void ShowChilds(Button btn)
{
ResetAllPanels();

Panel pnl = (Panel)panel1.Controls["mainpanel"].Controls["panel_" + btn.Name];
pnl.Visible = true;


}
private void childbtnbtn_Click(object sender, EventArgs e)
{
OnMenuSelection(sender, e);
}
private void ResetAllPanels()
{
foreach (Control ctrl in panel1.Controls["mainpanel"].Controls)
{
if (ctrl is Panel)
{
if (ctrl.Name.Length >= 6)
{
if (ctrl.Name.Substring(0, 6) == "panel_")
{
if (ctrl.Visible == true) ctrl.Visible = false;
}
}
}
}
}

public class NavItem
{
public string MnuItem;
public string eventCode;
public ArrayList childNavItems;
public bool Selected = false;

public NavItem(string _MnuItem, string _eventCode, ArrayList _childNavItems, bool _selected)
{
MnuItem = _MnuItem;
eventCode = _eventCode;
childNavItems = _childNavItems;
Selected = _selected;
}
public NavItem(string _MnuItem, string _eventCode, ArrayList _childNavItems)
{
MnuItem = _MnuItem;
eventCode = _eventCode;
childNavItems = _childNavItems;
}

}

public class childNavItems
{
public string MnuItem;
public string eventCode;
public childNavItems(string _MnuItem, string _eventCode)
{
MnuItem = _MnuItem;
eventCode = _eventCode;
}
}
}
}
PraVeeN
blog.ninethsense.com/

QuestionSource is incomplete !!! Pin
iorchwaters3-Aug-15 2:12
iorchwaters3-Aug-15 2:12 
GeneralMy vote of 4 Pin
Patrick Gatt1-Aug-13 2:46
Patrick Gatt1-Aug-13 2:46 
GeneralMy vote of 5 Pin
S.Dimitrov13-Apr-13 11:17
S.Dimitrov13-Apr-13 11:17 
Questionerror in source code Pin
Bilwani1-Jan-12 20:50
Bilwani1-Jan-12 20:50 
Questionhow to use this control? Pin
venkat11125-Dec-07 23:01
venkat11125-Dec-07 23:01 
Generalmissing source [modified] Pin
Pete102422-Aug-07 22:41
Pete102422-Aug-07 22:41 
GeneralRe: missing source Pin
Praveen Nair (NinethSense)23-Aug-07 19:26
Praveen Nair (NinethSense)23-Aug-07 19:26 
General11 Pin
tehnn29-Apr-07 16:32
tehnn29-Apr-07 16:32 
GeneralRe: 11 Pin
Praveen Nair (NinethSense)29-Apr-07 18:24
Praveen Nair (NinethSense)29-Apr-07 18:24 
GeneralGood Pin
Ehsan Golkar10-Apr-07 1:23
Ehsan Golkar10-Apr-07 1:23 
GeneralRe: Good Pin
Praveen Nair (NinethSense)15-Apr-07 19:58
Praveen Nair (NinethSense)15-Apr-07 19:58 

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.