Chapter 6. Making Tool Strips and Status Strips

Not every program needs a tool strip or status strip, but they can make the user's life easier, particularly for complicated programs. This lesson explains how to add tool strips and status strips to your applications.

USING TOOL STRIPS

Usually a tool strip sits below a form's menu bar and displays a series of small buttons that enable the user to easily perform frequently executed tasks. The buttons typically duplicate functions that are also available in menus, but placing them on the tool strip makes it easier for the user to find and use them.

Place only the most frequently used commands in the tool strip so it doesn't become cluttered.

Recall from Lesson 5 that you should also give most if not all of your menu items accelerators, and you can give the most important commands shortcuts. That means the user can access the most important and useful commands in at least four ways: mouse menu navigation, accelerators, shortcuts, and tool strip buttons.

To create a single tool strip, simply double-click the Toolbox's ToolStrip tool. By default, the ToolStrip docks to the top of the form so you don't need to position it manually.

Note

Recall from Lesson 3 that docked controls are drawn in their stacking order, which by default is the same as their creation order. To avoid confusion, if a form should contain a main menu and a tool strip, create the menu first so the tool strip appears below it and not above it.

When you select a ToolStrip, the Form Designer displays a little icon with a drop-down arrow. Click the arrow to display a list of items that you might want to add to the ToolStrip, as shown in Figure 6-1.

As you can see from Figure 6-1, you can add the following types of objects to a ToolStrip:

FIGURE 6-1

Figure 6.1. FIGURE 6-1

  • Button

  • Label

  • SplitButton

  • DropDownButton

  • Separator

  • ComboBox

  • TextBox

  • ProgressBar

The SplitButton and DropDownButton are new controls that you haven't seen before in the Toolbox so they deserve a little explanation.

The SplitButton normally displays a button holding an icon and a drop-down arrow. (You can change its DisplayStyle property to make it display text instead of an image, both, or neither.) If the user clicks the button, its Click event fires. If the user clicks the drop-down arrow, a menu appears. As is the case with all menus, if the user selects an item, that item's Click event fires.

One way you might use a SplitButton would be to have the menu items perform some action and then change the button's icon to match the action. Clicking the button would perform the action again.

In other words, you can think of the button as representing a tool, and clicking it activates the current action. Selecting an item from the drop-down menu selects a new tool and activates it.

The DropDownButton is similar to the SplitButton except it doesn't provide a button that the user can click to repeat the previous command. It's basically a drop-down menu.

Although they can contain many different kinds of controls, ToolStrips look best when they are not too cluttered and confusing. For example, a ToolStrip that contains only Buttons and Separators is easy to understand and use. DropDownButtons and SplitButtons are the next easiest controls to understand and they don't clutter things up too much so you can add them if necessary.

Avoid using Labels in a ToolStrip to provide status information. Instead, place status information in a StatusStrip.

USING TOOL STRIP CONTAINERS

A ToolStripContainer displays areas on a form's top, left, bottom, and right edges that can hold ToolStrips. At run time, the user can drag ToolStrips back and forth within and among these areas.

The center of the ToolStripContainer is a content panel that can hold one or more other controls.

In a typical configuration for these controls, a form optionally contains a MenuStrip and StatusStrip docked to the form's top and bottom, respectively. A ToolStripContainer is docked to fill the rest of the form, and its content panel contains the rest of the program's controls.

Figure 6-2 shows a form that contains a MenuStrip at the top, a StatusStrip at the bottom, and a ToolStripContainer filling the rest of the form. The ToolStripContainer holds three ToolStrips and a RichTextBox docked to fill its content panel.

FIGURE 6-2

Figure 6.2. FIGURE 6-2

Figure 6-3 shows this program at run time. Here, I have dragged two of the ToolStrips to the ToolStripContainer's left and right edges.

FIGURE 6-3

Figure 6.3. FIGURE 6-3

Two things in Figure 6-2 are of particular note. First, notice the thin rectangles holding arrows on the middle of the content panel's sides. If you click one of these, the control adds room on that edge so you can insert another ToolStrip.

The second thing of note in Figure 6-2 is the smart tag, which looks like a little square holding an arrow in the control's upper-right corner. If you click the smart tag, the smart tag panel shown in Figure 6-4 appears.

In general, smart tags provide quick ways to perform common tasks for a control. In this example, the smart tag panel lets you decide which panels the control should allow. If you uncheck one of the panels, at run time the user cannot drag ToolStrips to that edge of the ToolStripContainer.

FIGURE 6-4

Figure 6.4. FIGURE 6-4

Note

You can also determine which panels are available by setting the control's LeftToolStripPanelVisible, RightToolStripPanelVisible, TopToolStripPanelVisible, and BottomToolStripPanelVisible properties in the Properties window, but using the smart tag is easier.

After you build the ToolStripContainer, simply place ToolStrips on it and build their items as usual.

USING STATUS STRIPS

A status strip is normally docked to a form's bottom edge and displays labels, icons, and other controls to give the user a quick summary of the application's status. This area should be reserved for status information and should generally not include buttons and other controls that make the application perform an action. Those commands belong in menus and tool strips.

