Tuesday, October 18, 2011

C# - Display information on C# StatusStrip

1. What is StatusStrips?

"StatusStrip" is a family of strip controls like MenuStrip and ToolbarStrips, which is Status Strips used to display some quick help and information to the user who is using the application. A status strip control will look like the one shown below:



C# status strip control allows you add even combo and textboxes to the status. In this example we will have a look at how we add a StatusBar to the application and how will we use it. Then we will look at some of the important properties and use that efficiently.

2. About the Sample

The screenshot of the sample in created in C# is shown below:



The black colored narrow strip is the status strip and it has three slots in it. The computation section (Sorry for the spelling mistake in the button. Lazy to change it for now] will calculate the sum of the number you enter. On iteration of the numbers, a delay is introduced intentionally to simulate that it is a long running process. During that time Computing please wait to appear in the first status slot. The second slot will show current border style and the third one shows your last input given for computing the summation section.

You can set two kinds of border style to the status bar in the sample using the border style section. Once a border style is picked it can be applied to the top side of the slot or bottom side of the slot or can be applied to all 4 sides. The applied sides can be revoked by un-checking the check boxes.

The spring check boxes allow expanding the slot to occupy the remaining free space. We will start the sample now.

3. Adding Status bar and Setting the properties

From the Menus & Toolbar section, the StatusStrip Control is added to the form. Once StatusStrip Control is added, the status labels (Three slot has three labels in the sample) are added using the edit items option of the status bar. Then inside the property dialog, you can the individual property for the status bar items. This is shown in the below video:



4. Assigning initial texts in the status

The StatusLabel in the status bar can be accessed by its name. In the form load event handler, we are placing some initial text. Event handler is code given below:

//Status 001: Set status Labels
private void StatusBarSample_Load(object sender, EventArgs e)
{
    //Access the Status Labels by Name
    SLabel1.Text = "Idle";
    SLabel2.Text = "Default";
    SLabel3.Text = "0.0";
}

SLabel1 to SLabel3 is added in the previous step and its text property is set during the form load. So the initial display of the form will show above set texts in the status labels.



5. Showing informative text dynamically

When is it required to show informative text? Say when the application is going on the long process it needs to be informed to the user. Some people display an hourglass icons and some display a 'please wait message' in the status bar. We are going to display the 'please wait message' in the status bar. The compute button will calculate some summation of the given number and a thread delay is introduced to show it is along running process.

The Compute Summation button click handler is shown below:

//Status 002: Compuate Summation
private void btnSum_Click(object sender, EventArgs e)
{
    //Status 002_1: Declarations and some initialization
    long endno = long.Parse(txtInput.Text);
    long sum = 0;
    lblResult.Text = "";

    //Status 002_2: Set the text for status and start computation. Do not forget Application.doevents()
    SLabel1.Text = "Computing Please Wait..";
    for (long cnt = 1; cnt < endno + 1; cnt++)
    {
        Thread.Sleep(10);
        Application.DoEvents();
        sum = sum + cnt;
    }
    lblResult.Text = sum.ToString();

    //Status 002_3: Set the status as Idle
    SLabel1.Text = "Idle";
    SLabel3.Text = "Last Input: " + txtInput.Text;
}

In the above code,

The Thread.Sleep(10); is used to hang the sample for 10 milliseconds in each iteration. Before the long process (Made long) starts we are displaying the status label the please wait message using the statement: SLabel1.Text = "Computing Please Wait.."; and at the end, we are changing the status label to Idle meaning that application is not busy now. Also, we are setting the input processed in the last status label.

    SLabel1.Text = "Idle";
    SLabel3.Text = "Last Input: " + txtInput.Text;

It should be noted that even though we set the status label Please wait, it will not get displayed when the application too busy. That is when the application busy it has no time to make any user interface changes and displaying the new label text appears only when the application goes to normal stage from the busy stage. Then it will be no use when the label does not display computing please wait when required. The call to Application.DoEvents() will serve the processing of any waiting events in our case it is updating the status label from model to computing please wait. How the status label displays the waiting message is shown in the below video:



6. Setting Border Style using Status slot edges

Note that in section 3 of this article we added three ToolStripStatusLabels to our status strip. In this section, we are going to set the border style to the edges of the control.



Member name
Description

Adjust
The border is drawn outside the specified rectangle, preserving the dimensions of the rectangle for drawing.

Bump
The inner and outer edges of the border have a raised appearance.

Etched
The inner and outer edges of the border have an etched appearance.

Flat
The border has no three-dimensional effects.

Raised
The border has raised inner and outer edges.

RaisedInner
The border has a raised inner edge and no outer edge.

RaisedOuter
The border has a raised outer edge and no inner edge.

Sunken
The border has sunken inner and outer edges.

SunkenInner
The border has a sunken inner edge and no outer edge.

SunkenOuter
The border has a sunken outer edge and no inner edge.

The above table shows all the available border styles. In this Example, I had taken only two of them. The Source code for applying and revoking the BorderStyle to the Sides of the Status label is explained below.

1) First, an Enumeration type is declared. This enumeration is capable os holding the value for the sides. The enum variable is initialized to None first.

//Status 003: Used for the Borderside property
ToolStripStatusLabelBorderSides applyto = ToolStripStatusLabelBorderSides.None ;

2) When you select the Border Style using either "Sunken outer" or "Etched", We are making a call to the user-defined function "ApplyBorderStyle". Code is below:

