Saturday, January 21, 2012

[C#] - Implementing the SystemTray using NotifyIcon

1. Introduction

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

OK. When it will be useful? Some application runs in 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 run 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 to and see 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 screen shot 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, say 11 seconds remaining as shown above, the tray icon will notify you with tool tip stating that the seconds you specified is expired. This is shown below:



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


3. Build the Context Menu

The form design is simple. It has label, textbox and a button explanation around that is not required. In the previous section we saw that a menu is displayed when we right click over 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 it 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: This property will display the information text that needs to be appeared on the balloon tool tip. A tip that appears as a notification
BallonTipTitle: Title given to the balloon tool tip
BallonTipIcon: Icon for the tool tip that appears before the tool tip title.
ContextMenu: A context menu associated to this Tray Icon. We will just select the context menu created in the previous step as the value for this property
Text: This text gets displayed when you move the mouse over the icon in the system tray.
Icon: 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 task bar when the number of seconds specified in the textbox is elapsed. We will use 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 piece of code, which run 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 seconds 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 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 task bar. 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 form. When the variable is set false (Form load already set it to false) the first thing we did was canceling 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 we it is time, 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 holds 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 of the NotifyIcon object will display the tool tip 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.

*** When a New Article posted, get Notification to the email that you give below: ***

DISCLAIMER

The opinions expressed herein are my own personal opinions and do not represent my current or previous employer's view in anyway