How to Display/generate PDF Pages as Thumbnails in Winforms?

In the WinForms PDF Viewer, there is no built-in feature to display PDF pages as thumbnail images. However, as an alternative, you can generate thumbnails by converting the PDF pages to images using the ExportAsImage API of the LoadedDocument property in the PdfViewer. These images can then be added to a FlowLayout panel. By clicking on a thumbnail, users can navigate to the corresponding PDF page.

Steps to display the PDF pages as thumbnails in the PDF

Step 1:
Declare the following properties in the Form.cs

1. Declare a property to adjust the width of the TableLayoutPanel based on the number of pages.

int thumbnailZoomfactor = 4; 

2. Declare a TableLayoutPanel to hold the thumbnail images and the PDFViewerControl in the form.

 TableLayoutPanel tableLayoutPanel; 

3. Declare a FlowLayoutPanel variable to hold the thumbnail images.

FlowLayoutPanel thumbnailLayoutPanel; 

4. Define a property of type PdfViewerControl to enable the use of PDFViewer in all methods within the form.

PdfViewerControl pdfViewerControl; 

Step 2:

• Hook the Form_Loaded event to the forms in the constructor

this.Load += Form1_Load; 

Step 3:

• Within the Form_Loaded event, initialize the tableLayoutPanel and configure it to display a thumbnail and the PdViewer side by side in the Forms window. Set the DockStyle property to Fill, and remove any predefined Column and Row styles to maximize available space. Specify the column count as 2 and the row count as 1. Assign ColumnStyles with SizeType.Percent, setting the first column’s width to 16F for thumbnails and the second column’s width to 86F for the PDF. Add a single row with a SizeType of Percent and a width of 100F.

private void Form1_Load(object sender, EventArgs e)
{
  //Initialize a new TableLayoutPanel and configure the  TableLayoutPanel to hold two columns and one row
tableLayoutPanel = new TableLayoutPanel();
tableLayoutPanel.Dock = DockStyle.Fill;
tableLayoutPanel.ColumnStyles.Clear();
tableLayoutPanel.ColumnCount = 2;
tableLayoutPanel.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, 16F));
tableLayoutPanel.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, 84F));

tableLayoutPanel.RowStyles.Clear();
tableLayoutPanel.RowCount = 1;
tableLayoutPanel.RowStyles.Add(new RowStyle(SizeType.Percent, 100F));
} 

Step 4:

• Create a FlowLayoutPanel type object and assign its properties for smooth scrolling. Set DockStyle to Fill to fill the first column. Set AutoScroll to True to enable smooth scrolling of the images. Set FlowDirection to TopDown for scrolling from top to bottom of the design and set WrapContents to False to place the pictures vertically instead of wrapping.

//Create a scrollable FlowlayoutPanel for the thumbnails  
thumbnailLayoutPanel = new FlowLayoutPanel
{
   Dock = DockStyle.Fill,
   AutoScroll = true,
   FlowDirection = FlowDirection.TopDown,
   WrapContents = false,
}; 

Step 5:

• Add the created FlowLayout to the first column of the tableLayoutPanel

tableLayoutPanel1.Controls.Add(thumbnailLayoutPanel, 0, 0); 

Step 6:

• Set up the PdfViewerControl and configure its DockStyle property to ‘Fill’ so it fully occupies the second column. Add the PDFViewer in column 1 of the tableLayoutPanel.

pdfViewerControl = new PdfViewerControl();
pdfViewerControl.Dock = DockStyle.Fill;
//Add the PDFViewer to the second column of the TableLayoutPanel 
tableLayoutPanel.Controls.Add(pdfViewerControl,1,0);

Step 7:

• Open the PDF file in the PDFViewer and attach the Document Loaded event to the PDFViewer to populate the thumbnail images in the FlowLayoutPanel. Ensure the tableLayoutPanel is included in the form controls.

