In the Windows 7 taskbar, a 48x48 bitmap icon can get an overlay of a 16x16 bitmap. This is often used to display something like a number or a colored square to indicate the state of the application.
<Window.TaskbarItemInfo>
<TaskbarItemInfo Overlay="{Binding Overlay}"/>
</Window.TaskbarItemInfo>
You can use a XAML resource to draw teh overlay and grab that from a ViewModel if you store it as a DrawingBrush in the app.XAML or in a resource dictionary.
public DrawingImage Overlay
{
get
{
var visual = App.Current.Resources["GreenVisual"] as DrawingBrush;
return visual==null? null: new rawingImage(visual.Drawing);
}
}
Like this example from the MetroTwit app:
This is all great, but there is not room for much in the 16x16 bitmap space.
I wanted to control the entire48x48 icon dynamically in order to display a number of “items” and a surrounding pie chart symbolizing visually the state of the “items” dividing them into groups of Green, Yellow and Red. Like this:
To accomplish this, I decided to bind the actual Icon of the Window to a property on the ViewModel instead of using the Overlay.
Icon="{Binding Icon}"
The ViewModel returns an ImageSource created in a separate WPF User Control project that contains a UserControl rendered in a RenderTargetBitmap. This way I can use XAML to create the visual and I can reference this project from a ViewModel that is not necessarily a WPF project (if the ViewModel is in a Class Library).
public ImageSource Icon
{
get { return _imageGenerator.GetImageSource(Green, Yellow, Red); }
}
The Image generator instantiates the user control in memory and renders it on the fly using a PiePiece class derived from Shape to draw the 3 pie-pieces.
The demo code is done with no code-behind except hooking up the viewmodel to the window, and also shows a few other icon features like the ProgressState and ProgressValue of the TaskBarItemInfo to get the nice “download file” effect in the taskbar.
Download source code: AnimatedTaskBar.zip (117.25 kb)
Tags: Windows 7, mvvm, wpf, xaml