Create thumbnail pane for PDF pages with horizontal scrolling in WPF.

The WPF PDF Viewer control has a built-in thumbnail pane which helps to view a miniature preview of the PDF pages while navigating between pages. This pane supports only vertical scrolling. However, we can create a thumbnail pane with horizontal scrolling by using the PdfViewerControl’s ExportAsImage functionality which converts the PDF pages to images. The GotoPage method can be used to navigate to the corresponding page when you click a thumbnail.

Steps to create thumbnail panel that scrolls horizontally

Step 1: Convert PDF pages to thumbnail images

• Define the namespaces that are required to convert PDF pages to images.

C#

using System.Drawing;
using System.Windows.Media.Imaging;

• Use the ExportAsImage functionality to export thumbnails with the custom size (say 200 x 400) as shown in the following code snippet.

C#

//Export pdf pages as images using the PdfViewer ExportAsImage method with a custom size of 200 X 400
BitmapSource[] Pages = pdfViewerControl.ExportAsImage(0, pdfViewerControl.PageCount - 1, new SizeF(200, 400), true);

Step 2: Display the thumbnails in a grid horizontally

• Create the grid (to place thumbnail images) and place it inside the scroll viewer as described in the following code snippet.

MainWindow.xaml

<Grid Name=”ParentGrid">
<ScrollViewer  Grid.Row="0" HorizontalScrollBarVisibility="Visible">
<Grid  Name="ThumbnailGrid"  />
</ScrollViewer>
<PdfViewer:PdfViewerControl Name="pdfViewerControl" Grid.Row="1"/>
        </Grid>

• Create image controls and set the Source to the thumbnail images. Then, add images in the grid column wise (to display horizontally) as described in the following code snippet.

C#

//Create image control from the exported Pdf page bitmap source 
System.Windows.Controls.Image image = new System.Windows.Controls.Image();
image.Source = Pages[i];
//Create a column in the thumbnail grid and insert the image into it
ColumnDefinition column = new ColumnDefinition();
ThumbnailGrid.ColumnDefinitions.Add(column);
Grid.SetColumn(image, i);
       ThumbnailGrid.Children.Add(image);

Step 3: Click the thumbnails and navigate to the required page. 

• Wire the mouse up event to the thumbnails to detect when a thumbnail is clicked.

C#

image.MouseUp += Image_MouseUp;

• Using the thumbnail index, call the GoToPage functionality of the PDF Viewer to navigate to the required page.

C#

private void Image_MouseUp(object sender, MouseButtonEventArgs e)
{
System.Windows.Controls.Image img = sender as System.Windows.Controls.Image;
if (img != null)
{
//Get the pageindex from the thumbnail grid based on the selected image
int pageIndex = (int)img.GetValue(Grid.ColumnProperty);
//Navigate to the particular page
pdfViewerControl.GotoPage(pageIndex + 1);
       } 
       }

View sample in GitHub

See also

• how-to-convert-pdf-to-image-in-wpf-pdfviewer
• how-to-view-the-pdf-pages-as-thumbnail-view-in-wpf-pdfviewer