//Status 005: Once we have the border sides, we can apply the border styple
private void radSunken_CheckedChanged(object sender, EventArgs e)
{
    ApplyBorderStyle();
}

3) In the ApplyBorderStyle function, we are assigning the combination of BorderSides stored in the applyto variable to all three status labels. The checkbox event handler will assign the sides or revokes it from this variable. After applying the sides in effect, we setting the border style by checking radSunken.Checked == true and when it is true, the corresponding border style is set followed by updating the status label2 to show that is current border style.

//Status 006: Apply Border style
private void ApplyBorderStyle()
{
    SLabel1.BorderSides = applyto;
    SLabel2.BorderSides = applyto;
    SLabel3.BorderSides = applyto;

    if (radSunken.Checked == true)
    {
        SLabel1.BorderStyle = Border3DStyle.SunkenOuter;
        SLabel2.BorderStyle = Border3DStyle.SunkenOuter;
        SLabel3.BorderStyle = Border3DStyle.SunkenOuter;
        SLabel2.Text = "Sunken Outer";
    }
    else
    {
        SLabel1.BorderStyle = Border3DStyle.Etched;
        SLabel2.BorderStyle = Border3DStyle.Etched;
        SLabel3.BorderStyle = Border3DStyle.Etched;
        SLabel2.Text = "Etched";
    }
}

4)  To apply or revoke the sides in effect, the bitwise OR(|), bitwise XOR(^) is used like below:

applyto = applyto | ToolStripStatusLabelBorderSides.Top;  To apply a side
applyto = applyto ^ ToolStripStatusLabelBorderSides.Top;  To revoke a side
           
The above bitwise operations are used when you do check and uncheck on the checkboxes that specifies the edges in which the border style will be applied.     Below is the available border sides, which taken from the ToolStripStatusLabelBorderSides enumeration:

{
        None = 0,
        Left = 1,
        Top = 2,
        Right = 4,
        Bottom = 8,
        All = 15,
    }

The above two statement that applies and then revokes the Top borderside is depicted as follows:



The checkbox event handler will apply and revoke the corresponding edge using the method specified above. Note that after storing the required sides in the variable applyto, we are making a call to the "ApplyBorderStyle()" and we already saw that the called function will apply your selected border styles to the edges that are applicable. The code for that is shown below:

//Status 004: Store the bordersides for applying the border style
private void chkTop_CheckedChanged(object sender, EventArgs e)
{
    //Apply the side using bitwise Or Operator. Remove the style using the Xor
    if( chkTop.Checked == true )
        applyto = applyto | ToolStripStatusLabelBorderSides.Top;
    else
        applyto = applyto ^ ToolStripStatusLabelBorderSides.Top;
    ApplyBorderStyle();
}

private void chkLeft_CheckedChanged(object sender, EventArgs e)
{
    if (chkLeft.Checked == true)
        applyto = applyto | ToolStripStatusLabelBorderSides.Left;
    else
        applyto = applyto ^ ToolStripStatusLabelBorderSides.Left;
    ApplyBorderStyle();
}

private void chkAll4_CheckedChanged(object sender, EventArgs e)
{

    if (chkAll4.Checked == true)
    {
        chkTop.Checked = true;
        chkLeft.Checked = true;
        applyto = applyto | ToolStripStatusLabelBorderSides.All;
    }
    else
    {
        chkTop.Checked = false;
        chkLeft.Checked = false;
        applyto = ToolStripStatusLabelBorderSides.None;
    }
    ApplyBorderStyle();
}

Below is the video that shows testing the Border style code explained above.




7. RenderMode property of the StatusStrip

The Render Mode is just a different style for the status bar. As I applied the background image for the status bar the render mode has a very little effect. Below is the code that makes use of the "RenderMode Property":

//Status 008: Set different Render Mode
private void radRModeSystem_CheckedChanged(object sender, EventArgs e)
{
    if (radRModeSystem.Checked == true )
        statusSt.RenderMode = ToolStripRenderMode.System;
}

private void radRModeProf_CheckedChanged(object sender, EventArgs e)
{
    if(radRModeProf.Checked == true )
        statusSt.RenderMode = ToolStripRenderMode.Professional ;
}

8. Spring Property of the Status Items

As the name suggests it performs the spring action on the status slots. When the "Spring Property" is set to true, the slot expands to occupy the remaining free area in the status bar. When more than one slot has Spring property set to true, they share the remaining free space on the status strip together.

Below is the checkbox handler code for setting the spring property for either first slot or second slot or for both.  I intentionally do not provide setting the spring property for the third slot so that you can know that third slot always fit the text it is holding.

//Status 007: Set the Spring effect for status bar
private void chkSpringLb1_CheckedChanged(object sender, EventArgs e)
{
    if (chkSpringLb1.Checked == true)
        SLabel1.Spring = true;
    else
        SLabel1.Spring = false;
}

private void chkSpringLb2_CheckedChanged(object sender, EventArgs e)
{
    if (chkSpringLb2.Checked == true)
        SLabel2.Spring = true;
    else
        SLabel2.Spring = false;
}


See you all in the next article. The sample is developed in VS2005 IDE. If you have the latest one, just accept the conversion asked by the dialog of your latest IDE.

Source Code : Download

No comments:

Post a Comment

Leave your comment(s) here.

Like this site? Tell it to your Firend :)