XamarinT Dark_870x220

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.


PdfViewer Overview

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);
}
Visualizing PDF documents from Uri:
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. 

PdfToolbar Support with Built-In Commands Operations

All the commands that PdfViewer provides are included in the PdfToolbar. This feature allows you and the end user of the application to use the commands much more easily with the predefined UI. You only need to decide which ones you need in the application depending on the requirements you have.

All you need to do is to choose the commands and include them as a PdfViewerToolbar items. For example:

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

The image below shows what the PdfViewer Toolbar looks like:

PdfToolbar

Have we caught your interest with the new PdfViewer control and its features? You can find various demos of the new control in our SDK Samples Browser and a First Look example with  PdfToolbar in the Telerik UI for Xamarin Demo application.

The control is still in beta and we are actively working on adding new features and making it official for the upcoming Telerik UI for Xamarin R2 2019 Official Release. So, any feedback on it is highly appreciated, as always. If you have any ideas for features to add to the control’s features set, do not hesitate to share this information with us on our Telerik UI for Xamarin Feedback portal.

If this is the first time you're hearing about Telerik UI for Xamarin, you can find more information about it on our website or dive right into a free 30-day trial today.


Dobrinka Yordanova
About the Author

Dobrinka Yordanova

Dobrinka Yordanova is a Technical Support Engineer, part of the Progress Telerik UI for Xamarin & UWP team in Sofia, Bulgaria. She holds a master's degree in Computer Systems and Technologies. Her passion is traveling around the world and exploring multicultural environments. In her spare time she likes making sushi, playing console games and hanging out with friends.

Related Posts

Comments

Comments are disabled in preview mode.