By Alessandro Del Sole – Microsoft MVP
Read the entire series of articles here: Programming the Windows 7 Task Bar with WPF 4
As a developer you often face situations in which you need to communicate to users the state of your application. For example, when the application encounters an exception you must tell the user what is happening. One of the improvements in Windows 7 is how you can communicate the status of your application using Overlay Icons in the task bar. You can overlay your application’s icon with another icon of size 16 x 16 pixels in order to provide information about the application’s state without replacing the entire icon in the task bar. Figure 1 shows an example of an overlay icon.
Figure 1 – An overlay icon can indicate that your app is running correctly
As you can see, a green icon is simply overlaying the application’s icon without the need of replacing the entire image. With a quick glance, the user can see the status of the application. In this article I will discuss overlay icons from a Windows Presentation Foundation (WPF) 4 perspective, showing how simple it is to add and remove such images on the application’s icon in the Windows 7 Task Bar.
The sample application has a very simple goal: it will listen for a change in network availability. Depending on the result, a specific overlay icon will be added onto the Windows 7’s task bar that indicates whether the network connection is available or not. With that said, open Visual Studio 2010 and create a new WPF Application. The user interface for the application is irrelevant for this example. You will only need a few additional lines of XAML when working with overlay icons. You need a reference to the task bar as well as the resources you use as the actual overlay icons.
In order to interact with Windows 7’s task bar, you need a reference to it. Moreover you need to declare image resources that the application will use as the overlay icons. The definition of the window in Listing 1 shows how to accomplish this.
<Window x:Class="MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="145" Width="250"> <!-- Getting a reference to the task bar --> <Window.TaskbarItemInfo> <TaskbarItemInfo/> </Window.TaskbarItemInfo> <Window.Resources> <!-- Each image has to be declared inside a DrawingImage resource. An identifier must be provided via x:Key--> <DrawingImage x:Key="WarningImage"> <!-- The required image is declared inside the DrawingImage.Drawing property definition --> <DrawingImage.Drawing> <!-- The actual image is specified via an ImageDrawing element. Particularly the ImageSource property points to the image path whereas Rect specifies the image size--> <ImageDrawing Rect="0,0,16,16" ImageSource="/WpfApplication1;component/Images/109_AllAnnotations_Warning_16x16_72.png" /> </DrawingImage.Drawing> </DrawingImage> <DrawingImage x:Key="OkImage"> <DrawingImage.Drawing> <ImageDrawing Rect="0,0,16,16" ImageSource="/WpfApplication1;component/Images/109_AllAnnotations_Default_16x16_72.png" /> </DrawingImage.Drawing> </DrawingImage> </Window.Resources> <Grid> </Grid> </Window>
Listing 1 – Getting a reference to the task bar and declaring image resources
Each overlay icon must be declared as a DrawingImage resource, which you need to reference via an identifier (x:Key) that allows you to reference the resource in managed code. The DrawingImage.Drawing property contains the definition for the overlay icon, which is actually referred to via an ImageDrawing item. You need to pay attention to a couple of things:
The ImageDrawing.ImageSource property points to the icon pathname. If you use the Visual Studio 2010’s Property Window to set such a property, the resource will be embedded inside the application and Visual Studio will generate the appropriate pathname (under the form of a packed URI) for you. Both the images used in the sample application ship with the Visual Studio 2010 Image Library, that you can find inside the C:\Program Files\Microsoft Visual Studio 10.0\Common7 sub-folder. Once you have a reference to the task bar and declared all overlay icons you need, then you are ready to use them in code. It is worth mentioning that you can also move these resources to the Application.xaml file so that multiple windows in your application could take advantage of the overlay icons.
You assign overlay icons to your application’s icon by simply assigning the TaskbarItemInfo.Overlay property like this:
Me.TaskbarItemInfo.Overlay = CType(Resources("OkImage"), ImageSource)
As you can see, the image is retrieved by searching through resources. You remove an overlay icon by setting the above property to Nothing (or null in C#):
Me.TaskbarItemInfo.Overlay = Nothing
Assigning overlay icons is really simple, but for this example we will perform a little more work. The application will:
Listing 2 demonstrates a way to do this.
Imports System.Net.NetworkInformation Class MainWindow Sub New() ' This call is required by the designer. InitializeComponent() AddHandler NetworkChange.NetworkAvailabilityChanged, Sub(sender As Object, e As NetworkAvailabilityEventArgs) Try Dispatcher.Invoke(Sub() If e.IsAvailable Then Me.TaskbarItemInfo.Overlay = CType(Resources("OkImage"), ImageSource) Else Me.TaskbarItemInfo.Overlay = CType(Resources("WarningImage"), ImageSource) End If End Sub) Catch ex As Exception MessageBox.Show(ex.Message) End Try End Sub End Class
Listing 2 – Listening for a change in network availability and setting the appropriate overlay icon
The following concepts need further clarification:
If you run the sample application, you can get different results depending on whether a network connection is available for your machine. You can test the application by running it and then unplugging your network cable (and shutting off any wireless connections). Figure 2 shows the default application’s icon, which appears if no changes in the connection are detected, whereas Figure 3 demonstrates how the overlay icon appears if no network connection is available.
Figure 2 – The application’s default icon
Figure 3 – An overlay icon communicates that no network connection is available
For a representation of the result appearing if a connection becomes available, please refer to Figure 1.
Using overlay icons you have an additional way of communicating information about the state of your application to your users, increasing and improving the user experience of your software. As you can see WPF 4 makes it very simple to work with overlay icons and Visual Studio 2010 improves the way you can add and manage images in the application resources.
About the author
Alessandro Del Sole is a Microsoft Visual Basic MVP and Team Member in the Italian “ Visual Basic Tips & Tricks” Community. He writes many Italian and English language community articles and books about .NET development and is the author of the book “ Visual Basic 2010 Unleashed”. He also enjoys writing freeware and open-source developer tools. You can visit Alessandro’s Italian language blog or his English language blog.