Skip to content

Latest commit

 

History

History
70 lines (50 loc) · 3.79 KB

display-select-pdf-thumbnails-dotnet-maui.md

File metadata and controls

70 lines (50 loc) · 3.79 KB
title description type page_title slug tags res_type
Displaying Thumbnails of Multiple PDFs in a Single View with .NET MAUI
Learn how to generate and display thumbnails for the first page of multiple PDF files in a single list box view, and open the selected PDF in a PDFViewer for .NET MAUI.
how-to
How to Display and Select PDF Thumbnails in a .NET MAUI Application
display-select-pdf-thumbnails-dotnet-maui
pdfviewer, .net maui, pdf, thumbnails, list box, pdf processing
kb

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:

    <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.

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

See Also