Entries:
Comments:
Posts:

Loading User Information from Channel 9

Something went wrong getting user information from Channel 9

Latest Achievement:

Loading User Information from MSDN

Something went wrong getting user information from MSDN

Visual Studio Achievements

Latest Achievement:

Loading Visual Studio Achievements

Something went wrong getting the Visual Studio Achievements

Coding 4 Fun - Windows 7 Taskbar

Windows 7Looking 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.

Introduction

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:

Jump list for Windows Live Messenger

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.

Customizable Previews

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. 

Aero Peek preview for Windows Live Writer

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:

Visual Basic

Private windowsTaskbar As TaskbarManager = TaskbarManager.Instance

Visual C#

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:

Visual Basic

windowsTaskbar.TabbedThumbnail.SetThumbnailClip(Me.Handle, New Rectangle(groupBox2.Location, groupBox2.Size))

Visual C#

windowsTaskbar.TabbedThumbnail.SetThumbnailClip(this.Handle, new Rectangle(groupBox2.Location, groupBox2.Size));

 

Icon Overlays

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.):

Windows Live Messenger with overlay for offline status

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:

Visual Basic

windowsTaskbar.SetOverlayIcon(me.Handle, My.Resources.Green, "Green")

Visual C#

windowsTaskbar.SetOverlayIcon(this.Handle, TaskbarDemo.Properties.Resources.Green, "Green");

 

The same API call can also lets you clear an overlay:

Visual Basic

windowsTaskbar.SetOverlayIcon(Me.Handle, Nothing, Nothing)

Visual C#

windowsTaskbar.SetOverlayIcon(this.Handle, null, null);

 

Progress Indication

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:

Windows Explorer with file copy progress indication

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:

Visual Basic

comboBoxProgressState.DataSource = System.Enum.GetNames(GetType(TaskbarProgressBarState))

Visual C#

comboBoxProgressState.DataSource = Enum.GetNames(typeof(TaskbarProgressBarState));

 

When changes are made, we update the state using the SetProgressState call:

Visual Basic

windowsTaskbar.SetProgressState(CType(System.Enum.Parse(GetType(TaskbarProgressBarState), comboBoxProgressState.Text), TaskbarProgressBarState))

Visual C#

windowsTaskbar.SetProgressState((TaskbarProgressBarState)Enum.Parse(typeof(TaskbarProgressBarState), comboBoxProgressState.Text));

 

Then, we use a TrackerBar to select the current value which gets posted using the SetProgressState call:

Visual Basic

windowsTaskbar.SetProgressValue(trackProgress.Value, 100)

Visual C#

windowsTaskbar.SetProgressValue(trackProgress.Value, 100);

 

Toolbar Buttons

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:

Windows Media Player preview with toolbar buttons for media control

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:

Visual Basic

Private WithEvents buttonFirst As ThumbnailToolbarButton

Visual C#

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:

Visual Basic

buttonFirst = New ThumbnailToolbarButton(My.Resources.search, "Search")

Visual C#

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:

Visual Basic

Private Sub buttonFirst_Click(ByVal sender As Object, ByVal e As ThumbnailButtonClickedEventArgs) Handles buttonFirst.Click

Visual C#

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:

Visual Basic

windowsTaskbar.ThumbnailToolbars.AddButtons(Me.Handle, buttonFirst)

Visual C#

windowsTaskbar.ThumbnailToolbars.AddButtons(this.Handle, buttonFirst);

 

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.

Next Steps

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.

Conclusion

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!

Tags:

