In this blog post I will discuss another interesting feature from Windows 7, that you can program via WPF 4 and VB/C# 2010, which is overlaying icons.
You might have noticed how the Windows 7's task bar is not just a place where application icons are grouped, but it it also the ideal place for notifying the user about the application state or about the state of a task executed by the application. Basically you can overlay a custom icon with transparency over the application icon in order to notify the user about a particular situation, without the need of replacing the original application icon. Last but not least, you can simply replace the overlaid icon with another one to show another kind of notification. Now the code :-)
After creating a WPF 4 project with Visual Studio 2010 Beta 2, the first requirement is getting a reference to the Task Bar as follows:
<Window.TaskbarItemInfo>
<TaskbarItemInfo/>
</Window.TaskbarItemInfo>
In the Window resources let's add images to be used for overlaying. You should prefer PNG images because they support transparency that is automatically recognized and applied by Windows 7 (as I will show later). Each image is represented by a DrawingImage object, as demonstrated in the following code:
<Window.Resources>
<!-- Define a DrawingImage resource
and assign an identifier-->
<DrawingImage x:Key="OverlayImage">
<!-- Populating the Drawing property...-->
<DrawingImage.Drawing>
<!--... with an ImageDrawing object
representing an image(icon-->
<ImageDrawing Rect="0,0,16,16"
ImageSource="/adsWpf4OverlayIcons;component/Images/EditTask.png" />
</DrawingImage.Drawing>
</DrawingImage>
</Window.Resources>
It's important to remember that you must assign the Rect property from the ImageDrawing object with the dimensions of the rectangle area that the overlaid icon will occupy. Just for demo purposes, let's implement a ComboBox where we can select the icon visualization mode:
<Grid>
<ComboBox Width="100" Height="30" Name="Combo1">
<ComboBoxItem Content="Normal" />
<ComboBoxItem Content="With overlay" />
</ComboBox>
</Grid>
At this point we can switch to the managed code. Basically the need is assigning the TaskBarItemInfo.Overlay property with an object of type ImageSource, which represents the icon to be used as the overlay, or with Nothing if we just want to restore the original state. When the application run, such property is obviously null. This is the sample code:
Private Sub Combo1_SelectionChanged(ByVal sender As System.Object,
ByVal e As System.Windows.Controls.
SelectionChangedEventArgs) Handles Combo1.SelectionChanged
'Checks for the selected item in the Combo
Select Case CType(Combo1.SelectedItem, ComboBoxItem).Content.ToString
Case Is = "Normal"
'Restore the original state
TaskbarItemInfo.Overlay = Nothing
Case Is = "With overlay"
'Overlay the icon
TaskbarItemInfo.Overlay = CType(Resources("OverlayImage"), ImageSource)
End Select
End Sub
The interesting thing is that at run-time you can set a different overlay icon depending on what you need to notify or communicate to the user, without the need of replacing the application icon. The conversion to ImageSource via CType is required because such the Resources is of type Object. Finally, let's see the result. This is the icon at normal state, which is what you typically see:
Next, the overlay icon where we can appreciate the fact that Windows 7 automatically applied transparency:
With this approach we can notify the user about the application state by simply overlaying the icon, taking advantage of the new WPF 4 programming features and integration with Windows 7.
You can download the code for this blog post from MSDN Code Gallery here.
Alessandro