// Load the PDF file.
pdfViewerControl.Load(filePath);
pdfViewerControl.DocumentLoaded += PdfViewerControl_DocumentLoaded;
this.Controls.Add(tableLayoutPanel);
this.WindowState = FormWindowState.Maximized;

Step 8:

• In the PdfViewer_DocumentLoadedEvent, remove all controls from the thumbnailLayout panel and call the ExportAsImage method. This method contains the primary logic for converting PDF pages into images and adding these images as thumbnails to the FlowLayout panel.

private void PdfViewerControl1_DocumentLoaded(object sender, EventArgs args)
{
    thumbnailLayoutPanel.Controls.Clear();
    ExportAsImage();
} 

Step 9:

• Within the ExportAsImage method, begin by determining the width and height of the thumbnail panel. Next, modify the column’s width according to the page number. If the page number exceeds 4, allocate space solely for the scrollbar.

//Calculate height and width for the thumbnail panel
float height = pdfViewerControl.LoadedDocument.Pages[0].Size.Height / thumbnailZoomfactor;
float width = pdfViewerControl.LoadedDocument.Pages[0].Size.Width / thumbnailZoomfactor;
this.tableLayoutPanel.ColumnStyles[0].SizeType = SizeType.Absolute;
if(pdfViewerControl.LoadedDocument.Pages.Count > 4)
{
    this.tableLayoutPanel.ColumnStyles[0].Width = width + 30;
}
else
{
    this.tableLayoutPanel.ColumnStyles[0].Width = width + 5;
} 

Step 10:
The following outlines the primary logic for integrating PDF pages as thumbnail images into the FlowLayoutPanel.

• Add each PDF page as an image to the thumbnail panel by iterating through every page in the document. For each iteration, create a PictureBox.
• Use the ExportAsImage method available in the LoadedDocument property of the PdfViewer to convert document pages into images based on their computed dimensions. Perform this operation asynchronously to prevent interference with the UI rendering of other elements. Set the generated image as the PictureBox’s Image and call pictureBox.update() to complete any pending image redraw tasks. Adjust the width and height of the PictureBox to match the calculated dimensions and make it visible. Next, invoke pictureBox.Refresh to repaint the image with the updated dimensions. Attach the PictureMouseUp event handler to each PictureBox to facilitate navigation to the corresponding page. Finally, add the configured PictureBox to the FlowLayoutPanel.

for (int i = 0; i < pdfViewerControl.LoadedDocument.Pages.Count; i++)
{
   PictureBox picture = new PictureBox();
   //Convert the PDF page to an image
   Bitmap image = new Bitmap(await Task.Run(() => pdfViewerControl.LoadedDocument.ExportAsImage(i)), new Size((int)width, (int)height));
   //Set the exported image to the picture control
   picture.Image = image;
   picture.Update();
   picture.Height = (int)height;
   picture.Width = (int)width;
   picture.Visible = true;
   picture.Refresh();
   picture.MouseUp += Picture_MouseUp;
   //Add the picture control to the thumbnailPanel
   thumbnailLayoutPanel.Controls.Add(picture);
}

• On the MouseUp event for each image, navigate to the corresponding page by casting the sender as a PictureBox. Retrieve the index of the clicked image using the IndexOf property and utilize the GoToPageAndIndex API to perform the navigation.

private void Picture_MouseUp(object sender, MouseEventArgs e)
{
    PictureBox pictureBox = (PictureBox)sender;
    //Get the index of the page
    int index = thumbnailLayoutPanel.Controls.IndexOf(pictureBox);
    //Navigate to the specified page
    pdfViewerControl1.GoToPageAtIndex(index + 1);

} 

The complete working sample to display the PDF pages as thumbnail images can be downloaded from GitHub.

Conclusion
I hope you enjoyed learning about how to display/generate PDF pages as thumbnails in WinForms PDF Viewer.

You can refer to our WinForms PDF Viewer page to learn about its other groundbreaking features and documentation, as well as how to quickly get started with configuration specifications.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarification, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!