1.
Introduction to Tool Strips
Just like the menustrip control, the toolstrip control has a relatively large
piece of placeholder space where you can place icon buttons, combo boxes, labels etc. To get an understanding, have a look at the below picture:
In the
top of the form, a toolbar is placed and there are a number of toolbar buttons on the toolbar's left and right hand side. The toolbar can be moved to anywhere in the
form and, like menu items, they can be hooked to the command handler routine.
People
usually place some important commands in the toolbar. The traditional way of user
interface design, is to pick the important commands from the menu and place them in the toolbar as iconic buttons for quicker access to those command through
mouse clicks.
2. About the Sample
A screen
shot of the sample application at runtime is shown below:
The
toolbar is placed at the top of the form. For demonstration purposes, I kept three
buttons on the right hand side. In the sample, checking Display Image and Text will show the quick command text for the
toolbar buttons and at the same time the radio button below it gets enabled. These radio button control the text position in relation to the toolbar
button icon.
Normal Flow under the ToolBar layout, when checked, moves
the toolbar buttons to the next row when there is now room to display the entire
icon buttons in one row. When the Horizontal Overflow radio button is
checked, the toolbar buttons are stacked a over vertical narrow barrel; this is
shown below:
Now, I
will walk you through creating the sample shown above.
3. Adding the Toolbar to form
The
toolbar is available in the Menus & Toolbar group. First the ToolStrip control is added, and then the toolbar buttons are added to
it. The appearance will not be impressive after the tool strip buttons are
added, so an image at icon size should be assigned to it. The image will usually
correspond to the task that button will do. For example, the Quit toolbar
button above shows a cross icon-saying sample is going to be stopped. Creating
the toolbar button is shown bythe below video:
Video:
Adding ToolStrip Control to Form
4. Inserting Standard toolbar buttons
Visual Studio provides some standard buttons like New document, Open
Document, Cut, Copy etc. so that you can directly start hooking the associated
handler to it. In this sample, we added these standard
buttons. However, there are no events hooked to them, I just kept it so that it
could be used to explain overflow later. The below video shows adding the
standard toolbar buttons:
Video:
Addling standard button
5. Aligning toolbar buttons
Sometimes, it is required that the toolbar buttons align to the right side of the
toolbar. User Interface designers like to keep the very frequently accessed
buttons on the toolbar on the right side of the toolbars. Say for example the
help and quit buttons may go on the right side of the toolbar. The below video
shows how we align three toolbar buttons and a separator on the right side of
the toolbar. After the alignment, the order may be adjusted as it depends in what
order you are changing the alignment from left to right. The alignment
property of each toolbar buttons helps you to decide the location of the toolbar
buttons in the toolbar.
Video:
Aligning some buttons to the Right
6. Display Style of the Toolbar buttons
Each
toolbar button has the ability to display associated text along with its tool icons. It is good for appearance when the associated text is small
enough. For example, for the cut icon, the cut is short enough
and there is nothing wrong if you put the text as move to clipboard.
But, the appearance of the toolbar is awkward when the other buttons also use
such a long text. You may be asking, "I have an image manipulation application, the icon text I need is 'Blur the Image then Shear.' How do I
describe that in short text and does the user understand it if I do?" Well, use
whatever text you want with a short terms like Sh.Blur and
describe full text in the status bar like Blur the Image then Shear.
We will see the status bar in the next article.
When we
want to display a short text along with the image icon, first you need to set
the text property for each toolbar button.
Source Code for Display Style
Look at
the screen shot at section 2, when the Display Image and Text
checkbox is checked, we are going to set each toolbar button to display the
associated text in it. Have a look at the below code:
//ToolBar 02: Display text and
Image for toolbar buttons
private void
chkImgTxt_Click(object
sender, EventArgs
e)
{
//Iterate through all the
buttons and set the required property
foreach
(ToolStripItem
item in
tlstrip.Items)
{
if
(chkImgTxt.Checked ==
true)
{
radTextFirst.Enabled =
true;
radImageFirst.Enabled =
true;
item.DisplayStyle =
ToolStripItemDisplayStyle.ImageAndText;
}
else
{
radTextFirst.Enabled =
false;
radImageFirst.Enabled =
false;
item.DisplayStyle =
ToolStripItemDisplayStyle.Image;
}
}
}
The click
event of the checkbox is handled. First we are iterating through all the toolbar
buttons in the ToolStrip control tlstrip. Inside the iteration, we
are setting the DisplayStyle property of the toolbar buttons by
getting the values from ToolStripItemDisplayStyle
enumeration. Also note that we are disabling the radio buttons (radTextFirst,
radImageFirst) that control the
relative position of the text with images based the checkbox's check state. The
radio button event handler just makes use pf the TextImageRelation
property to set the relative position of the text with toolbar by assigning the
property value from TextImageRelation.
Below is the code for it:
//ToolBar 03: Check the Radio
button state and set the Relation between Text, Icon Image
private void
radTextFirst_CheckedChanged(object
sender, EventArgs
e)
{
foreach
(ToolStripItem
item in
tlstrip.Items)
{
if
(radImageFirst.Checked == true)
item.TextImageRelation =
TextImageRelation.ImageBeforeText;
else
item.TextImageRelation =
TextImageRelation.TextBeforeImage;
}
}
The
above code's behavior at runtime is shown in the below video.
Video:
Display Style usage
7. Managing toolbar button overflow
The
ToolStrip control sometimes cannot provide enough room for all the Iconic
buttons and other ToolStrip controls. Usually it happens when the user resizes the
parent window of the ToolStrip control. The CanOverFlow property
allows toolbar buttons overflow to a separate row or in a stack on top of
the other one. In our example, setting the toolbar button to display text along
with the image makes some toolbar buttons go away. But when you enable the CanOverFlow option, you will still be able to access the overflow buttons.
First
the checkbox's click event is handled and the handler sets the
CanOverFlow property to true when the checkbox is in checked state. Below
is the code for it:
//ToolBar 05: Layout style is
set to Flow when Overflow is unchecked
private void
chkOverflow_CheckedChanged(object
sender, EventArgs
e)
{
if
(chkOverflow.Checked ==
false)
{
radFlow.Checked =
true;
tlstrip.CanOverflow =
false;
tlstrip.LayoutStyle =
ToolStripLayoutStyle.Flow;
}
else
tlstrip.CanOverflow =
true;
}
There
are different types of overflow styles (LayoutStyle property)
available; refer the MSDN for that. Here I just set two important styles to
the toolbar using the enumeration ToolStripLayoutStyle.
One is Flow and other one is HorizontalStackWithOverFlow.
Flow will set the overflowing toolbar buttons in the next row and
HorizontalStack will place overflowing control one on top of another and the toolbar
provides a down-arrow at the end to access the stack of buttons. The radio
button even handler is shown below:
//ToolBar 06: Set the Toolbar
Layout to Flow
private void
radFlow_CheckedChanged(object
sender, EventArgs
e)
{
if
(radFlow.Checked == true
)
tlstrip.LayoutStyle =
ToolStripLayoutStyle.Flow;
}
//ToolBar 07: Items laid out
horizantally and when no room, placed in the overflow bar.
private void
radHorFlow_CheckedChanged(object
sender, EventArgs
e)
{
if
(radHorFlow.Checked ==
true)
tlstrip.LayoutStyle =
ToolStripLayoutStyle.HorizontalStackWithOverflow;
}
Video:
Overflow of Toolbar buttons
8. Other piece of Code
1)
Overflow is set to false when the form is loading
//ToolBar 04: Set the Overflow
to false initially
private void
frmToolStripExp_Load(object
sender, EventArgs
e)
{
tlstrip.CanOverflow =
false;
}
2) Some click event handlers for the toolbar buttons that we added on Section 3.
//ToolBar 01: Sample Handlers
private void
tsBtn1_Click(object
sender, EventArgs
e)
{
MessageBox.Show("Open
Notepad");
}
private void
tsBtn2_Click(object
sender, EventArgs
e)
{
MessageBox.Show("Open
Calculator");
}
private void
tsBtn3_Click(object
sender, EventArgs
e)
{
this.Close();
}