Introducing the New .NET MAUI PDF Viewer

Jollen Moyani - Jan 23 '23 - - Dev Community

Syncfusion is excited to announce the availability of another valuable control, PDF Viewer, for the .NET MAUI platform in the 2022 Volume 4 release.

The new .NET MAUI PDF Viewer control allows you to easily add PDF viewing capabilities within your applications. It is supported in Windows, macOS, iOS, and Android platforms.

In this blog, we’ll explore the features of the .NET MAUI PDF Viewer and the steps to get started with it.

Key features

The key features of the new .NET MAUI PDF Viewer are:

  • Virtual scrolling : Easily scroll through the pages in a PDF document with a fluent experience. The pages are rendered on demand in order to enhance the loading and scrolling performance.
  • Magnification : The content of a PDF document can be efficiently zoomed in and out by pinching or changing the zoom factor programmatically.
  • Page navigation : Navigate to the desired pages instantly using the programmatic page navigation or by dragging the scroll box in the UI.
  • Opening password-protected PDFs : Load and view password-protected PDFs in a hassle-free way. Also, you can design a custom password request view and integrate the functionality easily with built-in options.

Getting started with .NET MAUI PDF Viewer

Let’s see how to integrate the Syncfusion .NET MAUI PDF Viewer control in your application and use its basic features.

Creating a .NET MAUI application with the PDF Viewer

Step 1: First, create a new .NET MAUI application in Visual Studio.

Step 2: Then, add the Syncfusion.Maui.PdfViewer NuGet package reference to your project from the NuGet Gallery.

Step 3 : Then, register the handler for the Syncfusion core package in the MauiProgram.cs file. Refer to the following code.

using Syncfusion.Maui.Core.Hosting;
namespace PdfViewerExample
{
 public static class MauiProgram
 {
    public static MauiApp CreateMauiApp()
    {
    var builder = MauiApp.CreateBuilder();
    builder
      .UseMauiApp<App>()
      .ConfigureFonts(fonts =>
      {
         fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
         fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
       });
       builder.ConfigureSyncfusionCore();
       return builder.Build();
    }
 }
}
Enter fullscreen mode Exit fullscreen mode

Step 4: Add a new folder to the project named Assets and add the PDF document you want to view (such as PDF_Succinctly.pdf ) using the PDF Viewer.

Note: You can also load PDF files from local storage or a URL.

Step 5: We are going to use the MVVM binding technique. So, create a new view model class named PdfViewerViewModel.cs and add the following code to it.

using System.ComponentModel;
using System.Reflection;

namespace PdfViewerExample
{
    internal class PdfViewerViewModel: INotifyPropertyChanged
    {
        private Stream? m_pdfDocumentStream;

        /// <summary>
        /// An event to detect the change in the value of a property.
        /// </summary>
        public event PropertyChangedEventHandler? PropertyChanged;

        /// <summary>
        /// The PDF document stream that is loaded into the instance of the PDF viewer. 
        /// </summary>
        public Stream PdfDocumentStream
        {
            get
            {
                return m_pdfDocumentStream;
            }
            set
            {
                m_pdfDocumentStream = value;
                OnPropertyChanged("PdfDocumentStream");
            }
        }

        /// <summary>
        /// Constructor of the view model class.
        /// </summary>
        public PdfViewerViewModel()
        {
            //Accessing the PDF document that is added as an embedded resource as a stream.
            m_pdfDocumentStream = typeof(App).GetTypeInfo().Assembly.GetManifestResourceStream("PdfViewerExample.Assets.PDF_Succinctly.pdf");
        }

        public void OnPropertyChanged(string name)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

Step 6: In the MainPage.xaml page, import the control namespace Syncfusion.Maui.PdfViewer , initialize the SfPdfViewer control, and bind the created PdfDocumentStream to the SfPdfViewer.DocumentSourceproperty. Refer to the following code example.

Note: The DocumentSource property accepts both stream and byte[] instances.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:syncfusion="clr-namespace:Syncfusion.Maui.PdfViewer;assembly=Syncfusion.Maui.PdfViewer"
             xmlns:local="clr-namespace:PdfViewerExample"      
             x:Class="PdfViewerExample.MainPage">

    <ContentPage.BindingContext>
        <local:PdfViewerViewModel x:Name="viewModel" />
    </ContentPage.BindingContext>

