Making your app shine on Windows 7: Tabbed Thumb Nails

This post is one in a series of posts covering the Windows API Code Pack. The code pack provides a managed code framework for using the new native Windows 7 features.

In this post we’ll examine how to implement thumbnail previews for a tabbed application UI. We’ll add to each thumbnail preview some buttons to control our application directly from the preview thumbnail. You need to be using .Net 3.5 SP1.

I used a simple C# Winforms project to test this all out. You’ll need to add five references:

WindowsBase

PresentationCore

PresentationFramework

Microsoft.WindowsAPICodePack

Microsoft.WindowsAPICodePack.Shell

The code pack framework provides Integration to the Windows 7 thumbnail preview via the TaskbarManager class. The class contains four methods and five properties. The methods mainly deal with the overlay of icons onto the taskbar icon and the progress bar overlay that I’m sure you are already familiar with in Windows 7.

The properties are the interesting bits for using thumbnail previews. The first property is a a boolean flag – IsPlatformSupported - to indicate if the current platform your app is running on can support thumbnails. Then you have Instance and ApplicationId. Instance represents the Windows Taskbar, and ApplicationId is the unique identifier for your application.

Then you have the two most useful properties; the TabbedThumbnail and ThumbnailToolbars. These get the manager class for each type allowing you to add and update the thumbnail previews associated with your application and the toolbars that may also exist for each of the previews for your application. Yes each preview could have a different toolbar for each tabbed thumbnail.

To add support to your application for thumbnail previews all you have to do is populate and maintain these two collections as necessary for your application. Because the code pack framework is provided as a static library doing this is very simple.

I have a tabcontrol in my Winforms app that allows me to add new tabs containing new instances of the WebBrowser control. In my add new tab button click event I run the following code:

Code Snippet

1. TabPage newTab = new TabPage("Tab " + tabControl1.TabPages.Count + 1);
2. tabControl1.TabPages.Add(newTab);
3. WebBrowser wb = new WebBrowser();
4. wb.DocumentTitleChanged += new EventHandler(wb_DocumentTitleChanged);
5. wb.DocumentCompleted += new WebBrowserDocumentCompletedEventHandler(wb_DocumentCompleted);
6. wb.Navigated += new WebBrowserNavigatedEventHandler(wb_Navigated);
7. wb.Dock = DockStyle.Fill;
8. wb.Navigate(textBox1.Text);
9. newTab.Controls.Add(wb);
10.  
11. // Add thumbnail toolbar buttons
12. TaskbarManager.Instance.ThumbnailToolbars.AddButtons(newTab.Handle, thumbButtonBack, thumbButtonForward, thumbButtonRefresh);
13.  
14. // Add a new preview
15. TabbedThumbnail preview = new TabbedThumbnail(this.Handle, newTab.Handle);
16.  
17. // Event handlers for this preview
18. preview.TabbedThumbnailActivated += new EventHandler<TabbedThumbnailEventArgs>(preview_TabbedThumbnailActivated);
19. preview.TabbedThumbnailClosed += new EventHandler<TabbedThumbnailEventArgs>(preview_TabbedThumbnailClosed);
20. preview.TabbedThumbnailMaximized += new EventHandler<TabbedThumbnailEventArgs>(preview_TabbedThumbnailMaximized);
21. preview.TabbedThumbnailMinimized += new EventHandler<TabbedThumbnailEventArgs>(preview_TabbedThumbnailMinimized);
22.  
23. TaskbarManager.Instance.TabbedThumbnail.AddThumbnailPreview(preview);
24.  
25. // Select the tab in the application UI as well as taskbar tabbed thumbnail list
26. tabControl1.SelectedTab = newTab;
27. TaskbarManager.Instance.TabbedThumbnail.SetActiveTab(tabControl1.SelectedTab);

As you can see. I add a new tabpage, create a new instance of a WebBrowser control. Tie some events to it – these have meaningful code in them ensuring the correct thumbnail behaviour occurs on the Taskbar – and add the browser control to the tabpage.

Then I add the ThumbnailToolbars buttons. These have already been defined at class level.

Code Snippet

1.  
2.       private ThumbnailToolbarButton thumbButtonBack;
3.       private ThumbnailToolbarButton thumbButtonForward;
4.       private ThumbnailToolbarButton thumbButtonRefresh;

Then a new instance of a TabbedThumbnail is created naming the Windows handle and the new tabpage handle. Following this the event handlers for the thumbnail toolbar buttons are attached.

Our TabbedThumbnail definition is then added to the Taskbar instance’s collection of TabbedThumbnails. And finally, we ensure the new tabpage is the current tabpage in focus on the tabcontrol and on the taskbar.

The rest of the code in the application ensures that when tabpages are changed in the tabcontrol the preview thumbnails are synchronised. And likewise, when preview thumbnails are selected or hovered over the correct tabpage is brought to focus.

The end result lookis like this:

There are all sorts of additional goodies in the TabbedThumbnail class properties that allow you to clip the bitmap and effective zoom into it as well as provide tooltips etc.

Adding thumbnail previews to your applications seems a small effort for achieving one of the most visible enhancements in the Windows 7 UI. The code pack API makes it easy to do.

My complete application can be downloaded from here. It is a simplified version of the code pack Thumbnail sample.