Displaying Thumbnails of Multiple PDFs in a Single View with .NET MAUI

Updated over 6 months ago

Environment

Version	Product	Author
10.0.0	Telerik UI for .NET MAUI PDF Viewer	Dobrinka Yordanova

Description

I need a way to display the first page of multiple PDF files as thumbnails. Then display the thumbnails in a list. When a thumbnail is clicked, the respective full PDF document should open in a separate PDF Viewer.

This knowledge base article also answers the following questions:

• How can I display thumbnails of PDF files in a list using .NET MAUI?
• How do I open a PDF in a PDFViewer when its thumbnail is clicked in .NET MAUI?
• How to generate and use thumbnails of PDF pages in a .NET MAUI application?

Solution

To achieve this, follow the steps in the Generating and Displaying PDF Thumbnails and Loading PDF Documents in a PDF Viewer sections.

Generating and Displaying PDF Thumbnails

1. Use the Telerik PDF Processing library (RadPdfProcessing) to convert the first page of each PDF file into an image thumbnail. Refer to this blog post for guidance: Turn PDF Pages Into Images With PdfProcessing.

2. Iterate through each PDF file, extract the first page, and save it as an image. Manage the storage of these images appropriately on the device.

3. Create a collection that contains the image paths and the PDF file names. Bind this collection to a list control in your .NET MAUI application. Use an <Image/> element to display each thumbnail and a <Label> to show the document name.

   3.1. Define the RadCollectionView in XAML:

   xaml

   <telerik:RadCollectionView ItemsSource="{Binding ListOfDocuments}" 
                              ItemTapped="RadCollectionView_ItemTapped">
       <telerik:RadCollectionView.ItemTemplate>
           <DataTemplate>
               <VerticalStackLayout>
                   <Image Source="{Binding YourImage}" />
                   <Label Text="{Binding YourPdfDocumentName}" />
               </VerticalStackLayout>
           </DataTemplate>
       </telerik:RadCollectionView.ItemTemplate>
   </telerik:RadCollectionView>

   3.2. Implement the ItemTapped event to handle thumbnail selection and navigate to a new page where the PDF Viewer is defined. Pass the selected PDF document to the PdfViewer.Source property.

Loading PDF Documents in a PDF Viewer

Use the PDF Viewer for .NET MAUI to display the selected PDF document. The PDF Viewer has a Source property, which you should set to the selected PDF document during navigation.

csharp

// In the navigation logic from the list box to the PDFViewer page
pdfViewer.Source = selectedPdfDocumentPath;

See Also

• RadPdfProcessing Overview
• Displaying Documents in PDF Viewer for .NET MAUI
• Turn PDF Pages Into Images With PdfProcessing Blog Post