Some test text!

keyboard_arrow_down

Get started

Download PDFTron SDK
play_arrow

Quick start - view a document

Xamarin.AndroidXamarin.iOSIntegrate with NuGetIntegrate manuallyRun samplesAdd license keyUpdate to latest version
keyboard_arrow_down

Xamarin.Forms

Document viewerBasic viewer
keyboard_arrow_down

Fundamentals

Java binding (Android)Objective-C binding (iOS)Code sharingDocument lockingDocument saving
keyboard_arrow_down

FAQ

System requirementsPDFTron full vs. standardReduce size of APK
keyboard_arrow_down

Document Viewer

keyboard_arrow_down

Document Viewer components

keyboard_arrow_down

Annotation and collaboration

OverviewToolManager setupRead only mode
play_arrow

Disable annotation creation and editing

play_arrow

Default annotation properties

play_arrow

Change tool mode

Xamarin.AndroidXamarin.iOS
play_arrow

Events

play_arrow

Override annotation handling

Show and hide existing annotationsRealtime collaboration
keyboard_arrow_down

Advanced customization

play_arrow

Add a custom view to a page

Create a custom toolPage coloring modePage fit modePage layout modeScrolling direction
keyboard_arrow_down

Conversion

keyboard_arrow_down

Parsing and extraction

keyboard_arrow_down

Digital signatures

keyboard_arrow_down

Search

keyboard_arrow_down

Advanced topics

keyboard_arrow_down

Troubleshooting

keyboard_arrow_down

Reference

LocalizationIcon cheat sheet
keyboard_arrow_down

PDF Processing API

Document viewerkeyboard_arrow_down

Document viewer - Xamarin.Forms

In this document
chevron_rightCreating the Xamarin.Forms Page
chevron_rightConsuming the Xamarin.Forms Page
chevron_rightCreating the Page Renderer on each Platform
chevron_rightCreating the Page Renderer on iOS
chevron_rightCreating the Page Renderer on Android

Before you get started, we recommend you have a look at Microsoft's comprehensive guide on Customizing a ContentPage. It is important that you understand how Xamarin renders the same page on different platforms using ContentPage, ExportRenderer and PageRenderer. In this guide, you will learn how to create a fully featured document viewer and editor as page renderer on each platform.

Complete sample code can be found here:

Xamarin.Forms sample project

The rendering process can be taken advantage of to implement platform-specific customization by creating a custom renderer for a ContentPage on each platform. The process for doing this is as follows:

  1. Create a Xamarin.Forms page.
  2. Consume the page from Xamarin.Forms.
  3. Create the custom renderer for the page on each platform.

linkCreating the Xamarin.Forms Page

An unaltered ContentPage can be added to the shared Xamarin.Forms project, as shown in the following XAML code example:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="CustomRenderer.AdvancedViewerPage"
             Title="Advanced Viewer Page">
    <ContentPage.Content>
    </ContentPage.Content>
</ContentPage>

Similarly, the code-behind file for the ContentPage should also remain unaltered, as shown in the following code example:

public partial class AdvancedViewerPage : ContentPage
    {
        public AdvancedViewerPage()
        {
            // Document viewer contains toolbar, let's hide the global one
            NavigationPage.SetHasNavigationBar(this, false);
            InitializeComponent();
        }
    }

An instance of the AdvancedViewerPage will be used to display document viewer on each platform. Customization of the control will be carried out in the custom renderer, so no additional implementation is required in the AdvancedViewerPage class.

linkConsuming the Xamarin.Forms Page

The empty AdvancedViewerPage must be displayed by the Xamarin.Forms application. This occurs when a button on the MainPage instance is tapped, which in turn executes the OnOpenAdvancedViewerButtonClicked method, as shown in the following code example:

async void OnOpenAdvancedViewerButtonClicked(object sender, EventArgs e)
{
    await Navigation.PushAsync(new AdvancedViewerPage());
}

This code simply navigates to the AdvancedViewerPage, on which custom renderers will customize the page's appearance on each platform.

linkCreating the Page Renderer on each Platform

The AdvancedViewerPage instance is rendered by platform-specific AdvancedViewerPageRenderer classes, which all derive from the PageRenderer class for that platform. This results in each AdvancedViewerPage instance being rendered with document viewer, as shown in the following GIF:

AndroidiOS

linkCreating the Page Renderer on iOS

The following code example shows the page renderer for the iOS platform:

[assembly: ExportRenderer(typeof(AdvancedViewerPage), typeof(AdvancedViewerPageRenderer))]
namespace CustomRenderer.iOS
{
    public class AdvancedViewerPageRenderer : PageRenderer
    {
        private PTTabbedDocumentViewController mTabViewController;

        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);

            if (e.OldElement != null || Element == null)
            {
                return;
            }

            try
            {
                SetupUserInterface();
                SetupEventHandlers();
            }
            catch (Exception ex)
            {
                System.Diagnostics.Debug.WriteLine(@"           ERROR: ", ex.Message);
            }
        }

        //...
    }
}

where the document viewer can be setup as follows:

void SetupUserInterface()
{
    mTabViewController = new PTTabbedDocumentViewController();
    UINavigationController navigationController = new UINavigationController(mTabViewController);

    AddChildViewController(navigationController);

    View.AddSubview(navigationController.View);

    navigationController.DidMoveToParentViewController(this);

    NSUrl fileURL = NSBundle.MainBundle.GetUrlForResource("sample", "pdf");
    NSError error = null;
    mTabViewController.OpenDocumentWithURL(fileURL, out error);
}

linkCreating the Page Renderer on Android

The following code example shows the page renderer for the Android platform:

[assembly: ExportRenderer(typeof(AdvancedViewerPage), typeof(AdvancedViewerPageRenderer))]
namespace CustomRenderer.Droid
{
    public class AdvancedViewerPageRenderer : PageRenderer
    {
        private DocumentView mDocumentView;

        public ViewerPageRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<Page> e)
        {
            base.OnElementChanged(e);

            if (e.OldElement != null || Element == null)
            {
                return;
            }

            try
            {
                SetupUserInterface();
                SetupEventHandlers();
                AddView(view);
            }
            catch (Exception ex)
            {
                System.Diagnostics.Debug.WriteLine(@"           ERROR: ", ex.Message);
            }
        }

        //...
    }
}

where the document viewer can be setup as follows:

void SetupUserInterface()
{
    activity = this.Context as Activity;
    view = activity.LayoutInflater.Inflate(Resource.Layout.AdvancedViewerLayout, this, false);

    mDocumentView = view.FindViewById<DocumentView>(Resource.Id.document_view);

    var context = this.Context;
    FragmentManager childManager = null;
    if (context is FragmentActivity)
    {
        var activity = context as FragmentActivity;
        var manager = activity.SupportFragmentManager;

        var fragments = manager.Fragments;
        if (fragments.Count > 0)
        {
            childManager = fragments[0].ChildFragmentManager;
        }
        if (childManager != null)
        {
            mDocumentView.OpenDocument(GetFile(), "", GetConfig(), childManager);
        }
    }
}

Click here for DocumentView class implementation.

Try out the complete sample here: https://github.com/PDFTron/xamarin-forms-sample.