Win 7: Taskbar and Thumbnail Enhancements

BANGALORE, INDIA: Last month we checked the Windows API Code Pack for .NET ? an open source release from Microsoft that lets you add Windows 7 features into your .NET applications with ease. This month we continue from where we left and add a few more features into the mix. So let's jump right in for the code.

Customizing the thumbnail

One of the coolest new features of Windows 7 is the new interactive thumbnails shown for each running application. Not only can you perform an 'Aero Peek' into the window by simply hovering your pointer over a particular thumbnail, but you can also click it to switch, close the window, view tabbed or child windows and more. All these features are available to your application running on Windows 7 for 'free' ? that is, you don't need to add any code to get them. However, there are a number of other features that you can use to make your app look even better by simply adding a few lines of code.

Drop in a PictureBox control and 3 buttons onto the form. Set the text of the buttons to 'Load Images,' 'Previous' & 'Next.' Under the image load button add the following code:

ShellContainer pics = (ShellContainer) KnownFolders.PicturesLibrary;

GetImages(pics);

pictureBox1.Image = Image.FromFile(Images);

Create a new GetImages function that looks like this:

private void GetImages(ShellContainer pics)

{ foreach (ShellContainer SubFolder in pics.OfType())

foreach (ShellFile sf in SubFolder.OfType())

{ string ext =

System.IO.Path.GetExtension(sf.Path).ToLower();

if (ext == ".jpg" || ext == ".jpeg" || ext == ".png" || ext == ".bmp")

Images.Add(sf.Path); }}

All that this code does is to get all the images from your machines Picture library folder and display the first one in the PictureBox control. You can also wire up the previous and next buttons like this:

ImgNum--;

if (ImgNum == 0)

ImgNum = Images.Count - 1;

pictureBox1.Image =

Image.FromFile(Images);

ImgNum++;

if (ImgNum == Images.Count)

ImgNum = 0;

pictureBox1.Image =

Image.FromFile(Images);

Now you will have a working picture browser in your app. We can now go ahead and create the thumbnail buttons. To do this, add the following in the image load button's click handler.

ThumbnailToolbarButton buttonPrevious = new ThumbnailToolbarButton(Properties.Resources.prevArrow, "Previous Image");

ThumbnailToolbarButton buttonNext = new ThumbnailToolbarButton(Properties.Resources.nextArrow, "Next Image");

ThumbnailToolbarButton buttonFirst = new ThumbnailToolbarButton(Properties.Resources.first, "First Image");

ThumbnailToolbarButton buttonLast = new ThumbnailToolbarButton(Properties.Resources.last, "Last Image");

ThumbnailToolbarButton buttonClip = new ThumbnailToolbarButton(SystemIcons.Asterisk, "Toggle Image Clip");

buttonPrevious.Click += new EventHandler(buttonPrevious_Click);

buttonNext.Click += new EventHandler(buttonNext_Click);

buttonFirst.Click += new EventHandler(buttonFirst_Click);

buttonLast.Click += new EventHandler(buttonLast_Click);

buttonClip.Click += new EventHandler(buttonClip_Click);

Taskbar.ThumbnailToolbars.AddButtons(this.Handle, buttonFirst, buttonPrevious, buttonNext, buttonLast, buttonClip);

The above code adds 5 toolbar buttons-first, previous, next, last and clip and sets their event handlers. It then adds all of them to the thumbnail toolbar. You can now go and add the event handlers for each of them. For sake of brevity, I'm only showing one here ? for the previous button. All the others will use the similar approach to show the correct image in the main window's picture box.

ImgNum--;

if (ImgNum == 0)

ImgNum = Images.Count - 1;

pictureBox1.Image =

Image.FromFile(Images);

Run the application to view the thumbnail with a toolbar. You can click on any of the first four buttons to browse the images on both the main window as well as in the thumbnail.

Thumbnail Clipping

One thing you will notice when you run the above code is that the entire application is shown in the thumbnail, since by default, Windows 7 captures the entire client area of the window for it. However, you might want to show only a (more relevant) part of the window in the thumbnail. In this sample, you might want to only show the image that is shown in the picture box in the thumbnail without all the other trimmings around it. For this, you will need to use a feature called thumbnail clipping. Using this feature, you can decide on a relevant part of your application's main window that you wish to highlight in the thumbnail and get the bounding rectangle for that and display it. To do so in the code, add an event handler for the last thumbnail button we created for ?clip? and put the following code in it.

if (IsThumbnailClipped) Taskbar. TabbedThumbnail.SetThumbnailClip (this.Handle, this.ClientRectangle); else Taskbar.TabbedThumbnail.SetThumbnailClip(this.Handle, new Rectangle(pictureBox1.Location, pictureBox1.Size));

IsThumbnailClipped = !IsThumbnailClipped;

Make sure you declare a boolean variable called IsThumbnailClipped beforehand and set it to false. Now when you run the application, view the thumbnail and click the last button. Move your mouse away and then back to refresh the thubnail and what you will see is only the image in the picture box being shown in the thumbnail. You can again click the same thumbnail button and refresh it to see the entire client area (the default) show up again.

As you can see, customizing what your users see in the thumbnail of your application is quite easy. You can really enhance their producitivty in using your application by simply adding a few lines of code. Till next time, have fun.