Toolbars

While menus are great for providing access to a multitude of functionality in your application, some items benefit from being placed in a toolbar as well as on the menu. These items are those that are used frequently by the user, such as Open and Save, and a toolbar provides one-click access to such commonly used functionality.

Figure 15-6 shows the selection of toolbars that are visible as I'm writing this chapter in Word.

Figure 15-6

A button on a toolbar usually displays a picture and no text, though it is possible to have buttons with both. Examples of toolbars with no text are those found in Word (see above), and examples of toolbars that include text can be found in Internet Explorer. In addition to buttons, you will occasionally see combo boxes and text boxes in the toolbars too. If you let the mouse pointer rest above a button in a tool- bar, it should display a tooltip, which provides some clue to the purpose of the button, especially when only an icon is displayed.

The ToolStrip, like the MenuStrip, has been made with a professional look and feel in mind. When users see a toolbar in an Office application, they expect to be able to move it around and position it wherever they want it. the ToolStrip enables users to do just that — that is, if you allow them to.

When you first add a ToolStrip to the design surface of your form it looks very similar to the MenuStrip you saw earlier, except for two things: To the far left are four vertical dots just as you know them from the menus in Visual Studio and Word. These dots indicate that the toolbar can be moved around and docked in the parent application window. The second difference is that by default a toolbar displays images rather than text and so the default of the items in the bar is a button. The toolbar displays a drop-down menu that allows you to select the type of the item.

One thing that is exactly like the MenuStrip is that the Action window includes a link called Insert Standard Items. When you click this, you don't get quite the same number of items as you did with the MenuStrip, but you get the buttons for New, Open, Save, Print, Cut, Copy, Paste, and Help. You won't go through a full Try It Out section as you did earlier; instead let's take a look at some of the properties of the ToolStrip itself and the controls used to populate it.

ToolStrip Properties

The properties of the ToolStrip control manage how and where the control is displayed. Remember that this control is actually the base for the MenuStrip control that you saw earlier and, therefore, there are many shared properties between them. Once again, the table that follows shows only a few properties of special interest — if you require a complete listing please refer to .NET Framework SDK documentation.

Name	Description
GripStyle	This property controls whether the four vertical dots are displayed by the far left of the toolbar. The effect of hiding the grip is that users can no longer move the toolbar.
LayoutStyle	By setting this property, you can control how the items in the toolbar are displayed. The default is horizontally.
Items	This property contains a collection of all the items in the toolbar.
ShowItemToolTip	This property allows you to determine if tooltips should be shown for the items in the toolbar.
Raft	This property allows you to specify the rafting container to contain the ToolStrip. This lets you position the ToolStrip in the dialog. The possible values are None, Top, Bottom, Left, and Right.
Stretch	By default a toolbar is only slightly wider or taller than the items contained within it. If you set the Stretch property to true the toolbar will fill the entire length of its container.

ToolStrip Items

There are a number of controls that can be used in a ToolStrip. Earlier, I mentioned that a toolbar should be able to contain buttons, combo boxes, and text boxes. As you would expect, there are controls for each of these items, but there are actually quite a few others, as described in the following table.

Name	Description
ToolStripButton	This control is used to represent a button. You use this for buttons with and without text.
ToolStripLabel	This control represents a label. It is important to realize that this control can also display images. What that means is that this control can be used to display a static image in front of another control that doesn't display information about itself such as a text box or combo box.
ToolStripSplitButton	This control displays a button with a drop-down button to the right that, when clicked, displays a menu below it. The menu does not unfold if the button part of the control is clicked.
ToolStripDropDownButton	This control is very similar to the ToolStripSplitButton. The only difference is that the drop-down button has been removed and replaced with an image of a down array. The menu part of the control unfolds when any part of the control is clicked.
ToolStripComboBox	As the name implies, this control displays a combo box.
ToolStripProgressBar	You can use this item to embed a progress bar in your toolbar.
ToolStripTextBox	Again, as the name implies, this control displays a text box.
ToolStripSeparator	You saw this control before, in the menus examples. It creates horizontal or vertical dividers for the items.

