Visual Basic: Creating a Thumbnail Toolbar for Your Windows Taskbar

Introduction

Ever come across something funky and not know what it is called? Well, I have, many a time. Luckily, I am blessed with a thirsty curiosity! It is a blessing and a curse…

You may call me behind the times or just a bit slow, but I only recently discovered what the taskbar buttons (since Windows 7) are called and why these buttons have more abilities than older Taskbar buttons. Yes, I am talking about Thumbnail Taskbar Toolbar buttons. A mouthful, but very fun to play with.

Today, we will create our own Thumbnail Taskbar Toolbar for our application.

Example: Skype
Figure 1: Example: Skype

Our Project

The aim of our little project is to create a Thumbnail Taskbar Toolbar for our application. This toolbar will have the following features:

  • Icon overlaying: Dynamically change the application’s icon on the taskbar.
  • Extra buttons: These buttons (similar to what’s shown in Figure 1) will each have their own icons as well as their own respective functions.

Design

Ensure that your Project has five forms, and design them as follows:

Form 1

Add a Combobox Dropdown to your Form and add the following items to it:

  • Yield
  • Wait
  • Go

    Form 1
    Figure 2: Form 1

Form 2

Add a checkbox to Form 2.

Form 2
Figure 3: Form 2

Design Forms 3, 4, and 5 according to the following figures:

Form 3
Figure 4: Form 3

Form 4
Figure 5: Form 4

Form 5
Figure 6: Form 5

Code

Before you can start coding, you have to keep in mind that a Thumbnail taskbar button is not a common option in your Visual Studio IDE. You have to add it. How? Well, you have to download the Windows 7 API coding pack. Yes, I also find it strange, seeing the fact that we are on Windows 10 already, that we still have to do this, but that is unfortunately how it works. You can download the Windows API code pack here.

Install it as you would any other program. Once installed, add the following Namespace to your Form1’s code:

Imports Microsoft.WindowsAPICodePack.Taskbar

Add the following code to declare a few ThumbnailToolbarButton items:

   Private WithEvents ttbButton1 As ThumbnailToolbarButton
   Private WithEvents ttbButton2 As ThumbnailToolbarButton
   Private WithEvents ttbButton3 As ThumbnailToolbarButton
   Private WithEvents ttbButton4 As ThumbnailToolbarButton

These are declared WithEvents so that you will be able to manipulate each button’s events. Add the following code for the Form_Load event:

   Private Sub Form1_Load(ByVal sender As System.Object, _
      ByVal e As System.EventArgs) Handles MyBase.Load

      If Not TaskbarManager.IsPlatformSupported Then

         MessageBox.Show("Overlay Icon is not supported _
            by your OS!")

         Application.Exit()

      End If

      ttbButton1 = New ThumbnailToolbarButton _
         (My.Resources.Camera, "Camera")
      ttbButton2 = New ThumbnailToolbarButton _
         (My.Resources.Arrow, "Green Arrow")
      ttbButton3 = New ThumbnailToolbarButton _
         (My.Resources.Speedometer, "Speedometer")
      ttbButton4 = New ThumbnailToolbarButton _
         (My.Resources.Box, "Box")

      TaskbarManager.Instance.ThumbnailToolbars _
         .AddButtons(Me.Handle, ttbButton1, _
         ttbButton2, ttbButton3, ttbButton4)

   End Sub

The first section of code determines whether or not the ThumbnailTaskbar options are supported. Any version of Windows prior to Windows 7 might not support it; in case of this, an error message gets displayed and the application exits.

The next segment of code creates the ThumbnailToolbarButton objects with a caption and an image for each.

Lastly, I added each created button to my taskbar via the help of the TaskbarManager object. Now, let’s give each of these buttons something to do by adding the following code:

   Private Sub button1_Click(sender As System.Object, e As _
      ThumbnailButtonClickedEventArgs) Handles ttbButton1.Click

      Form2.Show()

   End Sub

   Private Sub button2_Click(sender As System.Object, e As _
      ThumbnailButtonClickedEventArgs) Handles ttbButton2.Click

      Form3.Show()

   End Sub

   Private Sub button3_Click(sender As System.Object, e As _
      ThumbnailButtonClickedEventArgs) Handles ttbButton3.Click

      Form4.Show()

   End Sub

   Private Sub button4_Click(sender As System.Object, e As _
      ThumbnailButtonClickedEventArgs) Handles ttbButton4.Click

      Form5.Show()

   End Sub

Above, I have created a click event for each of the Toolbarbutton items. Each ToolbarButton item launches a different form.

Adding Images to Your Project’s Resources

You can add images to your project in the following way:

  1. Click Project.
  2. Click ProjectName Properties.
  3. Select Resources.
  4. Select the type of Resource—in this case, Icon.
  5. Add each Image and name it accordingly.

You can use any .ico file. If you do not know where to find icons, you can navigate to Icon archive for some free icons.

After I have added my Resources, my screen looks like Figure 7:

All my Resources
Figure 7: All my Resources

If you were to run your application now, it would resemble Figure 8, and you could click each button to launch different forms, as shown in Figure 8.

Our ThumbnailTaskbarButtons in action
Figure 8: Our ThumbnailTaskbarButtons in action

To add some spice to your application, add the following code:

   Private Sub cbRobot_SelectedIndexChanged(ByVal sender As _
      System.Object, ByVal e As System.EventArgs) Handles _
      cbRobot.SelectedIndexChanged

      ShowOverlay()

   End Sub

   Private Sub ShowOverlay()

      Dim icIcon As Icon = Nothing

      Select Case cbRobot.SelectedIndex

         Case 0

            icIcon = My.Resources.Wait

         Case 1

            icIcon = My.Resources.Yield

         Case 2

            icIcon = My.Resources.Go

      End Select

      TaskbarManager.Instance.SetOverlayIcon(icIcon, _
         cbRobot.SelectedIndex.ToString())

   End Sub

This code enables you to add an icon overlay. An icon overlay is an icon on top of another icon. What the preceding code does is change the Application’s icon in the Taskbar to the option selected via the dropdown box. Figures 9 through 11 shows this feature in action.

Yield
Figure 9: Yield

Wait
Figure 10: Wait

Go
Figure 11: Go

Conclusion

Adding a Thumbnail taskbar toolbar can enable your apps to give the end user more options whilst using the app. It is a very handy little addition that you can add to your apps with little effort

Hannes DuPreez
Hannes DuPreez
Ockert J. du Preez is a passionate coder and always willing to learn. He has written hundreds of developer articles over the years detailing his programming quests and adventures. He has written the following books: Visual Studio 2019 In-Depth (BpB Publications) JavaScript for Gurus (BpB Publications) He was the Technical Editor for Professional C++, 5th Edition (Wiley) He was a Microsoft Most Valuable Professional for .NET (2008–2017).

More by Author

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Must Read