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.
Usually a tool strip sits below a form's menu bar and displays a series of small buttons that let the user easily perform frequently executed tasks. Usually the buttons 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.
When you select a ToolStrip
, the Form Designer displays a little icon with a dropdown 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
:
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 dropdown 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 dropdown 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.
Another way to think of this would be that the button represents a tool and clicking it activates the current tool. Selecting an item from the dropdown menu selects a new tool and activates it.
Like the SplitButton
, the DropDownButton
normally displays an icon with a dropdown arrow. (And as is the case with the SplitButton
, you can use the DropDownButton
's DisplayStyle
property to make it display an image, text, both, or neither.) If the user clicks the dropdown arrow, a menu appears. This control is similar to the SplitButton
except it doesn't provide a button that the user can click to repeat the previous command.
Although they can contain many different kinds of controls, ToolStrip
s look best when they are not too cluttered and confusing. For example, a ToolStrip
that contains only Button
s and Separator
s is easy to understand and use. DropDownButton
s and SplitButton
s are the next easiest controls to understand in a ToolStrip
, and they don't clutter things up too much so you can add them if necessary.
Avoid using Label
s in a ToolStrip
to provide status information. Instead, place status information in a StatusStrip
.
A ToolStripContainer
displays areas on a form's top, left, bottom, and right edges that can hold ToolStrip
s. At run time, the user can drag ToolStrip
s 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
contains three ToolStrip
s and a RichTextBox
docked to fill its content panel.
Figure 6.3 shows this program at run time. Here I have dragged two of the ToolStrip
s to the ToolStripContainer
's left and right edges.
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 shown as 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, the user cannot drag ToolStrip
s to that edge of the ToolStripContainer
at run time.
After you build the ToolStripContainer
, simply place ToolStrip
s on it and build their items as usual.
A status strip is normally docked to a form's bottom and displays labels, status bars, 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 dropdown 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.
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
.
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 in action.
In this lesson, you:
MenuStrip
. The menu's hierarchy should be:
Image
s that display samples of the colors.ToolStrip
with buttons that duplicate the menu hierarchy. The ToolStrip
should hold two ToolStripDropDownButton
s.
foreColorButton
and make it display the text “A.” Give it the items Black, Red, Green, and Blue. Each item should have the ForeColor
property set to its color.backColorButton
and make it initially display a white color sample. Give it the items White, Pink, Light Green, and Light Blue. Make each of these display an Image
showing a sample of the color.StatusStrip
a ToolStripStatusLabel
named colorLabel
with Text
= Text Colors
.Button
s use the corresponding menu items' event handlers.Close()
.RichTextBox
inside the ToolStripContainer
's content panel.MenuStrip
to the form.StatusStrip
to the form.ToolStripContainer
to the form.RichTextBox
named contentRichTextBox
inside the ToolStripContainer
's content panel.MenuStrip
.
MenuStrip
. Remember to give them good names and appropriate accelerator keys.Checked
property to True
.Checked
property to True
.Image
s that display samples of the color.
Image
properties of these menu items to samples of their colors. (Use Microsoft Paint or some other graphical editor to make small colored images.)ToolStrip
with buttons that duplicate the menu hierarchy. The ToolStrip
should hold two ToolStripDropDownButton
s.
foreColorButton
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.
ToolStripDropDownButton
.ForeColor
property for each of these items to show its color. (For example, set the Black item's ForeColor
property to black.)backColorButton
and make it initially display a white color sample. Give it the items White, Pink, Light Green, and Light Blue. Make each of these display an Image
showing a sample of the color.
ToolStripDropDownButton
.Image
property for each of these items to show samples of their colors.StatusStrip
a ToolStripStatusLabel
named colorLabel
with Text
= Text Colors
.
ToolStripStatusLabel
. Set its Name
and Text
properties.private void fileExitMenuItem_Click(object sender, EventArgs e)
{
Close();
}
private void blackForeColorMenuItem_Click(object sender, EventArgs e)
{
contentRichTextBox.ForeColor = blackForeColorButton.ForeColor;
foreColorMenuItem.ForeColor = blackForeColorButton.ForeColor;
foreColorButton.ForeColor = blackForeColorButton.ForeColor;
colorLabel.ForeColor = blackForeColorButton.ForeColor;
blackForeColorMenuItem.Checked = true;
redForeColorMenuItem.Checked = false;
greenForeColorMenuItem.Checked = false;
blueForeColorMenuItem.Checked = false;
blackForeColorButton.Checked = true;
redForeColorButton.Checked = false;
greenForeColorButton.Checked = false;
blueForeColorButton.Checked = false;
}
private void whiteBackColorMenuItem_Click(object sender, EventArgs e)
{
contentRichTextBox.BackColor = Color.White;
backColorMenuItem.Image = whiteBackColorMenuItem.Image;
backColorButton.Image = whiteBackColorMenuItem.Image;
colorLabel.BackColor = Color.White;
whiteBackColorMenuItem.Checked = true;
pinkBackColorMenuItem.Checked = false;
lightGreenBackColorMenuItem.Checked = false;
lightBlueBackColorMenuItem.Checked = false;
whiteBackColorButton.Checked = true;
pinkBackColorButton.Checked = false;
lightGreenBackColorButton.Checked = false;
lightBlueBackColorButton.Checked = false;
}
BackColor
instead of ForeColor
.Button
s use the corresponding menu items' event handlers.
Click
event. Then click the dropdown arrow to the right.blackFore-ColorButton
tool strip button, select the blackForeColorMenuItem_Click
event handler.RichTextBox
control, add a ToolStripContainer
, and then re-add the RichTextBox
inside the ToolStripContainer
's content panel. Then add the ToolStrip
s.ToolStripSplitButton
that lets the user pick a text color. It contains the choices Black, White, Red, Green, and Blue.ToolStripSplitButton
that lets the user pick a background color. It contains the choices Black, White, Pink, Light Green, Light Blue, and Yellow.ToolStripDropDownButton
that provides the same options as the Format menu's Offset submenu: Normal, Superscript, and Subscript.ToolBarTray
to the top of the DockPanel
control below the menus.ToolBar
s to the ToolBarTray
. Set a ToolBar
's Band
property to indicate its row in the ToolBarTray
. Set its BandIndex
property to indicate its ordering within the band.Button
s and Separator
s to the ToolBar
s.ComboBox
es containing ComboBoxItem
s that hold Image
s. Set one ComboBoxItem
's IsSelected
property to True
to set a ComboBox
's initial selection.StatusBar
at the bottom of the DockPanel
. Give it a StatusBarItem
containing a Label
.private void formatAlignLeftMenuItem_Click(object sender, EventArgs e)
{
formatAlignLeftMenuItem.Checked = true;
formatAlignRightMenuItem.Checked = false;
formatAlignCenterMenuItem.Checked = false;
alignLeftContextMenuItem.Checked = true;
alignRightContextMenuItem.Checked = false;
alignCenterContextMenuItem.Checked = false;
alignLeftButton.Checked = true;
alignRightButton.Checked = false;
alignCenterButton.Checked = false;
MessageBox.Show("Align Left");
}
Button
s don't have Checked
or IsChecked
properties, so you can't check and uncheck the alignment toolbar buttons. Instead, make separate images to represent the checked state. Place checked and unchecked images in Image
controls with the Visibility
properties set to Collapsed
. Then use code similar to the following to set a Button
's image at run time:
alignLeftImage.Source = alignLeftUncheckedImage.Source;
Image
property. (Sorry but I couldn't think of a way to handle this easily without using if
-else
statements, which you learn about in Lesson 18.)
if (formatBulletMenuItem.IsChecked)
bulletImage.Source = bulletCheckedImage.Source;
else
bulletImage.Source = bulletUncheckedImage.Source;
ComboBoxItem
s. Then set the selected item as in the following code. (You don't need to set this to false
for the items that are not selected.)
superscriptOffsetComboBoxItem.IsSelected = true;
ComboBox
the same way you handle the offset ComboBox
.Selected
events for the offset and indentation ComboBoxItem
s.Selected
events for the initially selected ComboBoxItem
s. Unfortunately the window hasn't finished loading all of its controls yet, and the program crashes if it tries to set values for controls that aren't yet loaded. To prevent that, begin the event handlers for the initially selected ComboBoxItem
s with the following statement. (The statement basically means, “If the window isn't loaded yet, exit the event handler.”)
if (!IsLoaded) return;
ComboBoxItem
event handlers execute twice if you select one of the corresponding menu or context menu items. That's a bit inefficient, but don't worry about it for now. We'll fix it later.private void fgGreenButton_Click(object sender, EventArgs e)
{
fgButton.Image = fgGreenButton.Image;
MessageBox.Show("Text Color Green");
}
private void greenForeColorComboBoxItem_Selected(object sender,
RoutedEventArgs e)
{
MessageBox.Show("Text Color Green");
}
Text
property to a meaningful name. For example, set the new button's Text
to “New.” That should automatically set each button's tooltip to the same value.ToolTip
properties for the Button
, ComboBox
, and ComboBoxItem
controls.)StatusStrip
with a ToolStripStatusLabel
named turnLabel
. Set its initial Text
to Xs Turn
.Os Turn
.Xs Turn
.Visibility
property to Visibility.Hidden
.Content
property.ToolStripContainer
and two ToolStrip
s.
ToolStrip
buttons representing arrow, line, rectangle, ellipse, curve, and star tools. Make these tools exclusive choices so if the user selects one, the others deselect.ToolStrip
two ToolStripDropDownButton
s to represent foreground and background colors. Make the entries in each dropdown exclusive choices and make the choices display their images on their ToolStripDropDownButton
s.