View PDF Files within Your Xamarin.Forms Apps Using the Syncfusion PDF Viewer

Suresh Mohan

This post was guest authored and contributed by Suresh Mohan. Suresh is the Product Manager for PDF Viewer at Syncfusion Software where he specializes in desktop and mobile app development.

Probably the most popular document format used for sharing content across various applications and operating systems is a PDF (Portable Document Format). As a Xamarin developer, you may need to display PDF documents like invoices and reports within your Xamarin applications.

The PdfRenderer class in Android and CGPDFDocument class in iOS can be used to display PDF documents by converting each PDF page into an image, then displaying the images within an image viewer. You can also display PDF documents using the web view control, though this approach does not work out of the box for Android and Windows platforms. Both approaches only provide a basic PDF viewing experience. They do not provide an optimal PDF viewing experience with features like document navigation, zooming, text search, text selection and copying, and annotations.

Syncfusion Xamarin.Forms PDF Viewer

The Syncfusion Xamarin.Forms PDF Viewer addresses these shortcomings and provides this optimal PDF viewing experience within your applications. Easily integrate the PDF viewing functionality within your Xamarin applications using a few lines of code. View PDF files within Xamarin.Forms, Xamarin.Android, and Xamarin.iOS applications using the Syncfusion PDF Viewer control. The following features are included out of the box:

• Annotate PDF documents using common annotation types such as highlight, underline, strikethrough, freehand drawing or inking, line, rectangles, and ellipses.
• Easily navigate using bookmarks, links, and a table of contents.
• Search for text.
• Select text and copy it to the clipboard.
• Fill and sign form fields.
• Utilize RTL languages support.
• Load quickly: PDF pages are loaded on demand to help reduce the initial load time and memory consumption.

Integrating the Control in Xamarin.Forms Applications

1. Open Visual Studio and create a new cross-platform project with the name “HelloWorld” and choose .NET Standard as the code sharing strategy.
2. Open Manage NuGet Packages for Solution.



3. Browse for Syncfusion.Xamarin.SfPdfViewer NuGet Packages and install it to all the projects in the solution.



4. Open MainPage.xaml and include the XML namespace to refer to the PDF Viewer assembly. Then add SfPdfViewer as the content to the ContentPage.
5. To use SfPdfViewer in an iOS application, the application must initialize SfPdfDocumentViewRenderer and SfRangeSliderRenderer. Do this in the FinishedLaunching overridding method of the AppDelegate class as shown in the following:

public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
    global::Xamarin.Forms.Forms.Init();
    LoadApplication(new App());
    Syncfusion.SfPdfViewer.XForms.iOS.SfPdfDocumentViewRenderer.Init();
    Syncfusion.SfRangeSlider.XForms.iOS.SfRangeSliderRenderer.Init();
    return base.FinishedLaunching(app, options);
}

Loading a PDF Document

The PDF Viewer supports loading a PDF document as a stream into it. In this blog post, we have added a PDF document as an embedded resource in the project to access its stream.

1. Add the document into the shared project and set its build action as Embedded resource in its properties.



2. Add a view model class to the shared project. Here, the view model class is named PdfViewerViewModel. In the view model class, create a Stream object to bind the PDF stream to the InputFileStream property of the PDF Viewer.

The PdfViewerViewModel class will look like the following:

using System.ComponentModel;
using System.IO;
using System.Reflection;

namespace HelloWorld
{
    class PdfViewerViewModel : INotifyPropertyChanged
    {
        private Stream m_pdfDocumentStream;

        ///
        /// An event to detect the change in the value of a property.
        /// 
        public event PropertyChangedEventHandler PropertyChanged; 
        
        ///
        /// The PDF document stream that is loaded into the instance of the PDF Viewer. 
        /// 
        public Stream PdfDocumentStream 
        {
           get => m_pdfDocumentStream; 
           set 
           { 
               m_pdfDocumentStream = value; 
               NotifyPropertyChanged("PdfDocumentStream"); 
           }
        } 

        ///
        /// Constructor of the view model class.
        /// 
        public PdfViewerViewModel() 
        {
            //Accessing the PDF document that is added as embedded resource as stream. 
            PdfDocumentStream = typeof(App).GetTypeInfo().Assembly.GetManifestResourceStream("HelloWorld.PDF_Succinctly.pdf"); 
        }
    
       private void NotifyPropertyChanged(string propertyName) 
       {
           if (PropertyChanged != null) 
           { 
               PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); 
           }
       }
   } 
}

3. Now set the BindingContext of the ContentPage to PdfViewerViewModel class and bind the PdfDocumentStream object to the InputFileStream property of the PDF Viewer object in the MainPage.xaml:
4. The PDF Viewer control allows unloading the PDF document from the viewer when the PDF document is not in use anymore. This releases the PDF document and all its associated resources in the application. Call the Unload method of PDF Viewer control as in the following code snippet:

//Unloads the PDF document from the PDF Viewer, releases all its associated resources.
pdfViewerControl.Unload();

With this, you have successfully integrated PDF Viewer control into a Xamarin.Forms application. Now you can view PDF documents in Android, iOS and UWP platforms. Also, review PDF documents using various annotation tools available in our built-in toolbar.

Roadmap

For future releases of Syncfusion’s PDF Viewer, the following features can be expected:

• Include comments.
• Add and modify rubber stamps and pop-up annotations.
• Use flip-view mode.

Summary

This post describes how to view PDF files within your Xamarin.Forms apps using the Syncfusion PDF Viewer control. You can find the runnable demo of this blog in this GitHub repository. To check out more features of Xamarin PDF Viewer, visit the feature tour page. To learn more about the Syncfusion PDF Viewer, visit the documentation page.

Suresh Mohan

Follow