To create a status strip, simply double-click the Toolbox's StatusStrip tool. By default, the StatusStrip docks to the bottom of the form so you don't need to position it manually.

When you select a StatusStrip, the Form Designer displays a little icon with a drop-down arrow similar to the one it displays for a ToolStrip. Click the arrow to display a list of items that you might want to add to the StatusStrip, as shown in Figure 6-5.

FIGURE 6-5

Figure 6.5. FIGURE 6-5

As you can see from Figure 6-5, you can add the following types of objects to a ToolStrip:

  • StatusLabel

  • ProgressBar

  • DropDownButton

  • SplitButton

The only new control, StatusLabel, behaves like a normal Label.

TRY IT

In this Try It, you create a MenuStrip (covered in Lesson 5) and a ToolStrip, both containing commands to change a RichTextBox control's ForeColor and BackColor properties. You also create a StatusStrip to show the currently selected colors. (Yes, I know this is redundant because the values are shown in the ToolStrip and in the text itself.) Figure 6-6 shows the program.

Note

You can download the code and resources for this Try It from the book's web page at www.wrox.com or www.vb-helper.com/24hourvb.html. You can find them in the Lesson06 folder in the download.

Lesson Requirements

In this lesson:

  • Create the form shown in Figure 6-6.

  • Create the MenuStrip. The menu's hierarchy should be:

    FIGURE 6-6

    Figure 6.6. FIGURE 6-6

    File

    • Exit

    Format

    • Text Color

      • Black

      • Red

      • Green

      • Blue

    • Background Color

      • White

      • Pink

      • Green

      • Blue

  • Initially check the Text Color menu's Black option and the Background Color menu's White option.

  • Give the Background Color menu items Images that display samples of the color.

  • Create the ToolStrip with buttons that duplicate the menu hierarchy. The ToolStrip should hold two ToolStripDropDownButtons.

  • Give the StatusStrip a ToolStripStatusLabel named lblColor with Text = Text Colors.

  • Add event handlers.

    Make the File menu's Exit item close the form.

    Make the event handlers for each of the Text Color menu items set the appropriate properties for the RichTextBox, menu items, toolbar buttons, and status label. Check the selected menu and toolbar items and uncheck the others.

DUPLICATE CODE

As you will probably notice, this lesson's Try It includes event handlers that duplicate the same code with minor differences. In general, if large pieces of code do almost the same things with minor changes, then there's probably something wrong with the program's design.

In cases such as this, you should extract the common code into a separate procedure. You can use If, Select Case, and other Visual Basic statements to have the code take different actions for different situations, enabling the same procedure to handle multiple situations.

Unfortunately, you don't know how to do any of that yet. Lesson 20 explains how to write procedures, and Lesson 18 describes statements such as If and Select Case. Until then, you're stuck with some duplicate code.

After you read Lessons 18 and 20, you can revisit this section if you would like to remove the redundant code, making it easier to maintain in the future. (The process of restructuring existing code to make it more reliable, easier to read, easier to maintain, or otherwise better without changing its functionality is called refactoring.)

Hints

  • Recall that the Exit menu item can close the program's form by calling this.Close().

  • Use the menu items' event handlers for the corresponding tool strip button event handlers.

