C#, WPF – Windows 7 Thumbnail Toolbar

During learning to develop myself a gadget for Windows 7, I would like to use some features of Windows 7 for my application. One of these features is enabling thumbnail of our application on toolbar as following

You can see in image above that I have a custom beautiful thumbnail with 4 buttons to navigate through the image gallery. To apply this feature in our application, I need a library called Microsoft API Code Pack http://code.msdn.microsoft.com/WindowsAPICodePack . In download package you can find a lot of examples relevant to many interesting features of Windows 7. The example below is extracted from this package but I made some modifications so that it works better.

1. Create a WPF application, add a StackPanel and 2 children: Image and ListBox control. The list box item template was also changed to contain an Image and a TextBlock. The TextBlock is set by the name of the image.

2. Add reference to Microsoft.WindowsAPICodePack.dll and Microsoft.WindowsAPICodePack.Shell.dll.
3. Test if I am running on Windows 7

public Window1()
{
	if (!TaskbarManager.IsPlatformSupported)
	{
		MessageBox.Show("This demo runs only on Windows 7");
		Application.Current.Shutdown();
	}
	InitializeComponent();
}

4. Add images to list box through data binding. The data was taken from ViewModel.

<ListBox x:Name="ImageList" ItemsSource="{Binding AllImages}" ItemTemplate="{DynamicResource ItemImageTemplate}" ItemsPanel="{DynamicResource PanelImageTemplate}" Height="167" />

5. Add 4 thumbnail toolbar button when window loads. These buttons will be used for navigating our gallery in thumbnail as shown in image above.

private void Window_Loaded(object sender, System.Windows.RoutedEventArgs e)
{
	// TODO: Add event handler implementation here.
	m_btnToolbarFist = new ThumbnailToolbarButton(Properties.Resources.FirstImage, "First Image");
	m_btnToolbarFist.Enabled = true;
	m_btnToolbarFist.Click += new EventHandler<ThumbnailButtonClickedEventArgs>(m_btnToolbarFist_Click);

	m_btnToolbarPrev = new ThumbnailToolbarButton(Properties.Resources.PreviousImage, "Previous Image");
	m_btnToolbarPrev.Enabled = true;
	m_btnToolbarPrev.Click += new EventHandler<ThumbnailButtonClickedEventArgs>(m_btnToolbarPrev_Click);

	m_btnToolbarNext = new ThumbnailToolbarButton(Properties.Resources.NextImage, "Next Image");
	m_btnToolbarNext.Enabled = true;
	m_btnToolbarNext.Click += new EventHandler<ThumbnailButtonClickedEventArgs>(m_btnToolbarNext_Click);

	m_btnToolbarLast = new ThumbnailToolbarButton(Properties.Resources.LastImage, "Last Image");
	m_btnToolbarLast.Enabled = true;
	m_btnToolbarLast.Click += new EventHandler<ThumbnailButtonClickedEventArgs>(m_btnToolbarLast_Click);

	TaskbarManager.Instance.ThumbnailToolbars.AddButtons(new WindowInteropHelper(this).Handle, new ThumbnailToolbarButton[] { m_btnToolbarFist, m_btnToolbarPrev, m_btnToolbarNext, m_btnToolbarLast });
}

6. Add some code lines for navigating images in list. For example, the code handle to navigate to the last image in list.

void m_btnToolbarLast_Click(object sender, ThumbnailButtonClickedEventArgs e)
{
	ImageList.SelectedIndex = ImageList.Items.Count - 1;
	ImageList.Focus();
	if (ImageList.SelectedItem != null)
		ImageList.ScrollIntoView(ImageList.SelectedItem);
}

7. I would like to use the current selected image as our thumbnail. Therefore let’s take a snapshot of Image control and set it to taskbar through SetThumbnailcClip function.

void PictureBox_LayoutUpdated(object sender, EventArgs e)
{
	Vector vtPict = VisualTreeHelper.GetOffset(PictureBox);
	TaskbarManager.Instance.TabbedThumbnail.SetThumbnailClip(new WindowInteropHelper(this).Handle, new System.Drawing.Rectangle((int)vtPict.X, (int)vtPict.Y, (int)PictureBox.RenderSize.Width, (int)PictureBox.RenderSize.Height));
}

What I am still concerning is try to build the program exactly according to MVVM pattern. The complete source code you can download “WPF Win7 Thumbnail Demo“