1. Introduction To System Tray And NotifyIcon Control
‘NotifyIcon Control’ provides the System Tray support for the desktop applications. This control is grouped under the ‘Common Controls’ inside the developer studio’s toolbox. When the user minimizes the application, NotifyIcon Control can display an icon in the system tray. It also supports showing a context menu when user right clicks on the system tray icon. This control can display Balloon Tooltip when the application wants to show notification to the user.
When can one use this control? An application running in the background 24/7 or a task of it taking a longer time to complete are suitable to use this NotifyIcon Control. Say, for example, a ‘File Find’ utility after taking the user input can take more time to do the task. When minimized, it can go into system tray and alerts the user when it completes the task. Some application may run in background 24/7 and when user want to interact with it, they may bring up the context menu from system tray icon.
2. About This System Tray Example
The Example we will create to study the NotifyIcon Control is below:
SystemTray Using NotifyIcon Control Example
The example shown above will take the ‘number of seconds’ as input in the text box. When user clicks on the ‘Track Seconds Elapsed’ button, a counter next to the button shows the remaining seconds. When you click the close button in the top right corner, this example runs in the background and an icon will be placed in the system tray. Right-clicking the system tray Icon will show a context menu. We can exit the example by clicking the ‘Exit’ menu item or we can go back and see the dialog by clicking the ‘Remaining Seconds’ menu item. The below picture shows the System Tray icon and its context menu:
Our Example in System Tray
Below is the list of tasks we carry out to complete this example:
- Get a suitable icon that displays in the system tray. In the above screenshot, it is marked in red.
- Prepare a Context menu that will display when the user right clicks the tray icon.
- A Timer to track the elapsed seconds.
When user closes the dialog, it sits in the system tray. The timer still runs counting the elapsed time. When NotifyIcon control sees the elapsed time crossed the time entered by the user, it notifies the user with a ‘Balloon Tooltip‘ as shown below:
System Tray balloon tooltip
First, we will design our form and then move to coding.
3. Prepare Context Menu
The form design is simple. It has a label, a text box and a button. In the previous section, we saw that System Tray Icon displays a menu when we right click on it. So first we need to add the ‘Context Menu’ to the form, then add the menu items to it. The NotifyIcon control will use this context menu when the application is iconified. The below video shows how to set up the context menu:
4. Setup NotifyIcon and Balloon Tooltip
When the user clicks the close button in the top right corner of the window, we will hide the form and display the icon over the System Tray area. It is at the lower right-hand corner of the Taskbar. NotifyIcon is the control that will make this task easier. The below table shows important properties of the NotifyIcon Control:
| Property Name | Description |
|---|---|
| BallonTipText | This property will store the information text that gets displayed as balloon tooltip text on the tray area. |
| BallonTipTitle | This property is used to provide title to the balloon tooltip text |
| BallonTipIcon | Icon for the tool tip that appears before the balloon tooltip title. |
| ContextMenu | A context menu associated to this NotifyIcon Control. 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. |
The below video shows how we set these properties for the NotifyIcon Control:
5. Setup a Timer
Now the NotifyIcon control is set 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 text box elapses. 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. We set the interval property to 1000 milliseconds, and it says the control to raise the ‘Tick Event’ for every 1 second.
6. Show Tray Icon & Implement Context Menu
6.1 Form Level Variables
First, we declare the variables at form level. These are available all the event methods. The below code shows the declarations:
|
1 2 3 |
//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 we should exit the form. We use this variable when the user closes the form through the iconic button x in the top right corner of the form. The variable
m_secs
will track the remaining time before raising the notification message.
6.2 Input Number For Elapsed Time
When the user clicks the button ‘Track Second Elapsed’, we enable the timer and it will raise the Tick event for each second passed by. The Button click handler is below:
|
1 2 3 4 5 6 |
//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; } |
The Parse function converts the number entered the text box and stores that in the
m_secs
class level variable. In this example does not do any validation in the user input for number. So, giving an invalid number in the input field will crash the example.
6.3 Implement Context Menu Handler
We know that the context menu has two menu items. The handler for those menu items is below:
|
1 2 3 4 5 6 7 8 9 10 |
//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 context menu item ‘Remaining’, the
show()
method makes the form visible and the user can look at the form to know remaining time. When the user clicks the exit button, we just set the
EndNow
variable to true and then make a call to
Close()
to exit the form. This close function will raise an event before closing the form. The handler for that event (soon we will write it, continue reading) will check the
EndNow
variable and quits the application when it is having the value, true.
6.4 Is It Form Load? Hide System Tray Icon!
When we load the form, we just hide the System Tray Icon by setting Visible property of the Notify Icon Control to false. The code is shown below:
|
1 2 3 4 5 |
//Tray_06: Set the Tray Icon visibility to False private void frmTrayIcon_Load(object sender, EventArgs e) { TrayIcon.Visible = false; } |
7. FormClosing Event Handler
We know that 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 clearing activities like closing the resources, releasing the memory or even saying “Hey don’t close. I have something to show”. That last one we are doing here by providing the handler for the event we are discussing. Below is code for it:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
//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
EndNow
variable to make sure we can close a form. When the variable is set to false (Form load already set it to false) the first thing we did was cancelling the close action of the user. Setting
cancel
property of the passed in ‘
FormClosingEventArgs
’ to true does this. After requesting to cancel the close operation, we displayed Tray Icon by setting the
Visible
property of the NotifyIcon control to true. And before this, we are hiding the form by calling the
Hide()
function. After this call, the form will run in the background, leaving an icon in the System Tray.
8. Display Balloon ToolTip From System Tray
In the above code which runs for every 1 seconds until the timer is disabled, first, we decremented the seconds. So, the variable
m_secs
will keep track of ‘remaining time’ to raise the notification text. When second reads zero, we will disable the timer through the statement ‘
timer.Enabled = false
’; so that this procedure won’t run again. Then, we will call the ‘
ShowBalloonTip()
’ function of the NotifyIcon object. This will display the tooltip. The parameter passed to it tells the function to display the tip text for five seconds.
Watch the below video to see the sample in action (Taskbar is in the Top):
Download Source From Google Drive: C# NotifyIcon Control Example
Categories: C#
Tags: Balloon Tooltip, Context Menu, FormClosing Event, System Tray Icon, Timer
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.