(Print this page)

The Toolbar control
Published date: Monday, November 1, 2004
On: Moer and Éric Moreau's web site

Almost every application you use daily offers a toolbar providing shortcuts to the mostly used features. This control is relatively easy to use and implement into your own application. I can safely guess that a great number of your applications already have toolbars.

As I always try to add an extra feature, I will show you how to host a control (like a TextBox control) to the ToolBar so you can spice your own projects.

The basis

Because you are normally displaying images into your toolbar, you first need to add an ImageList control to your form and fill its Images property.

Then you can add a Toolbar control, which is available from the default Windows Forms toolbox. You then need to bind the Toolbar to the ImageList using the ImageList property of the Toolbar control.

This control is nothing more then a collection of buttons. Once you have added a toolbar control (and also an image list control to provide images to the buttons), you need to open its Buttons property to add buttons to it using the ToolBarButton Collection Editor. You can then set base properties like the Text property, the ToolTipText property (even without adding a tooltip provider to your form), and the ImageIndex property.

Figure 1:The ToolBarButton Collection Editor

There is another property that requires a bit more attention: the Style property. 4 values are available. Most of your buttons should be set to PushButton (the default value) and I don’t think that I have to explain more how it will appear and react (hint: it is just like a regular button!). The second style is the Separator used to insert spaces between groups of buttons. The third style is the ToggleButton. I think the name of the setting gives you a pretty good idea of what it is used for! Think of the Bold, Italic, and Underline buttons in Word or Excel. These buttons when clicked retains the sunken appearance until clicked again (toggling between the on and the off state). The last style is the DropDownButton style. To use this kind of button, you need to add a ContextMenu control to your form and create menu items. You then use the DropDownMenu property of the button to bind it to the contextual menu you created. At runtime, the menu items will be displayed when this button will be selected.

Reacting to events

With the exception of the Separator style, all other styles of buttons are throwing the ButtonClick event. Notice that a single event is thrown for the complete toolbar (and not to each button). You need to use the ToolBarButtonClickEventArgs argument to determine which button was clicked. There are at least 3 ways of determining this. This sample shows you the 3 different syntaxes:

'Using the button's index
Select Case ToolBar1.Buttons.IndexOf(e.Button)
    Case 0
        lblMessage.Text = e.Button.ToolTipText
End Select

'Using the button's Text
Select Case e.Button.Text.Trim.ToUpper
    Case "NEW"
        lblMessage.Text = e.Button.ToolTipText
End Select

'Using the button's instance name
Select Case True
    Case e.Button Is tbbNew
        lblMessage.Text = e.Button.ToolTipText
End Select

You add the code you want there but since toolbar buttons should be shortcuts to menu items, the code is often a call to the click event of the menu item.

Once small thing here, if you want to see the menu you bound to the drop down style button, you have to click the arrow on the left of the button. I have used the ButtonClick event to catch the event of this button and to display the menu like this:

Case e.Button Is tbbDropDownButton
    'Show our DropDown menu if the user click on the button
    ContextMenu1.Show(ToolBar1, _
                      New Point(e.Button.Rectangle.Location.X, _
                                e.Button.Rectangle.Bottom))

To catch the selected item, as you do for every other menu item, you need to catch the Click event of each menu item like this:

Private Sub MenuItem1_Click(ByVal sender As Object, ByVal e As System.EventArgs) _
    Handles MenuItem1.Click
    lblMessage.Text = "You selected Option 1"
    tbbDropDownButton.Text = MenuItem1.Text
End Sub

Hosting a control in the toolbar

The 4 styles already available from the toolbar button style property should be enough for most of your needs. But there are sometimes when you need a particular control to appear on the toolbar. This code is adding a textbox control to the right of the last button:

Dim txtNewTB As New System.Windows.Forms.TextBox
With txtNewTB
    .Location = New System.Drawing.Point( _
                    tbbDropDownButton.Rectangle.Right + 5, _
                    (ToolBar1.Height - txtNewTB.Height) \ 2)
    .Name = "txtNewTB"
    .Text = "100%"
End With
ToolBar1.Controls.Add(txtNewTB)
btnAddTextBox.Enabled = False

Another Toolbar component

Tim Dawson has created a really cool toolbar control (much more complete – with the XP style) that is available for free. See it at www.divil.co.uk/net/controls/sandbar/.

I hope you appreciated the topic and see you next month.


(Print this page)