In the following Try It Out, you will extend your menus example to include a toolbar. The toolbar will contain the standard controls of a toolbar and three additional buttons: bold, italic, and underline. There will also be a combo box for selecting a font. (Note that the images you use here for the button that selects the font can be found in the code download.)

Try It Out – Toolbar Example

Follow these steps to extend the previous example with toolbars.

1. First, you need to remove the test ToolStripMenuItem that was used in the Format menu. Select the Show Help Menu and hit the Delete key. Then add three ToolStripMenuItems in its place and change each of their CheckOnClick properties to true:

   • Bold

   • Italic

   • Underline

2. Name the three controls ToolStripMenuItemBold, ToolStripMenuItemItalic, and ToolStripMenuItemUnderline and set the CheckOnClick property on each of them to true.

3. Add a ToolStrip to the dialog. In the Actions Window, click Insert Standard Items. Select and delete the items for Cut, Copy, Paste, and the Separator after them.

4. Create three new buttons and a separator at the end of the toolbar by selecting Button three times and Separator once.

5. Now create the final two items by selecting ComboBox from the drop-down list first and then finally adding a separator as the last item.

6. Select the Help item and drag it from its current position to the position as the last item in the toolbar.

7. The first three buttons are going to be the bold, italic and underline buttons, respectively. Name the controls as shown in the following table.

   ToolBarButton	Name
   Bold button	ToolStripButtonBold
   Italic button	ToolStripButtonItalic
   Underline button	ToolStripButtonUnderline
   ComboBox	ToolStripComboBoxFonts

8. Select the Bold button, click on the ellipse (...) in the Image property, select the Project resource file radio button and click the Import button. If you've downloaded the source code for this book, you should use the images found in the folder Chapter15\Menus and Toolbars\ Manual Menus\Images, where you will find three icons with the names BLD.ICO, ITL.ICO, and UNDRLN.ICO. Please note that the default extensions suggested by Visual Studio do not include ICO, so when browsing for the icons you will have to choose Show all files from the drop-down.

9. Select BLD.ico for the image of the Bold button.

10. Select the Italic button and change its image to ITL.ico.

11. Select the underline button and change its image to UNDERLN.ico.

12. Select the ToolStripComboBox. In the Properties panel, change the properties shown in the following table.

    Name	Text
    Items	MS Sans Serif Times New Roman
    DropDownStyle	DropDownList

13. Set the CheckOnClick property for each of the Bold, Italic, and Underline buttons to true.

14. To select the initial item in the combo box, enter the following into the constructor of the class:

    public Form1() {   InitializeComponent();     this.ToolStripComboBoxFonts.SelectedIndex = 0; }

15. Press F5 to run the example. You should see a dialog that looks like Figure 15-7.

    
    Figure 15-7

Adding Event Handlers

You are now ready to add the event handlers for the items on the menu and toolbars. You already have handlers for the Save, New, and Open items on the Menu, and obviously the buttons on the toolbar should behave in exactly the same way as the menus. This is easily achieved by assigning the Click events of the buttons on the toolbars to the same handlers that are used by the buttons on the menu. Set the events like this:

ToolStripButton	Text
New	MenuItemNew_Click
Open	MenuItemOpen_Click
Save	MenuItemSave_Click

Now it's time to add handlers for the bold, italic, and underline buttons. As these buttons are check buttons, you should use the CheckedChanged event instead of the Click event, so go ahead and add that event for each of the three buttons. Add the following code:

