How to display PDF pages as thumbnails in WinForms PDF Viewer?
The WinForms PDF Viewer does not support displaying PDF pages as thumbnail. However, as a workaround, the PDF document pages can be viewed as thumbnail by exporting them as images using the PdfLoadedDocument.ExportAsImage() API. Clicking on the thumbnail image will navigate to the corresponding page in PdfViewerControl.
Refer to the following code snippet.
C#.
In this sample, we have used the TableLayoutPanel to view the PDF pages as thumbnail.
Load the PDF document into PDF Viewer using the Load API and hook the DocumentLoaded event of PDF Viewer to export the PDF pages as images.
int thumbnailZoomFactor=4;
private void Form1_Load(object sender, System.EventArgs e)
{
//Loads the document in PdfViewerControl
pdfViewerControl1.Load(@"..\..\Data\HTTP Succinctly.pdf");
pdfViewerControl1.DocumentLoaded += PdfViewerControl1_DocumentLoaded;
}
The DocumentLoaded event will be triggered every time when loading new PDF document in PDF Viewer. So, perform ExportAsImage functionality in the DocumentLoaded event for converting the PDF pages of newly loaded PDF document into thumbnail images.
/// <summary>
/// Event triggered once the document has been loaded
/// </summary>
private void PdfViewerControl1_DocumentLoaded(object sender, EventArgs args)
{
thumbnailLayout.Controls.Clear();
thumbnailLayout.RowStyles.Clear();
thumbnailLayout.RowCount = 0;
ExportAsImage();
}
Convert the PDF pages as images using the ExportAsImage API of PDF Viewer and set the converted bitmap image to the Picture control. Finally, add the picture controls to the TableLayoutPanel to view the PDF as thumbnail images. Please find the UG documentation link for ExportAsImage API.
///<Summary>
/// Convert the PDF pages into images
/// </summary>
private async void ExportAsImage()
{
//Get the pages count
int count = pdfViewerControl1.LoadedDocument.Pages.Count;
thumbnailLayout.ColumnCount = 1;
//Set the page count as rows count
thumbnailLayout.RowCount = count;
//Sets the width and height to the thumbnail image
float height = pdfViewerControl1.LoadedDocument.Pages[0].Size.Height / thumbnailZoomFactor;
float width = pdfViewerControl1.LoadedDocument.Pages[0].Size.Width / thumbnailZoomFactor;
this.tableLayoutPanel1.ColumnStyles[0].SizeType = SizeType.Absolute;
if (pdfViewerControl1.LoadedDocument.Pages.Count > 4)
this.tableLayoutPanel1.ColumnStyles[0].Width = width + 30;
else
this.tableLayoutPanel1.ColumnStyles[0].Width = width + 5;
for (int i = 0; i < pdfViewerControl1.LoadedDocument.Pages.Count/*10*/; i++)
{
PictureBox picture = new PictureBox();
//Convert the PDF page as image
Bitmap image = new Bitmap(await Task.Run(() => pdfViewerControl1.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 tablelayoutpanel
thumbnailLayout.Controls.Add(picture, 0, i);
}
}
Use the GoToPageAtIndex API of PDF Viewer to navigate to the specified page while clicking the thumbnail image. Please find the UG documentation link for GotToPageAtIndex API.
/// <summary>
/// Event triggered once click the thumbnail images
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void Picture_MouseUp(object sender, MouseEventArgs e)
{
PictureBox pictureBox = (PictureBox)sender;
//Get the index of the page
int index = thumbnailLayout.GetRow(pictureBox);
//Navigate to the specified page
pdfViewerControl1.GoToPageAtIndex(index+1);
}
Sample link:
https://www.syncfusion.com/downloads/support/directtrac/general/ze/SampleWF1656308284
Please find the output of thumbnail view sample.
Conclusion
I hope you enjoyed learning how to display/generate PDF pages as thumbnails.
You can refer to our WinForms PdfViewer feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our WinForms PdfViewer example to understand how to create and manipulate data.
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 clarifications, 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!