    <ContentPage.Content>
        <syncfusion:SfPdfViewer x:Name="PdfViewer"
                               DocumentSource="{Binding PdfDocumentStream}">
        </syncfusion:SfPdfViewer>
    </ContentPage.Content>

</ContentPage>
Enter fullscreen mode Exit fullscreen mode

Note: If you are using multiple pages in your app, then make sure to unload the document from the SfPdfViewer class while leaving the page that has it to release the memory and resources consumed by the loaded PDF document. You can unload documents by calling the UnloadDocument method. Also, while changing or opening different documents on the same page, the previously loaded document will be unloaded automatically by the SfPdfViewer.

Step 7: Finally, run the app. Refer to the following output image.

Integrating PDF Viewer in a .NET MAUI application

Integrating PDF Viewer in a .NET MAUI application

Note: For more details, refer to the .NET MAUI PDF Viewer GitHub demo.

Creating a custom toolbar

Currently, we do not support a built-in toolbar in the .NET MAUI PDF Viewer. However, we have provided APIs for performing magnification and page navigation programmatically.

Therefore, you can design a simple custom toolbar and invoke the operations using the following APIs.

Load document API

API

Type

Description

DocumentSource

Property

Represents the source object to load PDF files from the stream or byte array. This property helps load a PDF document during control initialization and while switching to the document dynamically.

Page navigation APIs

APIs

Type

Description

GoToFirstPageCommand

Property

Gets the value that represents the GoToFirstPage command.

GoToLastPageCommand

Property

Gets the value that represents the GoToLastPage command.

GoToNextPageCommand

 

Property

Gets the value that represents the GoToNextPage command.

GoToPreviousPageCommand

 

Property

Gets the value that represents the GoToPreviousPage command.

GoToPageCommand

Property

Gets the value that represents the GoToPage command.

GoToFirstPage()

Method

Navigates to the first page of a PDF.

GoToLastPage()

Method

Navigates to the last page of a PDF.

GoToNextPage()

Method

Navigates to the next page in a PDF.

GoToPreviousPage()

Method

Navigates to the previous page in a PDF.

GoToPage(int)

Method

Navigates to the specified page of the PDF document. The parameter represents the page number (1-based index).

PageNumber

Property

Returns the current page number.

PageNumberProperty

Bindable property

The backing store for the PageNumber bindable property.

PageCount

Property

Returns the total number of pages in a PDF document.

PageCountProperty

Bindable property

The backing store for the PageCount bindable property.

Zoom APIs

APIs

Type

Description

ZoomFactor

Property

Returns and sets the zoom factor. The default value is 1, which represents 100% zoom. This value can be from 1 to 4.

Note: For more details, refer to the .NET MAUI PDF Viewer with a custom toolbar demo on GitHub.

.NET MAUI PDF Viewer with a Custom Toolbar

.NET MAUI PDF Viewer with a Custom Toolbar

Opening a password-protected PDF

To open a password-protected or encrypted PDF document, you can use the LoadDocument() method by providing the password along with the document stream.

Refer to the following code example.

string password = "PASSWORD";
pdfViewer.LoadDocument(pdfDocumentStream, password);
Enter fullscreen mode Exit fullscreen mode

Using the following APIs, you can determine whether a PDF document is password protected.

APIs

Type

Description

PasswordRequested

Event

This event will be called when a password is required to open a PDF document.

DocumentLoadFailed

Event

This event will be called when the document fails to load. For example, this event occurs with the message, “Can't open an encrypted document. The password is invalid,” when we provide a wrong or invalid password.

Note: For more details, refer to the opening a password-protected PDF using the .NET MAUI PDF Viewer demo on GitHub.

Opening a Password-Protected PDF Document Using .NET MAUI PDF Viewer

Opening a Password-Protected PDF Document Using .NET MAUI PDF Viewer

Reference

Refer to the .NET MAUI PDF Viewer documentation to learn about its other features.

Coming soon

We have planned and are working to support the following major features in the .NET MAUI PDF Viewer control in upcoming releases:

  • Built-in toolbar.
  • Text search.
  • Text selection and copy.
  • Bookmark, TOC, and hyperlink navigation.
  • Localization.
  • Accessibility.
  • RTL text.
  • The ability to add, edit, save, and remove annotations.
  • Form filling with edit and save functions.
  • Single-page layout mode.
  • Thumbnails.
  • Themes.

Conclusion

Thanks for reading! I hope you enjoyed learning about the new Syncfusion .NET MAUI PDF Viewer introduced in 2022 Volume 4. You can download and check out our MAUI demo app from Google Playand the Microsoft Store.

Also, check out our Release Notes and the What’s New pages to see the other updates in this release.

For current customers, the new version is available for download from the License and Downloads page. If you are not yet a Syncfusion customer, you can try our 30-day free trial to check out our newest features.

You can share your feedback and questions through the comments section below or contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!

Related blogs

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .