Saturday, October 01, 2011

C# - Using ToolStrip control with ToolStrip Button and ToolStrip Icon

1. Introduction to Tool Strips

Just Like Menustrip Control, "ToolStrip Control" also a relatively large piece of placeholder where you can place icon buttons, combo box, labels etc. To have an understanding have a look at the below picture:


In the top of the form, a toolbar is placed and there are number of toolbar buttons in the toolbar’s left and right-hand side. The toolbar can be moved 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 designing is to pick the important commands from the menu and place that in the toolbar as an iconic button for quicker access to those command through mouse clicks.

2. About the Sample

Screen shot of the sample application at runtime is shown below:



The toolbar is placed at the top of the form. For demonstration purpose, I kept three buttons on the right-hand side. In the sample placing the check mark on the Display Image and Text will show the quick command text for the toolbar buttons and at the same time the radio buttons below it gets enabled. And these radio button controls 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 no room to display the entire icon buttons in one row. When Horizontal Overflow radio button is checked, the toolbar buttons are stacked over a 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 of icon size should be assigned to it. The image will usually correspond to the task that button will do. Say for example the Quit toolbar button above shows a cross icon-saying sample is going to be stopped. Creating the toolbar button is shown in the below video:



4. Inserting Standard toolbar buttons

Visual studio provides some standard buttons say New document, Open Document, Cut, Copy etc., so that you can directly start hooking the associated handler to it by writing the one. In this sample also we added these standard buttons. However, there are no events hooked to it, I just kept it so that It will be useful to explain the overflow later. The below video shows adding the standard toolbar buttons:

Video: 


5. Aligning toolbar buttons

Sometimes it is required to align the toolbar buttons 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 do 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 on 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:  


6. Display Style of the Toolbar buttons

Each toolbar button has the ability to display and associated text along with their tool 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 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 am having a image manipulator 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 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 buttons.

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;
        }
    }
}

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 check state. The radio button event handler just makes use 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 behavior at runtime is shown in the below video.

Video: 



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 one 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 CanOverFlow option, you will still able to access the overflow buttons.

First, the checkbox click event is handled and the handler will set the CanOverFlow property to true when it 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 a different type of overflow styles (LayoutStyle Property) available and refer the MSDN for that. Here I just set two important styles to the toolbar using the enumeration "ToolStripLayoutStyle". One is "Flow" and another one is "HorizontalStackWithOverFlow". The Flow will set the overflowing toolbar buttons in the next row and HorizontalStack will place overflowing control one on another and toolbar provides a down-arrow at the end to access the stacked of buttons. The radio button 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: 




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 handler for the toolbar buttons that we have added to 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();
}
Source Code: Download

No comments:

Post a Comment

Leave your comment(s) here.

Like this site? Tell it to your Firend :)