Follow the Discussion

  • Clint RutkasClint I'm a "developer"

    @jon889 example

    line 1

    line 2

    highlight line 1 until you see bit of line 2.

    Plus you can download the source Smiley

  • Clint RutkasClint I'm a "developer"

    @jon889 just keep on dragging to next line, this will be fixed when we go to the new version of C4F in the upcoming months

  • Jon889Jon889

    Well done, I every line of code is chopped off at the end(in both IE and FF), totally useless...

  • UnknownGuyUnknownGuy

    How do you go about adjusting the spacing of the icon's in the "quick launch" section, when "Always combined, hide labels" is selected in the taskbar properties? There is just too much space between the icons, and the registry "fix" that has been repeated everywhere just doesnt work well. (The icon width only adjusts when the program is open, then goes back to default when the program is closed)

  • Clint RutkasClint I'm a "developer"

    @UnknownGuy, off topic BUT if you use Small Icons, I honestly don't think on the RTM build it is too much.  With the pre-beta, I forced myself to adopt the new icon only mode for a week.  I couldn't go back.  Most apps you associate with an icon.

  • ViRUSViRUS

    Thanks for your answer. Very useful site! Smiley

  • Clint RutkasClint I'm a "developer"

    @ViRUS these are windows 7 APIs much like there are Vista APIs.  they can be coded into an application and still have the application work in XP but they won't be taken advantage of.  sorry.

  • ViRUSViRUS

    Is there any way of making an app that uses this run in Windows XP?

  • JanJan

    So when will the Jumplist tutorial be up then? (For VB.NET)

  • Clint RutkasClint I'm a "developer"

    @Jan, few weeks, we're working on it but other stuff needed to get finished first.

  • Clint RutkasClint I'm a "developer"

    @Jan PDC's five major projcets took a lot of our time and attention, the hope is before Christmas.

  • JanJan

    Will it be done before Christmas?

  • LeeLee

    Just came across this looking for a way to add progressbar and jumplist to taskbar. Thank you for posting this, exactly what I am looking for

  • Clint RutkasClint I'm a "developer"

    @Don yup, we provide full source code to do it, if you have any questions, use the "Email blog author" link at the top right.

    To download visual studio express, go to www.microsoft.com/express (the link is at the top of the article as well)

  • DonDon

    Is this something that I could attempt to do not having any experience with code?

  • Clint RutkasClint I'm a "developer"

    @DDjusD this examples has VB examples to do just that

  • DDjusDDDjusD

    Okay thanks but just to wonder can I do the taskbar icon progress bar and the toobar buttons in Visual Basic?

  • Clint RutkasClint I'm a "developer"

    @DDjusD we did a jumplist article that does have VB examples in it.

    blogs.msdn.com/.../9933039.aspx

  • DDjusDDDjusD

    I find this very informative but being me, I have no idea how to do it, I find things easier to understand and do with a video tutorial and was wondering if, maybe, you could make a video on how to do this step-by-step in Visual Basics 2008.

  • Clint RutkasClint I'm a "developer"

    @DDjusD I need a bit more information.  I know how to do this with WPF and the Media Element but I'm assuming your using a Windows Form application and the AxWMPLib control.

    msdn.microsoft.com/.../dd562388(v=VS.85).aspx

    SO to do what you're asking, I'd do the following.  It isn't pretty as I have limited knowledge on this control.

    First is creat a timer that you'll use to actually increment the task bar

    Second is you'll want to hook into three different events.  PositionChange, MediaChange, and PlayStateChange

    on Media Change, you'll do something like

    Dim changedItem As WMPLib.IWMPMedia3 = e.item

    and the changedItem.duration member will tell you the total duration.  On media change as well, you'll want to reset the current position and set a new max value.  On playstate change, if play, start the timer and start incrememting as long as it isn't past the max value.

    On media position change, readjust the position on the task bar progress bar as well.

    This should do what you need.

  • DDjusDDDjusD

    Okay but they weren't entirely clear to me. I have another question on making a a Task Bar progress bar, how would I get it to use the max value of the windows media player plug-in?

  • Clint RutkasClint I'm a "developer"

    @DDjusD this is getting away from the topic of the article, hit the "Contact blog author" link in upper right and I'll help you out there.

  • DDjusDDDjusD

    Okay I am making headway and have got the button working but there is an issue, "Value of type 'System.Drawing.Bitmap' cannot be converted to 'System.Drawing.Icon'.". How would I convert it the a "System.Drawing.Icon" and add it to my resources?

  • Clint RutkasClint I'm a "developer"

    @Technic Squad they code for VB is on codeplex along with c# by following the link at the top of the page labeled "Source Code" Smiley

  • Technic SquadTechnic Squad

    Mind if you give a sample project file for Visual Basic 2010?

Remove this comment

Remove this thread

close

Comments Closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums,
or Contact Us and let us know.