Win 7: Taskbar and Thumbnail Enhancements

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.

Thumbnail toolbars



The first new feature is the ability to add a toolbar on the thumbnail that

contains buttons for users to click and have it interact with the main window.

You can see an example of this in the new Windows Media Player that adds buttons

allowing skipping, pausing and playing of content. To do this yourself you will

need to add a little bit of code. So let's try this out by using the Windows

Forms application we created last month and continue to build upon it.

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:

See the thumbnail toolbars that let you browse the images in the main window of the application.

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.

To check whether the entered value exists, use assertTextPresent command. Its presence is revealed in the log window.

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.