How To Add Thumbnails, Navigation and Printing

The following step-by-step tutorial demonstrates how to add additional document viewer controls to your application using Visual Studio 2010. The download link for the complete source code of this tutorial is available at the bottom of this page.

This tutorial extends the How To Create My First Document Viewer tutorial. Complete that tutorial first before starting.

1) Open the project created in the How To Create My First Document Viewer tutorial in Visual Studio 2010.

2) The ThumbnailListBox renders page thumbnails and is bindable to a DocumentDataSource. Modify the MainPage.xaml like so;

<Grid x:Name="LayoutRoot" Background="White">
    <ColumnDefinition Width="140" />
    <ColumnDefinition />
    <RowDefinition />
    <RowDefinition Height="Auto"/>

  <doc:DocumentDataSource x:Name="DataSource" LoadError="DataSource_LoadError" />

  <doc:ThumbnailListBox x:Name="Thumbnails" DocumentDataSource="{Binding ElementName=DataSource}" />

  <doc:DocumentViewer x:Name="Viewer" Grid.Column="2" DocumentDataSource="{Binding ElementName=DataSource}" />

The ThumbnailListBox.DocumentDataSource binding ensures the thumbnail list is automatically populated once a package reader is assigned to the _DocumentDataSource.

3) Add page navigation by using the _PageNavigator control. Add the following XAML:

<StackPanel Grid.Row="1" Grid.ColumnSpan="2" HorizontalAlignment="Center" Orientation="Horizontal">
  <doc:PageNavigator x:Name="PageNavigator" Margin="4"
                     PageCount="{Binding PageCount, ElementName=Viewer}"
                     PageIndex="{Binding PageIndex, ElementName=Viewer, Mode=TwoWay}"/>

The PageIndex and PageCount properties of the PageNavigator are connected to the DocumentViewer instance. The PageIndex binding is two way; edit the selected page in the navigator will bring the page into view in the document viewer. And the other way around; scrolling the document viewer automatically updates the page navigator.

When you compile and run the application, the page navigator automatically displays the selected page and number of pages.

4) Connect the thumbnail list to the PageNavigator as well. This ensures that the selected thumbnail becomes the current page and that page is also brought into view in the DocumentViewer.

Modify the ThumbnailListBox instance so that it looks like the XAML below;

<doc:ThumbnailListBox x:Name="Thumbnails" DocumentDataSource="{Binding ElementName=DataSource}"
                      PageIndex="{Binding PageIndex, Mode=TwoWay, ElementName=PageNavigator}"/>

5) Printing in Document Toolkit is provided by the DocumentPrinter control. The control consumes a DocumentDataSource just like the DocumentViewer and ThumbnailListBox. Add the following XAML;

<doc:DocumentPrinter x:Name="Printer" DocumentDataSource="{Binding ElementName=DataSource}"
                     PrintError="Printer_PrintError" />

6) Handle printer errors by implementing the PrintError event in code. The below snippet simply displays an error messagebox.

private void Printer_PrintError(object sender, ErrorEventArgs e)

7) Add a button to the UI that initiates the printing operation. The DocumentPrinter exposes print command for this purpose. Add the following print button in XAML next to the page navigator:

<Button Content="Print..." Command="{Binding PrintCommand, ElementName=Printer}" Margin="4" />

If you build and run the application, clicking the Print button will display the print dialog.

Tutorial source code:

Last edited Jul 4, 2011 at 7:24 PM by kozw, version 10


No comments yet.