Looking to take advantage of some new Windows 7 goodness? Learn how to work with some of the great new taskbar features to create a more streamlined user interface.
Windows 7 brings with it a large number of new features that will be available to developers from day one. These are really nice additions that will make applications more natural to work with. One of the new areas of enhancements is the taskbar. The taskbar has always been a pretty simple way to see what's running and switch between tasks. Moving from XP to Vista, we got cool previews, but that's about it. With Windows 7, now we can drag-and-drop minimized app icons to change their order, we can pin apps there even if they aren't running (replacing Quick Launch functionality). You can also right-click the icons to restore or close the window. Better still, many apps give you additional information upon right-click, such as Recent lists, or actions like changing your Live Messenger status:
Image 1: Jump list for Windows Live Messenger
In this article, I would like to dig into the following notable new features:
- Customizable preview
- Icon overlays
- Progress indication
- Toolbar buttons
None of these features are very difficult to use due to the Windows API Code Pack. This download is a free (but unsupported) package from Microsoft on the MSDN Code Gallery. Version 1.0 was released on August 6, after a number of earlier pre-releases. Since many of the new features are specific to Windows 7, they are not in the .NET Base Class Libraries. This package exposes them for .NET so you don't have to do any of your own interop.
This sample is written for Windows Forms, but it works equally well with WPF. These four features are easy to integrate into any application that you write.
To start with, we'll dig into customizable previews. This refers to the ability to change the Aero Peek preview that shows up in the task bar when you hover over a minimized application.
Image 2: Aero Peek preview for Windows Live Writer
If you create any basic application and launch it (F5), the taskbar preview will be an exact copy of the application's main window. In fact, Windows gets this from the DWM, or Desktop Window Manager. This is cached already so it makes sense to use it here. Overriding it though is fairly easy. In a photo editing application, it might be better to have the preview show the current image by itself -- without all of the toolbars and menus. You can also choose to take the cached thumbnail from the DWM and just crop a portion of it - like to remove a ribbon UI from the top.
The TaskbarManager class is responsible for exposing progress state, thumbnail, overlay icons, and other similar properties. These functions would otherwise be scattered across various Win32 API calls, but the Windows API Code Pack simplifies this immensely. The first step is to create a reference to it and obtain the static reference:
Private windowsTaskbar As TaskbarManager = TaskbarManager.Instance
private TaskbarManager windowsTaskbar = TaskbarManager.Instance;
You'll use this reference throughout your application for any taskbar manipulation. In order to clip your preview, just specify the window handle and the region. An easy way is to specify the Location and Size properties of a control. In this sample, it's a GroupBox, but in another application it might make more sense to clip to a PictureBox or other control:
windowsTaskbar.TabbedThumbnail.SetThumbnailClip(Me.Handle, New Rectangle(groupBox2.Location, groupBox2.Size))
windowsTaskbar.TabbedThumbnail.SetThumbnailClip(this.Handle, new Rectangle(groupBox2.Location, groupBox2.Size));
Icon overlays allow you to display a visual representation of your program's state. This has been possible for some time using icons in the notification area (battery level low, anti-virus disabled), but until now it hasn't been possible as part of your taskbar icon. Now you can choose any icon (from an ICO file or extracted from an executable or DLL) and the taskbar manager will display it directly in the task bar overlaid on your application icon. This is used in Windows Live Messenger to show your login status (offline, busy, available, etc.):
Image 3: Windows Live Messenger with overlay for offline status
This is great for providing information at a glance. Especially as more and more users are hiding their cluttered notification tray icons and wouldn't see the indicator otherwise.
The beautiful thing is that the TaskbarManager class allows you to set this with one line of code:
windowsTaskbar.SetOverlayIcon(me.Handle, My.Resources.Green, "Green")
windowsTaskbar.SetOverlayIcon(this.Handle, TaskbarDemo.Properties.Resources.Green, "Green");
The same API call can also lets you clear an overlay:
windowsTaskbar.SetOverlayIcon(Me.Handle, Nothing, Nothing)
windowsTaskbar.SetOverlayIcon(this.Handle, null, null);
As your application works through something, such as file copying, downloading, or processing a data set, you might be tempted to display a progress bar in a popup dialog. If you're really diabolical you might even make this a modal dialog! In our brave new world of Windows 7 though, we no longer need to subject our users to this. Instead of cluttering up the screen, we can reflect the current progress of any single operation by displaying a progress bar behind our application icon, such as Windows Explorer during a file copy:
Image 4: Windows Explorer with file copy progress indication
It's faint, but you should be able to see the bar at around the 15-20% point behind the folder. There are actually a number of states that you can instruct the taskbar to display, then you just provide progress value updates as needed.
In this sample application, we display the various TaskbarProgressBarState enumerated values in a ComboBox:
comboBoxProgressState.DataSource = System.Enum.GetNames(GetType(TaskbarProgressBarState))
comboBoxProgressState.DataSource = Enum.GetNames(typeof(TaskbarProgressBarState));
When changes are made, we update the state using the SetProgressState call:
windowsTaskbar.SetProgressState(CType(System.Enum.Parse(GetType(TaskbarProgressBarState), comboBoxProgressState.Text), TaskbarProgressBarState))
Then, we use a TrackerBar to select the current value which gets posted using the SetProgressState call:
One of the new features that really has me excited is the ability to add buttons to the preview image. This is a very underutilized feature so far, though it's visible in Windows Media Player:
Image 5: Windows Media Player preview with toolbar buttons for media control
Notice the Pause, Previous, and Next buttons under the Aero Peek. Those are fully-functional. The great thing is that you can add them to your application easily, and bind event handlers to them like any other buttons. You don't get design-time support like for forms and menus, but you really don't need it.
Start by decaring a ThumbnailToolbarButton:
Private WithEvents buttonFirst As ThumbnailToolbarButton
private ThumbnailToolbarButton buttonFirst;
You can set the image, a label (shown on hover), enabled or not, and other common Button properties. Here I will create the button and point it to an image stored as a resource, and a label:
buttonFirst = New ThumbnailToolbarButton(My.Resources.search, "Search")
buttonFirst = new ThumbnailToolbarButton(Properties.Resources.first, "First Image");
Next, I need to attach an event handler to it. In Visual Basic, since buttonFirst was declared using WithEvents, you can use the Handles keyword in the declaration of the event handler. In C#, you can type "buttonFirst.Click +=" and then press the TAB key twice. This will fill out the rest of the line *and* create an event handler stub:
Private Sub buttonFirst_Click(ByVal sender As Object, ByVal e As ThumbnailButtonClickedEventArgs) Handles buttonFirst.Click
buttonFirst.Click += new EventHandler<ThumbnailButtonClickedEventArgs>(buttonFirst_Click);
Finally, add the buttons using the TaskbarManager instance. The AddButtons call takes a list of parameters, so you can just add other buttons by separating them with commas:
Just fill in something for your event handler to do (a simple MessageBox in the sample application), and you're done! It's super-easy and it adds a new dimension of interactivity with your application. This could replace menu commands in a notification icon, or simply present common actions. It doesn't make sense in every application, but it's easy to add when you need it.
The next step is to evaluate your own applications to see what makes to add. While custom previews and toolbar buttons don't make sense for every application, progress indication and custom overlays can often be a good fit. Of course, remember that if you implement any of this, it won't be visible in Windows Vista or earlier. Be sure to have a secondary way to access these same functions. Toolbar buttons and overlays can be accomplished in the notification icon, and progress can always be displayed in a popup dialog as a fallback.
Windows 7 makes it easier to create very user-friendly applications. You may be able to augment existing applications to take advantage of these features, or at least keep them in mind when designing new applications. Pretty quickly, these will be considered common place and you'll want your application to play well on the desktop.
If you haven't yet, download Visual Studio 2008 Express Edition (Visual Basic or Visual C#), and then download the Windows API Code Pack so you can get started! Of course you'll need at least the Windows 7 RC build in order to actually test any of this, but the final release is in just a few months. Get ready for it now!