Skip to main content

Programming the Task Bar in Windows 7 with WPF 4, Part Three – Overlay Icons

By Alessandro Del Sole – Microsoft MVP

Download the code

Read the entire series of articles here: Programming the Windows 7 Task Bar with WPF 4

Introduction

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.

Creating the sample project

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.

Declaring icon resources

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:

  1. Overlay icons must be of size 16 x 16 pixels, thus the Rect property value must be exactly as shown in Listing 1.
  2. Overlay icons should always be in PNG format because this allows transparency.

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.

Assigning overlay icons in managed code

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:

  1. Add an Event Handler to the System.Net.NetworkInformation.NetworkChange.NetworkAvailabilityChanged event, which is raised when the IP address state changes.
  2. Retrieve the appropriate overlay icon from the resources.
  3. Assign these icons to the task bar depending on the network availability.

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:

  • The constructor adds an event handler to the System.Net.NetworkingInformation.NetworkAvailabilityChanged event which is raised when the IP address information changes, like when the computer connects or disconnects from the Internet.
  • Instead of referring to a separate method, AddHandler uses a statement lambda which acts like an anonymous delegate. Statement lambdas are a new feature of Visual Basic 2010. Of course, you can still write a separate event handler that you pass via an AddressOf instruction, it’s just this is a nicer way of writing cleaner-looking code.
  • The code makes a call to the Dispatcher.Invoke method which receives a statement lambda as an argument which does the actual work, checking for the network availability. The Dispatcher marshals the work to the UI thread which owns the task bar UI objects.
  • The code assigns the appropriate overlay icon according to the network connection state. If you want to restore the overlay icon to the original state once, simply assign TaskbarItemInfo.Overlay to Nothing.

Running the sample application

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.

Conclusion

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.