Do you like this site? Why can't you tell it to your Friend :)

Saturday, January 21, 2012

[C#] - Implementing the SystemTray using NotifyIcon

1. Introduction to .Net NotifyIcon Control

"NotifyIcon Control" is useful for providing the system tray support for your application. This control is grouped under the common control inside the developer studio’s toolbox. Usually when the user minimizes the application, an icon in the system tray area appears. When you right click on the icon (Sometimes clicking also, depends on how you implement) it displays a context menu and you can take action from there.

OK. When will it be useful? Some application runs in the background or some task of the application takes more time to complete or simply the interaction between the users is very less/read only (Take information application). These applications use the system tray concept. Some examples are: Your Internet connection, TaskManager etc


2. About the Sample

The sample example screen shot is shown below:



The example shown above will take input seconds in the textbox and when you click on the button Track Seconds elapsed, a counter next to button shows the remaining seconds. When you click the close button, this example actually runs in the background and an icon will be placed in the system tray. Right-clicking the system tray Icon for this sample will pop-up a menu and you can actually exit the sample by clicking the exit menu item or you can come back and see the dialog by clicking the remaining seconds Menu item. This is shown below:



So all we need to develop the above-shown sample are listed below:

  1. An Icon that displays in the system tray. In the above screenshot, it is marked in red.
  2.  A Context menu that will display when the tray icon is right-clicked
  3.  A timer that is useful to track the seconds entered.

Ok. When the sample is closed and the timer is still running, as shown in the application screenshot (11 seconds), the tray icon will notify you with tooltip stating that the seconds you specified (11 Seconds) is expired. This is shown below:



OK. Let us start designing the form first, then move to the coding.


3. Build the Context Menu

The form design is simple. It has a label, a textbox and a button. In the previous section, we saw that a menu is displayed when we right click on the icon in the system tray. So first we need to add the "Context Menu" to the form then start adding the menu items to it. Setting up the context menu is shown in the below video.



4. Adding NotifyIcon Control

When the application’s close button is clicked, we are going to actually hide the form and display the icon over the system tray area, which is usually at the lower right-hand corner of the task bar. NotifyIcon is the control that will make this task easier. In our sample, after adding this control the following properties are set:

"BallonTipText Property": This property will display the information text that gets displayed as tooltip text on the tray area. 
"BallonTipTitle Property": This property is used to provide title to the tooltip text.
"BallonTipIcon Property": Icon for the tool tip that appears before the tooltip title.
"ContextMenu Property": A context menu associated to this Tray Icon. We will just select the context menu created in the previous step as the value of this property
"Text Property": This text gets displayed when you move the mouse over the icon in the system tray.
"Icon Property": This property takes the Icon as input and displays that on the system tray area.

Below is the video that shows how we set these properties for the NotifyIcon Control.



5. Add Timer component

Now the NotifyIcon control is set (Of course we should write some code) and ready to implement. Before that, our form requires a way to communicate the tray icon in the taskbar when the number of seconds specified in the textbox is elapsed. We will use a timer for that and the timer procedure will run for every 1000 milliseconds (1 sec). Setting up the timer component to the form is shown in the below video. The interval property is set to 1000 milliseconds and it says the control to raise the "Tick Event" for every 1-second.



6. Source Code: Some basic implementation

1) First the variable required for the implementation is declared. Below are the declarations:

//Tray_01: Variable to know when should I exit the form
private bool EndNow = false;
private int m_secs ;

The Boolean variable EndNow tells when should we actually exit the form. The variable is used by a piece of code, which runs when the close button (x) of the form is pressed. The variable m_secs will track the remaining time before raising the notification message.

2) Next, when the button Track Seconds Elapsed is clicked, we enable the timer and it will raise the Tick event for each second passes. The Button click handler is shown below:

//Tray_02: Simply wait for the Seconds to elapse
private void btnMonitor_Click(object sender, EventArgs e)
{
    m_secs = Int32.Parse(txtSeconds.Text);           
    timer.Enabled = true;
}

Well the Parse function converts the number entered into the textbox and stored that in the m_secs class level variable and it is going to crash the sample when you enter something other than a number. I do not want to divert it placing the validation part of the textbox.

3) We know that the context menu has two menu items. The handler for those menu items are shown below:

//Tray_03: Implement Context Menu
private void mnuRemaining_Click(object sender, EventArgs e)
{
    this.Show();
}
private void mnuExit_Click(object sender, EventArgs e)
{
    EndNow = true;
    this.Close();
}

When we click the Remaining item, the show() method makes the form visible and the person can look at the form to know remaining time. And when the exit button is clicked, we just set the EndNow variable to true and then make a call to Close() to close the form. This close function will raise an event before actually closing the form and handler for that event (Will be shown, continue reading) will check this variable to know OOOk, now I can dismiss the form EndNow is set to true.

4) When we load the form we just hide the TrayIcon by setting its Visible property to false. The code is shown below:

//Tray_06: Set the Tray Icon visibility to False
private void frmTrayIcon_Load(object sender, EventArgs e)
{
    TrayIcon.Visible = false;
}

7. Source Code: Displaying System Tray Icon

We know that the when the user clicks the x button to close the form, we should display the system tray icon in the taskbar. Before closing the form .net framework will raise a "FormClosing Event" giving a chance for doing something like clearing activities like closing the resources, releasing the memory (Forceful not respecting G.collector) or even having chance to say “Hey don’t close”. That last one we are doing here by providing the handler for the event that we are discussing. Below is code for it:

//Tray_05: When the close button clicked, hide the form and show TrayIcon
private void frmTrayIcon_FormClosing(object sender, FormClosingEventArgs e)
{
    if (EndNow == false)
    {
        e.Cancel = true;
        Application.DoEvents();
        this.Hide();
        TrayIcon.Visible = true;
    }
}

In the above code first, we are checking the variable to make sure we can close a form. When the variable is set false (Form load already set it to false) the first thing we did was cancelling the close action. Setting cancel property of the passed in "FormClosingEventArgs" to true does this. After requesting to cancel the close operation, we displayed TrayIcon by setting the Visible property to true. And before this, we are hiding the form, as it has to be run in the background using the call to the Hide() method.

8. Source Code: Displaying Balloon Tooltip

The "Balloon Tooltip" will be displayed when the seconds entered in the input textbox is expired. All we need to do is, provide a handler for the Tick event of the timer, and when event triggers, ask the "System Tray Icon" to display the balloon text. The code for this event handler is shown below:

//Tray_04: Timer will display the remaining seconds and ends
//              when all the seconds passed by. Also it shows balloon tip
//              When you are in form hided state (Tray iconified)
private void timer_Tick(object sender, EventArgs e)
{
    m_secs = m_secs - 1;
    lblElapsed.Text = m_secs.ToString();
    if (m_secs == 0)
    {
        timer.Enabled = false;
        if (this.Visible == false)
            TrayIcon.ShowBalloonTip(5);
    }
}

In the above code (Runs for every 1 seconds until the timer is disabled), first, we are decrementing the seconds. So the variable m_secs will actually hold remaining time to raise the notification. When seconds reads zero, we disabled the timer (timer.Enabled = false) so that this procedure won’t run again. Then, the call to the "ShowBalloonTip()" method of the NotifyIcon object will display the tooltip for 5 seconds. The parameter says display it for five seconds.

Watch the below video to see the sample in action:


Source Code : Download

No comments:

Post a Comment

Leave your comment(s) here.

Like this site? Tell it to your Firend :)