private void ToolStripButtonBold_CheckedChanged(object sender, EventArgs e) { Font oldFont; Font newFont; bool checkState = ((ToolStripButton)sender).Checked; // Get the font that is being used in the selected text. oldFont = this.richTextBoxText.SelectionFont; if (!checkState) newFont = new Font(oldFont, oldFont.Style & ~FontStyle.Bold); else newFont = new Font(oldFont, oldFont.Style | FontStyle.Bold); // Insert the new font and return focus to the RichTextBox. this.richTextBoxText.SelectionFont = newFont; this.richTextBoxText.Focus(); this.ToolStripMenuItemBold.CheckedChanged -= new EventHandler(ToolStripMenuItemBold_CheckedChanged); this.ToolStripMenuItemBold.Checked = checkState; this.ToolStripMenuItemBold.CheckedChanged += new EventHandler(ToolStripMenuItemBold_CheckedChanged);     }         private void ToolStripButtonItalic_CheckedChanged(object sender, EventArgs e)     { Font oldFont; Font newFont; bool checkState = ((ToolStripButton)sender).Checked; // Get the font that is being used in the selected text. oldFont = this.richTextBoxText.SelectionFont; if (!checkState) newFont = new Font(oldFont, oldFont.Style & ~FontStyle.Italic); else newFont = new Font(oldFont, oldFont.Style | FontStyle.Italic); // Insert the new font. this.richTextBoxText.SelectionFont = newFont; this.richTextBoxText.Focus(); this.ToolStripMenuItemItalic.CheckedChanged -= new EventHandler(ToolStripMenuItemItalic_CheckedChanged); this.ToolStripMenuItemItalic.Checked = checkState; this.ToolStripMenuItemItalic.CheckedChanged += new EventHandler(ToolStripMenuItemItalic_CheckedChanged);     }         private void ToolStripButtonUnderline_CheckedChanged(object sender, EventArgs e)     { Font oldFont; Font newFont; bool checkState = ((ToolStripButton)sender).Checked; // Get the font that is being used in the selected text. oldFont = this.richTextBoxText.SelectionFont; if (!checkState) newFont = new Font(oldFont, oldFont.Style & ~FontStyle.Underline); else newFont = new Font(oldFont, oldFont.Style | FontStyle.Underline); // Insert the new font. this.richTextBoxText.SelectionFont = newFont; this.richTextBoxText.Focus(); this.ToolStripMenuItemUnderline.CheckedChanged -= new EventHandler(ToolStripMenuItemUnderline_CheckedChanged); this.ToolStripMenuItemUnderline.Checked = checkState; this.ToolStripMenuItemUnderline.CheckedChanged += new EventHandler(ToolStripMenuItemUnderline_CheckedChanged);     }

The event handlers simply set the correct style to the font used in the RichTextBox. The three last lines in each of the three methods all deal with the corresponding item in the menu. The first line removes the event handler from the menu item. This ensures that no events trigger when the next line runs, which sets the state of the Checked property to the same value as the toolbar button. Finally, the event handler is reinstated.

The event handlers for the menu items should simply set the Checked property of the buttons on the toolbar and allow the event handlers for the toolbar buttons to do the rest. Add the event handlers for the CheckedChanged event and enter this code:

    private void ToolStripMenuItemBold_CheckedChanged(object sender, EventArgs e)     { this.ToolStripButtonBold.Checked = ToolStripMenuItemBold.Checked;     }         private void ToolStripMenuItemItalic_CheckedChanged(object sender, EventArgs e)     { this.ToolStripButtonItalic.Checked = ToolStripMenuItemItalic.Checked;     }         private void ToolStripMenuItemUnderline_CheckedChanged(object sender,  EventArgs e)     { this.ToolStripButtonUnderline.Checked = ToolStripMenuItemUnderline.Checked;     }

The only thing left to do is to allow the user to select a font family from the ComboBox. Whenever a user changes the selection in the ComboBox the SelectedIndexChanged is raised, so go ahead and add an event handler for that event. Enter the following code:

    private void toolStripComboBoxFonts_SelectedIndexChanged(object sender, EventArgs e)     { string text = ((ToolStripComboBox)sender).SelectedItem.ToString(); // Create a new font with the correct font family. Font newFont = new Font(text, richTextBoxText.SelectionFont.Size, richTextBoxText.SelectionFont.Style); richTextBoxText.SelectionFont = newFont;     }

Now run the code. You should be able to create a dialog that looks something like that shown in Figure 15-8. In the image, I've moved the toolbar a bit to the right to show the menu as well as the toolbar.

Figure 15-8

StatusStrip

The last of the small family of Strip controls is the StatusStrip. This control represents the bar that you will find at the bottom of the dialog in many applications. The bar is typically used to display brief information about the current state of the application — a good example is Word's displaying of the current page, column, line, and so on in the status bar as you are typing.

The StatusStrip is derived from the ToolStrip, and you should be quite familiar with the view that is presented to you as you drag the control onto your form. You will also notice that three of the four possible controls that can be used in the StatusStrip — ToolStripDropDownButton, ToolStripProgressBar, and ToolStripSplitButton — have been presented earlier. That leaves just one control that is specific to the StatusStrip: The StatusStripStatusLabel, which is also the default item you get.

StatusStripStatusLabel Properties

The StatusStripStatusLabel is used to present the user with information about the current state of the application with text and images. As the label is actually a pretty simple control I won't mention a lot of properties, concentrating instead on two that are actually not specific to the label, but nevertheless can and should be used with some effect.

Property	Value
AutoSize	AutoSize is on by default. This isn't really very intuitive because you don't want the labels in the status bar to jump back and forth because you changed the text in one of them. Unless the information in the label is static, you should always change this property to false.
DoubleClickEnable	With this property, you can specify whether the DoubleClick event will fire. This means that your users get a second place to change something in you application. An example of this is to allow users to double- click on a panel containing the word Bold to enable or disable bolding in the text.

In the following Try It Out, you are going to create a simple status bar for the example you've been working on. The status bar is going to have four panels, three of which will display an image and text, and the last one just text.

Try It Out – StatusStrip

Follow these steps to extend the small text editor you've been working on.

1. Double-click the StatusStrip in the ToolBox to add it to the dialog.

2. In the Properties panel, click the ellipse (...) in the Items property. This brings up the Items Collection Editor.

3. Click the Add button four times to add four panels to the StaturStrip. Set the following properties on the panels:

   Panel	Property and Value
   1	Name: toolStripStatusLabelText Text: Clear this property AutoSize: False DisplayStyle: Text Font: Arial; 8,25pt; style=Bold Size: 259,16 TextAlign: Middle Left
   2	Name: toolStripStatusLabelBold Text: Bold DisplayStyle: ImageAndText Enabled: False Font: Arial; 8.25pt; style=Bold Size: 50, 16 Image: BLD ImageAlign: Middle-Center
   3	Name: toolStripStatusLabelItalic Text: Italic DisplayStyle: ImageAndText Enabled: False Font: Arial; 8.25pt; style=Bold Size: 50, 16 Image: ITL ImageAlign: Middle-Center
   4	Name: toolStripStatusLabelUnderline Text: Underline DisplayStyle: ImageAndText Enabled: False Font: Arial; 8.25pt; style=Bold Size: 70, 16 Image: UNDRLN ImageAlign: Middle-Center

4. Add this line of code to the event handler at the end of the ToolStripButtonBold_ CheckedChanged method:

    toolStripStatusLabelBold.Enabled = checkState; 

5. Add this line of code to the event handler at the end of the ToolStripButtonItalic_ CheckedChanged method:

    toolStripStatusLabelItalic.Enabled = checkState; 

6. Add this line of code to the event handler at the end of the ToolStripButtonUnderline_ CheckedChanged method:

    toolStripStatusLabelUnderline.Enabled = checkState; 

7. Select the RichTextBox and add the TextChanged event to the code. Enter this:

       private void richTextBoxText_TextChanged(object sender, EventArgs e)     { toolStripStatusLabelText.Text = "Number of characters: " + richTextBoxText.Text.Length;     }

   When you run the application you should be able to create a dialog that looks like that shown in Figure 15-9.

   
   Figure 15-9