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.

Thumbnail preview window with toolbar

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

TopicDescription

Creating a Thumbnail Toolbar for a Pinned Site

This task explains how to create and display a basic Thumbnail Toolbar for a Pinned site.

Responding to Clicks on the Thumbnail Toolbar

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.

Disabling and Hiding Buttons on a Thumbnail Toolbar

This task describes how to change the state of a toolbar button, or hide buttons from view.

Toggling Button State on a Thumbnail Toolbar

In this task, you learn how to use a single toolbar button for two opposing but related commands, Play and Pause.

Further Ideas: Using Thumbnail Toolbars

This topic lists additional ideas to help you use Thumbnail Toolbars in your Pinned sites.

 

Related topics

Pinned Sites Developer Documentation

 

 

Show:
© 2014 Microsoft