1. Introduction To C# ToolStrip Control and Toolbar Buttons
Just Like Menustrip Control, “C# ToolStrip Control” also a rather large piece of placeholder where we can place Toolbar Buttons, combo box, labels, etc. To have an idea have a look at the below picture:
In the form’s top, a toolbar was placed using ToolStrip Control. This Toolbar is having several Toolbar Buttons in the left and right-hand side. We can move the toolbar anywhere over the edge of the form. Like menu items, we can hook them to a command handler routine.
People usually place some important commands in the toolbar. The old way of user interface designing is to pick the important commands from the menu and place that in the toolbar as an iconic Button. This is for quicker access to these command through mouse clicks. After some point in time, the user become familiar with these Button icons. For example, we all know Icon of floppy disc invokes the save command.
2. About This Example
Screen shot of the sample application at run-time is shown below:
ToolStrip C# Example
We place the toolbar at the top of the form. For demonstration purpose, we will keep three Toolbar buttons on the right-hand side. In the example, placing the check mark on the ‘Display Image and Text’ will show the quick command text for the Toolbar Buttons and it will enable the radio buttons below it. These radio Button controls the text position in relation to the Toolbar Button Icon.
Next, we have a group box called ‘Toolbar Layout’ and through which we can study ToolStrip behavior when it overflows with buttons. ‘Normal Flow’ under the ‘Toolbar layout’, when checked, moves the Toolbar Buttons to the next row when there is no room to display the entire Button icons in one row. When ‘Horizontal Overflow’ Radio Button is checked, the ToolStrip Control stacks the Buttons over a vertical narrow barrel. This is shown in the below picture:
Now, we will create this example.
3. Adding Toolbar Buttons
The toolbar is available in the “Menus & Toolbar” group. First, we add the C# ToolStrip Control to the Form and then the Toolbar Buttons to it. The appearance will not be impressive after the tool strip buttons are added. So, we must assign an Iconic Image to the Buttons. The image will usually correspond to the task that Button will do. Say, for example, the Quit Button above shows a cross Icon-saying clicking it will close the application. The below video shows how to Create Buttons and add it to the C# Windows Form:
Video: Add Toolbar Buttons to ToolStrip Control and Assign Image Icons
4. Adding Standard Toolbar Buttons to ToolStrip
Visual studio provides some standard buttons say New document, Open Document, Cut, Copy etc., so we can hook the associated handler to it by writing the one. In this example, we added these standard buttons. However, there are no events hooked to it. We just kept it there so that we can explore the button overflow later. The below video shows how to add the standard Toolbar Buttons:
Video: Insert Standard Toolbar Buttons
5. Right Aligning Toolbar Buttons in C# ToolStrip
Sometimes we need to align the Toolbar Buttons to the right side of the toolbar. User Interface designers like to keep the frequently accessed buttons on the right side of the Toolbar. Say, for example, the help and quit buttons may go to the right side of the toolbar. The below video shows how to align three Toolbar Buttons plus a separator on the right side of the toolbar. After the alignment, we can adjust the order. The order depends on in what order we are changing the alignment from left to right or right to left. The “Alignment Property” of each Toolbar Buttons helps us to decide location of the Buttons in the toolbar.
Video: Right Justify three Toolbar Buttons in the ToolStrip & change display order
6. Display Toolbar Button With Image & Text
Each Toolbar Button can display associated text along with their Button icons. It will be good for appearance when the associated text is small enough. Say for example, for the cut Icon, the cut is short enough and there is nothing wrong if we put the text as ‘move to clipboard’. But the toolbar’s appearance is awkward when the other buttons also use such a long text. One may ask, “I am having an image manipulator application, the Icon text I need is, ‘Blur the Image then Shear’. How do I describe that in a short text? If I have a short text, does the user understand it?” Well, the person can use whatever text he/she wants with a short term like ‘Sh.Blur’ and describe full text in the status bar like ‘Blur the Image then Shear’. We will look at status bar in some other articles.
When we want to display a short text along with the Button Icon, first we need to set the Text property for each Toolbar Buttons as shown in the 2nd picture in section 2.
6.1 DisplayStyle Property
Look at the screen shot at section 2. When we check the ‘Display Image and Text’ checkbox, the ToolStrip control will set each Button to display the associated text with its image icon. Have a look at the below code which runs when the user click the checkbox ‘Display Image and Text’:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
//ToolBar 02: Display text and Image for 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; } } } |
First, we are iterating through all the Toolbar Buttons in the C# ToolStrip control
tlstrip
. Inside the iteration, we set the “
DisplayStyle
Property” of the
ToolStripItem
by getting the values from “
ToolStripItemDisplayStyle
” enumeration. Also note that we are disabling the radio buttons
radTextFirst
,
radImageFirst
which controls the relative position of the text with images based on the checkbox check state.
6.2 TextImageRelation Property
In the Radio Button event handler, we set the relative position of Text and Button Icon. The
TextImageRelation
property and Enumerations are used to set the relative positions. Below is the code for it:
|
1 2 3 4 5 6 7 8 9 10 11 |
//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 behavior at run-time is shown in the below video.
Video: ToolStripItemDisplayStyle &TextImageRelation
7. Managing Toolbar Button overflow
The C# ToolStrip control sometimes cannot give ample room for all the Iconic buttons and other ToolStrip controls. Usually, it takes place when the user resizes the parent window of the ToolStrip control. The “
CanOverFlow
Property” allows Toolbar Buttons run over to a separate row. In our example, setting the Button to display text along with the image makes some Buttons go away from the visible area. But when we enable CanOverFlow option, we will still be able to access the overflown buttons.
First, the checkbox click event is handled and the handler will set the
<strong>CanOverFlow</strong>
property to true when it is in the checked state. Below is the code for it:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
//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 various types of overflow styles (
<strong>LayoutStyle</strong>
Property) available. One can refer the MSDN to know about it. Here we just set two important styles to the toolbar using the enumeration “
ToolStripLayoutStyle
”. One is “
Flow
” and another one is “
HorizontalStackWithOverFlow
”. Flow Style will set the overflowing Buttons in the next row. HorizontalStack style will place overflowing controls one on another and toolbar gives a down-arrow at the end to access these stacked buttons. The radio Button handler is below:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
//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: ToolStrip’s Layout Style
8. Other Pieces of code
Overflow is set to false when the form is loading.
|
1 2 3 4 5 |
//ToolBar 04: Set the Overflow to false initially private void frmToolStripExp_Load(object sender, EventArgs e) { tlstrip.CanOverflow = false; } |
Some click handler for the Buttons which we added in Section 3 earlier.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
//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(); } |
Download Link: ToolStrip Control Example
Categories: C#
Tags: C# TextImageRelation, C# ToolStrip CanOverFlow, C# ToolStripItem, C# ToolStripLayoutStyle, HorizontalStackWithOverFlow
Do you like this Example? Please comment about it for others!!
This site uses Akismet to reduce spam. Learn how your comment data is processed.