Using Windows 7 taskbar features in WPF [pure XAML]

Since Windows 7 was released, there were several ways to interact with the new Taskbar – the developer could either use the API directly or could use a wrapper (the most reliable of those would be the Windows API Code Pack for .NET Framework). For a .NET developer, especially for the unexperienced, using the API directly sometimes can be a bit painful. Using a wrapper, from the other side, creates a secondary dependency, therefore requiring yet another set of libraries to be bundled with the application – this can sometimes affect the functionality when it comes to updating the existing bundle.

With .NET 4.0, the Windows 7 Taskbar capabilities are introduced natively, removing the need in secondary dependencies. This is only available in WPF, so if you are using WinForms, you will either have to work directly with the API or use the Code Pack.

To start, in your WPF application, in the XAML markup for the window, insert the Window.TaskbarItemInfo element:

<Window x:Class="WPF_Test.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="300" Width="300"
        Loaded="Window_Loaded">
    
    <Window.TaskbarItemInfo>
    </Window.TaskbarItemInfo>

    <Grid x:Name="Grid1">
        
    </Grid>
</Window>

This is the primary element that defines the properties of the taskbar elements used by the application. At this moment, you can access the Taskbar progress bar, overlay icons, taskbar buttons and thumbnails.

Progress bar

Starting with the progress bar, let’s create a TaskbarItemInfo element inside Window.TaskbarItemInfo  and define the ProgressValue and ProgressState properties:

<Window.TaskbarItemInfo>
    <TaskbarItemInfo ProgressValue="1" ProgressState="Normal"></TaskbarItemInfo>
</Window.TaskbarItemInfo>

The important part to remember here is that the ProgressValue property ranges from 0 to 1, therefore if bound to a ProgressBar control (or any control that operates on a different value range), the proper conversion should be made, and a secondary property is recommended in this case. A value bigger than 1 will cause the Taskbar progress bar to be completely filled.

The ProgressState property defines the look of the progress bar. There are a few of them:

Normal – the normal, green static progress bar
Paused – a yellow static progress bar
Error – a red static progress bar
Indeterminate – a green moving progress indicator, the value is ignored in this case
None – the progress is hidden

Overlay icons

But the progress bar is not the only functionality available. Let’s take a look at overlay icons. I am going to assume that you have an icon added to the project as a resource. In my experimental project I am specifically using a PNG icon, referencing it directly from the location on the disk. However, you can change this to a local application resource.

<Window.Resources>
    <DrawingImage x:Key="Overlay">
        <DrawingImage.Drawing>
            <ImageDrawing Rect="0 0 16 16" ImageSource="D:\Dev Resources\Icons\PNG\edit-clear.png"></ImageDrawing>
        </DrawingImage.Drawing>
    </DrawingImage>
</Window.Resources>

The Rect property sets the rectangle that will contain the image and it should have the 16x16 format, otherwise the icon will not be displayed.

To actually set the overlay, in the previously mentioned Window.TaskbarItemInfo element, a TaskbarItemInfo element is introduced with the Overlay property set:

<Window.TaskbarItemInfo>
    <TaskbarItemInfo Overlay="{StaticResource Overlay}"></TaskbarItemInfo>
</Window.TaskbarItemInfo>

As you see, I am referencing the resource as a StaticResource. Once you run the application, the overlay icon is displayed alongside with the original application icon.

Taskbar buttons

The next part is taskbar buttons. These are simply buttons placed inside the thumbnail for your window. To initialize those, a TaskbarItemInfo.ThumbButtonInfos element is placed inside the parent TaskbarItemInfo element. Then I am instantiating a collection of ThumbButtonInfo elements via ThumbButtonInfoCollection.
There, I am able to add specific ThumbButtonElements for each button. Here is an example:

<Window.TaskbarItemInfo>
    <TaskbarItemInfo>
        <TaskbarItemInfo.ThumbButtonInfos>
            <ThumbButtonInfoCollection>
                <ThumbButtonInfo ImageSource="{StaticResource Overlay}"
                                 Click="ThumbButtonInfo_Click"></ThumbButtonInfo>
            </ThumbButtonInfoCollection>
        </TaskbarItemInfo.ThumbButtonInfos>
    </TaskbarItemInfo>
</Window.TaskbarItemInfo>

Here, I am creating just one button but with reference to the existing static resource (used for the overlay icon). And although the maximum size for icons used in taskbar buttons is 24x24, I recommend using the 16x16 format – personally, I find it more accurately fitting in the button.

The ThumbButtonInfo_Click event handler acts just like any other event handler in the code behind, so you can set the behavior by yourself.

Taskbar thumbnails

Last but not least, the taskbar thumbnails can also be easily implemented in pure XAML. All I need to do is place this inside the Window.TaskbarItemInfo element:

<TaskbarItemInfo ThumbnailClipMargin="60 60 60 60"></TaskbarItemInfo>

The margin values are defined as left, top, right, bottom. Therefore, by the property I set, I am indicating that in the thumbnail, I want to display the part of the window that is 60px from left, 60px from top, 60px from right and 60px from the bottom. If you want to highlight a control, you can easily copy the margins for that control into the ThumbnailClipMargin property.