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.
Figure 1: Example: Skype
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.
Ensure that your Project has five forms, and design them as follows:
Add a Combobox Dropdown to your Form and add the following items to it:
Figure 2: Form 1
Add a checkbox to Form 2.
Figure 3: Form 2
Design Forms 3, 4, and 5 according to the following figures:
Figure 4: Form 3
Figure 5: Form 4
Figure 6: Form 5
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:
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:
- Click Project.
- Click ProjectName Properties.
- Select Resources.
- Select the type of Resource—in this case, Icon.
- 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:
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.
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.
Figure 9: Yield
Figure 10: Wait
Figure 11: Go
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