Step-by-Step

  • Create the form shown in Figure 6-6.

    1. Start a new project.

    2. Add a MenuStrip to the form.

    3. Add a StatusStrip to the form.

    4. Add a ToolStripContainer to the form.

    5. Add a RichTextBox named rchContent inside the ToolStripContainer's content panel.

  • Create the MenuStrip.

    1. Add the indicated menu items to the MenuStrip. Remember to give them descriptive names and appropriate accelerator keys.

  • Initially check the Text Color menu's Black option and the Background Color menu's White option.

    1. Set the Text Color

      Step-by-Step

    2. Set the Background Color

      Step-by-Step

  • Give the Background Color menu items Images that display samples of the color.

    1. Set the Image properties of these menu items to samples of their colors. (Use Microsoft Paint or some other graphical editor to make small, colored images.)

  • Create the ToolStrip with buttons that duplicate the menu hierarchy. The ToolStrip should hold two ToolStripDropDownButtons.

    Name the first tool ToolStripDropDownButton btnTextColor and make it display the text "A." Give it the items Black, Red, Green, and Blue. Each item should have ForeColor property set to its color.

    1. Create the ToolStripDropDownButton.

    2. Below that item, add the items Black, Red, Green, and Blue.

    3. Set the ForeColor property for each of these items to show its color (for example, set the Black item's ForeColor property to black).

    Name the second tool ToolStripDropDownButton btnBackColor and make it initially display a white color sample. Give it the items White, Pink, Green, and Blue. Make each of these display an Image showing a sample of the color.

    1. Create the ToolStripDropDownButton.

    2. Below that item, add the items White, Pink, Green, and Blue.

    3. Set the Image property for each of these items to show samples of their colors.

  • Give the StatusStrip a ToolStripStatusLabel named lblColor with Text = Text Colors.

    1. Create the ToolStripStatusLabel. Set its Name and Text properties.

  • Add event handlers.

    Make the File menu's Exit item close the form.

    1. Type the following bold line of code so the event handler looks like this:

      Private Sub fileExitMenuItem_Click() Handles mnuFileExit.Click
    Me.Close()
End Sub

Make the event handlers for each of the Text Color menu items set the appropriate properties for the RichTextBox, menu items, toolbar buttons, and status label. Check the selected menu and toolbar items and uncheck the others.

  1. For the Format

    Step-by-Step
    ' Set the text color.
Private Sub mnuFormatTextColorBlack_Click() _
 Handles mnuFormatTextColorBlack.Click, btnTextColorBlack.Click
    rchContents.ForeColor = Color.Black
    btnTextColor.ForeColor = Color.Black
    lblColor.ForeColor = Color.Black

    mnuFormatTextColorBlack.Checked = True
    mnuFormatTextColorRed.Checked = False
    mnuFormatTextColorGreen.Checked = False
    mnuFormatTextColorBlue.Checked = False

    btnTextColorBlack.Checked = True
    btnTextColorRed.Checked = False
    btnTextColorGreen.Checked = False
    btnTextColorBlue.Checked = False
End Sub

  2. Enter similar code for the other Text Color menu items.

  3. Enter similar code for the other Background Color menu items.

  4. Use the menu items' event handlers for the corresponding tool strip button event handlers.

    1. Click the Properties window's Events button.

    2. For each tool strip button:

      • Click the button in the Form Designer.

      • On the Properties window, select the Click event. Then click the drop-down arrow to the right.

      • Select the appropriate menu event handler. For example, for the btnTextColorBlack tool strip button, select the mnuFormatTextColorBlack _Click event handler.

Note

Please select Lesson 6 on the DVD to view the video that accompanies this lesson.

EXERCISES

  1. (SimpleEdit) Copy the SimpleEdit program you built in Lesson 5, Exercise 5 (or download Lesson 5's version from the book's web site) and add the tool strips, buttons, and separators shown in Figure 6-7. Delete the RichTextBox control, add a ToolStripContainer, and then re-add the RichTextBox inside the ToolStripContainer's content panel.

    The black button (fourth from the left on the second tool strip row) is a ToolStripSplitButton that lets the user pick a text color. It contains the options Black, White, Red, Green, and Blue.

    The white button next to the text color button is another ToolStripSplitButton. This button lets the user pick a background color. It contains the options Black, White, Pink, Green, Blue, and Yellow.

    The button that says "AB" is a ToolStripDropDownButton that provides the same options as the Format menu's Offset submenu: Normal, Superscript, and Subscript.

    FIGURE 6-7

    Figure 6.7. FIGURE 6-7

  2. (SimpleEdit) Copy the SimpleEdit program you built for Exercise 1 and add menu item code to manage the new tool strip buttons. Add code to synchronize corresponding menu, context menu, and tool strip button items. For example, the following shows the new code for the Align Left menu item:

    Private Sub mnuFormatAlignLeft_Click() _
 Handles mnuFormatAlignLeft.Click, ctxAlignLeft.Click
    mnuFormatAlignLeft.Checked = True
    mnuFormatAlignRight.Checked = False
    mnuFormatAlignCenter.Checked = False
    ctxAlignLeft.Checked = True
    ctxAlignRight.Checked = False
    ctxAlignCenter.Checked = False
    btnAlignLeft.Checked = True
    btnAlignRight.Checked = False
    btnAlignCenter.Checked = False

    MessageBox.Show("Align Left")
End Sub

  3. (SimpleEdit) Copy the SimpleEdit program you built for Exercise 2 and attach the tool strip buttons to the corresponding event handlers. Write new event handlers for tool strip buttons that don't have corresponding menu items.

  4. (SimpleEdit) Copy the SimpleEdit program you built for Exercise 3 and add code to display the appropriate image in the Background, Text Color, Offset, and Indent tool strip buttons. For example, when the user selects Offset Subscript, the btnOffset button and the mnuFormatOffset menu item should show the subscript image.

  5. (SimpleEdit) Copy the SimpleEdit program you built for Exercise 4 and add appropriate tooltips to the program's menu items and tool strip buttons. For example, set the btnAlignLeft button's ToolTipText property to "Align the selected text on the left."

  6. Build the Scribbler program shown in Figure 6-8. Give it a ToolStripContainer and two ToolStrips. Give the first ToolStrip buttons representing arrow, line, rectangle, ellipse, scribble, and star tools. Use code to make these tools exclusive options so if the user selects one, the others are deselected. Give the second ToolStrip two ToolStripDropDownButtons to represent foreground and background colors. Use code to make the entries in each drop-down exclusive options so if the user selects one, the others are deselected. Give the color buttons appropriate images when the user picks a color. Give all of the tool strip buttons appropriate tooltips.

    FIGURE 6-8

    Figure 6.8. FIGURE 6-8

Note

You can find solutions to this lesson's exercises in the Lesson06 folder inside the download available on the book's web site at www.wrox.com or www.vb-helper.com/24hourvb.html.

FIGURE 6-8
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset