View PDF Documents with PdfViewer for Xamarin.Forms

Viewing PDF documents in your mobile app without the need to install a third-party solution has never been easier. Now you can use the Telerik UI for Xamarin PdfViewer control within your application. PdfViewer control comes with a number of features for viewing and manipulating PDF files. 

We have received many requests from our customers to create a component that will provide them with the best user experience when working with PDF documents, and we were happy to introduce a control for this in the official R1 2019 release of Telerik UI for Xamarin. Since that time we have focused on improving it further based on the feedback received from our users. A new set of features was introduced in February with the release of the Service Pack. 

In this blog post you will learn more about the PdfViewer control for Xamarin.Forms. You will also learn about the new features coming with it and how to use them.

Features

• Visualize pdf documents - Display PDF documents with text, images, shapes (geometrics), different colors (solid, linear and radial gradients), ordered and bullet lists, and more
• Various document source options - You could load the PDF document from a stream, from a file added as embedded resource or a file located on the device, etc.
• Zooming Functionality with min and max zoom lever support
• Single Page and Continuous Scrolling Support  for displaying one page at a time or displaying all pages continuously in the viewer
• Commands Support for Zooming, Navigating from page to page, FitToWidth or Toggling the Layout mode
• Toolbar Support with pre-defined UI toolbar items including all PdfViewer commands

Let’s get a deeper insight into the features listed above.

Various Document Source Options

PdfViewer enables you to visualize PDF documents through its Source property. The documents could be loaded from various document sources like:

• FileDocument
• Uri
• ByteArray
• Stream
• FixedDocument

For example, lets take a look at the FileDocumetSource, FixedDocumentSource and UriDocumentSource:

The FileDocumentSouce has become part of the PdfViewer features set with the Telerik UI for Xamarin R1 2019 Service Pack. It allows you to load a PDF document from a file stored on the device. For example:

<telerikpdfviewer:radpdfviewer x:name="pdfViewer" source="{Binding FilePath}"></telerikpdfviewer:radpdfviewer>

where FilePath is a string property in the ViewModel:

string FilePath {get;}

When using the FileDocumentSource, please make sure that you have granted the app all the permissions needed before the resources are used. Otherwise, an exception will be raised.

Load a PDF document as embedded resources using FixedDocumentSource:

<telerikpdfviewer:radpdfviewer x:name="pdfViewer"></telerikpdfviewer:radpdfviewer>

Telerik.Windows.Documents.Fixed.FormatProviders.Pdf.PdfFormatProvider provider = new Telerik.Windows.Documents.Fixed.FormatProviders.Pdf.PdfFormatProvider();
Assembly assembly = typeof(KeyFeatures).Assembly;
string fileName = assembly.GetManifestResourceNames().FirstOrDefault(n => n.Contains("pdfName.pdf"));
using (Stream stream = assembly.GetManifestResourceStream(fileName))
{
   RadFixedDocument document = provider.Import(stream);
   this.pdfViewer.Source = new FixedDocumentSource(document);
}

Uri uri = new Uri("https://....../pdfName.pdf");
this.pdfViewer.Source = uri;

Commands Support

PdfViewer exposes the following commands

• ZoomInCommand
• ZoomOutCommand
• FitToWidthCommand
• NavigateToNextPageCommand
• NavigateToPreviousPageCommand
• NavigateToPageCommand
• ToggleLayoutModeCommand

For more information how to use them check our help article.

When a new document is loaded, it is automatically adjusted to fit the current width for the best viewing experience. It means that the FitToWidth command is executed when the document is loaded. 

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition />
    </Grid.RowDefinitions>
    <telerikPdfViewer:RadPdfViewerToolbar PdfViewer="{Binding Source={x:Reference pdfViewer}}">
        <telerikPdfViewer:ZoomInToolbarItem />
        <telerikPdfViewer:ZoomOutToolbarItem />
        <telerikPdfViewer:NavigateToNextPageToolbarItem/>
        <telerikPdfViewer:NavigateToPreviousPageToolbarItem/>
        <telerikPdfViewer:NavigateToPageToolbarItem/>
        <telerikPdfViewer:FitToWidthToolbarItem/>
        <telerikPdfViewer:ToggleLayoutModeToolbarItem/>
    </telerikPdfViewer:RadPdfViewerToolbar>
    <telerikPdfViewer:RadPdfViewer x:Name="pdfViewer" Grid.Row="1"/>
</Grid>