WPF–Windows 7 Task Bar Part Three–Overlay Icons

March 1, 2011

3 min read

This is the third part in a four part series on how to implement various features of the Windows 7 Task Bar which are features that have seemly been forgotten. This series will attempt to resurrect the Windows 7 taskbar and cover the following:

Thumbnail Buttons
Jump Lists
Overlay Icons
Progress bar icons

In this post I will concentrate on implementing Overlay Icons. What are Overlay Icons? Overlay Icons are simply a way for you to communicate the state of your application to a user. They are icons that sit directly on top (overlay) of your application’s icon that provide information about the current state of the application without having replace the entire application icon.

Outlook 2010 provides Overlay Icons to notify you of new e-mail items:

As you can see, an email image is overlaying the Outlook icon notifying you that you have new email to read.

Adding this functionality is probably the easiest Windows 7 Task Bar feature you can write. We will continue to build on the example used from the previous posts. The first thing we need to do is define our image resources that will be used to overlay our applications icon. We will just add them to our main window.

<Window.Resources>

<DrawingImage x:Key=”PlayImage”>

<DrawingImage.Drawing>

<ImageDrawing Rect=”0,0,16,16″ ImageSource=”/WpfWin7TaskBar;component/Images/play16.png” />

</DrawingImage.Drawing>

</DrawingImage>

<DrawingImage x:Key=”PauseImage”>

<DrawingImage.Drawing>

<ImageDrawing Rect=”0,0,16,16″ ImageSource=”/WpfWin7TaskBar;component/Images/pause16.png” />

</DrawingImage.Drawing>

</DrawingImage>

</Window.Resources>

Overlay icons are special, and with that label comes some rules you must follow when creating your image resources.

Overlay icons must be declared as a DrawingImage
Overlay icons must be of size 16×16 and the Rect must be defined exactly as it is above
Overlay icons should always be in the PNG format to support transparency.

Okay, let’s move on. Now that you have defined your icons as a resource lets actually use them in our example. Lets handle adding a Play icon whenever a video is playing. So let’s create a method that first plays the video then sets the overlay icon:

private void PerformPlay()

{

_mediaPlayer.Play();

TaskbarItemInfo.Overlay = (ImageSource)FindResource(“PlayImage”);

}

As you can see, it is extremely easy to set the overlay icon. Note: You must have an instance of the TaskBarItemInfo object to do this. If you have not defined one in your XAML simply add this code:

<Window.TaskbarItemInfo>

<TaskbarItemInfo/>

</Window.TaskbarItemInfo>

So how do you get rid of the icon once you have added it? Simple! Let’s take a look at the Stop method:

private void StopCommand_Executed(object sender, ExecutedRoutedEventArgs e)

{

_mediaPlayer.Stop();

TaskbarItemInfo.Overlay = null;

}

You just set the Overlay to null and any icon that is overlayed will be removed. That is all there is too it. It I worth mentioning that you could move you images to the App.xaml so your entire application could use them. If you implement any of the Windows 7 Task Bar features, implement this one. It adds a great user experience and is extremely easy to implement in your application.

Download the Source