Tutorial: Working with Toolbars in C#

This article is updated to final release.

In this tutorial, I will discuss how to create toolbars, load images in toolbar buttons and write event handlers for buttons using Visual Studio .NET.

This is simple step by step tutorial. Just follow simple steps.

Adding a ToolBar

Create a Windows application using Visual C# or Visual Studio .NET and add a toolbar control to the form by dragging toolbar control from Toolbox to the form.

After that an ImageList control from Toolbox to the form and set its Images property. As you can see from Figure 1, the Images property of ImageList allows you to add images to an ImageList.

Figure 1. ImageList control properties.

If you click on the (Collection) side of Images property, action launches Image Collection Editor as you can see from Figure 2. Using Add and Remove buttons of Image Collection Editor, you can add and remove images to the ImageList collection. As you can see from Figure 2, I add three images to the collection.

Figure 2. Image Collection Editor.

Now I click on toolbar control properties. The Buttons property of toolbar control allows you to add and remove toolbar buttons.

I also change ImageList property of toolbar. If you click on the ImageList property's right side, imageList1 is available as drop down option.

I click on (Collection) side of the Buttons property as you can see in Figure 3.

Figure 3. Buttons property of toolbar.

Clicking on the Button's property launches ToolbarButton Collection Editor, which lets you add and remove toolbar buttons to toolbar using Add and Remove methods. I add three toolbar buttons to the collection. I also set ImageIndex property of a toolbar button to the index I want. All ImageList images are available through this property. I change toolbar button text to Open, Close and Create respectively. See Figure 4.

Figure 4. Adding toolbar buttons using ToolbarButton Collection Editor.

After adding buttons and images, the final form looks like Figure 5.

Figure 5. Final form

Now the last thing I am going to do is add an event handler for toolbar buttons. Adding an event handler is pretty simple. Just double click on the toolbar control, which adds the following method to the application. 

private void toolBar1_ButtonClick(object sender, System.Windows.Forms.ToolBarButtonClickEventArgs e)
{
}

The ToolBarButtonClickEventArgs class has Button member, which returns the ID of the toolbar button. Now I write the code listed in Listing 1 to find out which button was clicked and take appropriate action.

Listing 1.

private void toolBar1_ButtonClick(object sender, System.Windows.Forms.ToolBarButtonClickEventArgs e)
{
if ( e.Button == toolBarButton1 )
{
MessageBox.Show( "Button1 Clicked ");
}
if ( e.Button == toolBarButton2 )
{
MessageBox.Show( "Button2 Clicked ");
}
if ( e.Button == toolBarButton3 )
{
MessageBox.Show( "Button3 Clicked ");
}
}

Now build and run the application. When you click on button1, button2, and button3, you will get the following message respectively.

       

Under the Hood

Now a quick looks at what Visual Studio .NET did for you under the hood. It added a ToolBar, ImageList and three ToolBarButton variables to the project as you can see in Listing 2.

Listing 2.

private System.Windows.Forms.ToolBar toolBar1;
private System.Windows.Forms.ImageList imageList1;
private System.Windows.Forms.ToolBarButton toolBarButton1;
private System.Windows.Forms.ToolBarButton toolBarButton2;
private System.Windows.Forms.ToolBarButton toolBarButton3;

The InitializeComponent method creates these controls and set their properties and event handlers. The code is listed in Listing 2.

Listing 3.

private void InitializeComponent()
{
this.components = new System.ComponentModel.Container();
System.Resources.ResourceManager resources = new
ystem.Resources.ResourceManager(typeof(Form1));
this.toolBar1 = new System.Windows.Forms.ToolBar();
this.imageList1 = new System.Windows.Forms.ImageList(this.components);
this.toolBarButton1 = new System.Windows.Forms.ToolBarButton();
this.toolBarButton2 = new System.Windows.Forms.ToolBarButton();
this.toolBarButton3 = new System.Windows.Forms.ToolBarButton();
this.SuspendLayout();
//
// toolBar1
//
this.toolBar1.Buttons.AddRange(new System.Windows.Forms.ToolBarButton[] {
this.toolBarButton1,
this.toolBarButton2,
this.toolBarButton3});
this.toolBar1.DropDownArrows = true;
this.toolBar1.ImageList = this.imageList1;
this.toolBar1.Name = "toolBar1";
this.toolBar1.ShowToolTips = true;
this.toolBar1.Size = new System.Drawing.Size(292, 39);
this.toolBar1.TabIndex = 0;
this.toolBar1.ButtonClick += new
ystem.Windows.Forms.ToolBarButtonClickEventHandler(this.toolBar1_ButtonClick);
//
// imageList1
//
this.imageList1.ColorDepth = System.Windows.Forms.ColorDepth.Depth8Bit;
this.imageList1.ImageSize = new System.Drawing.Size(16, 16);
this.imageList1.ImageStream = ((System.Windows.Forms.ImageListStreamer)
resources.GetObject("imageList1.ImageStream")));
this.imageList1.TransparentColor = System.Drawing.Color.Transparent;
//
// toolBarButton1
//
this.toolBarButton1.ImageIndex = 0;
this.toolBarButton1.Text = "Open";
//
// toolBarButton2
//
this.toolBarButton2.ImageIndex = 1;
this.toolBarButton2.Text = "Close";
//
// toolBarButton3
//
this.toolBarButton3.ImageIndex = 2;
this.toolBarButton3.Text = "Create";
//
// Form1
//
this.AutoScaleBaseSize = new System.Drawing.Size(5, 13);
this.ClientSize = new System.Drawing.Size(292, 273);
this.Controls.AddRange(new System.Windows.Forms.Control[] {
this.toolBar1});
this.Name = "Form1";
this.Text = "Form1";
this.ResumeLayout(false);
}