by October 6, 2009 0 comments



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.

Direct Hit!

Applies To: .NET developers
USP: Further the look and feel of your
apps through the new features
Primary Link:http://msdn.microsoft.com
Keywords: Windows 7

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[ImgNum]);

Create a new GetImages function that looks like this:

private void GetImages(ShellContainer pics)
{ foreach (ShellContainer SubFolder in pics.OfType<ShellContainer>())
foreach (ShellFile sf in SubFolder.OfType<ShellFile>())
{ 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]);
ImgNum++;
if (ImgNum == Images.Count)
ImgNum = 0;
pictureBox1.Image =
Image.FromFile(Images[ImgNum]);

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<ThumbnailButtonClickedEventArgs>(buttonPrevious_Click);
buttonNext.Click += new EventHandler<ThumbnailButtonClickedEventArgs>(buttonNext_Click);
buttonFirst.Click += new EventHandler<ThumbnailButtonClickedEventArgs>(buttonFirst_Click);
buttonLast.Click += new EventHandler<ThumbnailButtonClickedEventArgs>(buttonLast_Click);
buttonClip.Click += new EventHandler<ThumbnailButtonClickedEventArgs>(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[ImgNum]);

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.

No Comments so far

Jump into a conversation

No Comments Yet!

You can be the one to start a conversation.

<