How to Create Thumbnail Toolbars
You should not need to switch windows every time you interact with a Pinned site, especially if you are busy in another application. Fortunately,Windows 7 provides a way to host a special toolbar on the Thumbnail Preview window. The Thumbnail Toolbar is like a remote control for your application — it allows you to interact with a Pinned site without opening it first.
In this section, you learn how to extend the Channel9 Podcast Player sample application with a Thumbnail Toolbar that controls playback of audio tracks.
Note The Thumbnail Toolbar is not available with Pinned Sites in Internet Explorer 10 on the new Windows UI.
Description
The Channel9 Podcast Player sample application provides three commands on its Thumbnail Toolbar: Previous, Play, and Next. The Play button starts the currently selected audio track when you click it. Click the button again to Pause the track.
.png)
Note The Thumbnail Preview window appears when you hover the mouse pointer over the taskbar button.
Features
This sample demonstrates the following:
- Creating a Thumbnail Toolbar that has three command buttons
- Using the DOM event model to respond to clicks on the toolbar
- Toggling between Play and Pause button styles
- Dimming the Previous and Next buttons when at the beginning and end of the playlist
- Removing the toolbar when navigating to another webpage
Tasks
| Topic | Description |
|---|---|
This task explains how to create and display a basic Thumbnail Toolbar for a Pinned site. |
|
In the Creating a Thumbnail Toolbar for a Pinned Site task, you saw how to add buttons and display the Thumbnail Toolbar. In this task, you create an event handler that can respond to button clicks. |
|
This task describes how to change the state of a toolbar button, or hide buttons from view. |
|
In this task, you learn how to use a single toolbar button for two opposing but related commands, Play and Pause. |
|
This topic lists additional ideas to help you use Thumbnail Toolbars in your Pinned sites. |