Articles in this section
Category / Section

How to view the PDF pages as thumbnail view in WPF PDFViewer?

2 mins read

WPF Pdf ViewerControl does not support thumbnail view. However, as a workaround, the PDF document pages can be viewed as thumbnail by exporting the pages of the PDF document as images using the PdfLoadedDocument.ExportAsImage() API. Clicking the thumbnail image will navigate to the corresponding page in PdfViewerControl.

Refer to the following code snippet.
C#

int thumbnailZoomFactor = 4;
private void Window_Loaded(object sender, RoutedEventArgs e)
{
  //Loads the document in PdfViewerControl
  PdfViewer.Load(@"..\..\Data\HTTP Succinctly.pdf");
  ThumbnailGrid.Background = new SolidColorBrush(System.Windows.Media.Color.FromRgb(((int)(((byte)(237)))), ((int)(((byte)(237)))), ((int)(((byte)(237))))));
  PdfViewer.DocumentLoaded += PdfViewer_DocumentLoaded;
            
}
 
/// <summary>
/// Event triggered once the document has been loaded
/// </summary>
/// <param name="sender"></param>
/// <param name="args"></param>
private void PdfViewer_DocumentLoaded(object sender, EventArgs args)
{
  ThumbnailGrid.RowDefinitions.Clear();            
  ExportAsImage();
}
 
/// <summary>
/// Convert the PDF pages into images
/// </summary>
private async void ExportAsImage()
{
  int count = PdfViewer.LoadedDocument.Pages.Count;
  float height = PdfViewer.LoadedDocument.Pages[0].Size.Height / thumbnailZoomFactor;
  float width = PdfViewer.LoadedDocument.Pages[0].Size.Width / thumbnailZoomFactor;
  ParentGrid.ColumnDefinitions[0].Width = new GridLength(width + 30);
  for (int i=0;i< PdfViewer.LoadedDocument.Pages.Count;i++)
  {
     RowDefinition row = new RowDefinition();
     row.Height = new GridLength(height+5);
     ThumbnailGrid.RowDefinitions.Add(row);
     Bitmap bitMap = new Bitmap(await Task.Run(() => PdfViewer.LoadedDocument.ExportAsImage(i)), (int)width,(int)height);
     var memory = new MemoryStream();
     bitMap.Save(memory, ImageFormat.Png);
     memory.Position = 0;
     BitmapImage bitmapImage=new BitmapImage();
     bitmapImage.BeginInit();
     bitmapImage.StreamSource = memory;
     bitmapImage.CacheOption = BitmapCacheOption.OnLoad;
     bitmapImage.EndInit();
     bitmapImage.Freeze();
     System.Windows.Controls.Image image = new System.Windows.Controls.Image()
     {
       Source = bitmapImage
     };
     image.Height = height;
     image.Width = width;
     image.MouseUp += Image_MouseUp;
     Grid.SetRow(image, i);
     ThumbnailGrid.Children.Add(image);
               
  }            
}
 
/// <summary>
/// Event triggered once click the thumbnail images
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void Image_MouseUp(object sender, MouseButtonEventArgs e)
{
  System.Windows.Controls.Image img = sender as System.Windows.Controls.Image;
  int pageNumber = (int)img.GetValue(Grid.RowProperty);
  PdfViewer.GoToPageAtIndex(pageNumber+1);
} 

XAML

<Window x:Class="SampleWPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:SampleWPF"
        mc:Ignorable="d"
        xmlns:Syncfusion="clr-namespace:Syncfusion.Windows.PdfViewer;assembly=Syncfusion.PdfViewer.WPF"
        Title="MainWindow" Height="350" Width="525" Loaded="Window_Loaded">
    <Grid x:Name="ParentGrid"  >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="103*"></ColumnDefinition>
            <ColumnDefinition Width="414*"></ColumnDefinition>
 
        </Grid.ColumnDefinitions>
        <Syncfusion:PdfViewerControl Grid.Column="1" x:Name="PdfViewer" />
        <ScrollViewer  Grid.Column="0">
             <Grid  x:Name="ThumbnailGrid" ScrollViewer.VerticalScrollBarVisibility="Visible" >        
             </Grid>
          </ScrollViewer>
    </Grid>
</Window>

View sample in GitHub.


Conclusion

I hope you enjoyed learning about how to view the PDF pages as thumbnail view in WPF PDFViewer.

You can refer to our WPF PDF Viewer feature tour page to know about its other groundbreaking feature representations. You can also explore our WPF PDF Viewer documentation 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 forumsDirect-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments
Please sign in to leave a comment
Access denied
Access denied