Introducing the New .NET MAUI PDF Viewer

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();
    }
 }
}

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));
        }
    }
}

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>

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.

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

Page navigation APIs

Zoom APIs

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

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

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

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

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

• Introducing the New .NET MAUI Rating Control
• Introducing the Sixth Set of .NET MAUI Controls
• Authenticate the .NET MAUI App with Azure AD
• Agenda View in .NET MAUI Scheduler: A Perfect Tool for Modern-Day Office Management