Getting Started with .NET MAUI Smart PDF Viewer

25 Sep 202623 minutes to read

This section guides you through setting up and configuring the Smart PDF Viewer in your .NET MAUI application. Follow the steps below to add the Smart PDF Viewer to your project, configure the AI service, and load a PDF document.

Prerequisites

Before proceeding, ensure the following are in place:

  1. Install .NET 9 SDK or later.
  2. Set up a .NET MAUI environment with Visual Studio 2022 (v17.3 or later).

Step 1: Create a New MAUI Project

  1. Go to File > New > Project and choose the .NET MAUI App template.
  2. Name the project and choose a location, then click Next.
  3. Select the .NET Framework version and click Create.

Step 2: Install the Syncfusion® MAUI Smart PDF Viewer NuGet Package

  1. In Solution Explorer, right-click the project and choose Manage NuGet Packages.
  2. Search for Syncfusion.Maui.SmartPdfViewer and install the latest version.
  3. Ensure the dependencies (Syncfusion.Maui.PdfViewer, Syncfusion.Maui.SmartComponents, Syncfusion.Maui.Core) are installed and the project is restored.

Alternatively, you can utilize the following package manager command to achieve the same.

Install-Package Syncfusion.Maui.SmartPdfViewer -Version 35.1.37

Step 3: Register the Syncfusion® Core Handler

Syncfusion.Maui.Core is automatically installed as a dependency when the Syncfusion.Maui.SmartPdfViewer NuGet is installed.

  1. Add the following namespace in your MauiProgram.cs file.
using Syncfusion.Maui.Core.Hosting;
  1. Register the Syncfusion core handler in your MauiProgram.cs file to use Syncfusion controls.
public static MauiApp CreateMauiApp()
   {
       var builder = MauiApp.CreateBuilder();
       builder
           .UseMauiApp<App>()
           .ConfigureFonts(fonts =>
           {
               fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
           });

       builder.ConfigureSyncfusionCore();
       return builder.Build();
   }

Step 4: Configure the AI Service

The AI-powered features of the Smart PDF Viewer (document summarization, smart redaction, and smart fill) require a chat client registered in the dependency injection container. This step is not required for basic PDF rendering.

You can refer to Configure Chat Client for services like Azure, OpenAI, and Ollama. You can also refer to the Custom AI Service section to configure your own services, such as Claude, Gemini, DeepSeek, Groq, etc. If you are using a custom AI service, there is no need to register ConfigureSyncfusionAIServices() in MauiProgram.

  • Install the following NuGet packages to your project:
Install-Package Microsoft.Extensions.AI
Install-Package Microsoft.Extensions.AI.OpenAI
Install-Package Azure.AI.OpenAI

To configure the AI services, you must call the ConfigureSyncfusionAIServices() method in the MauiProgram.cs file.

Add the following namespaces:

using Syncfusion.Maui.SmartComponents.Hosting;
using Azure.AI.OpenAI;
using Azure;

In the CreateMauiApp method, add the following code to configure the Azure AI service:

string key = "<MENTION-YOUR-KEY>";
Uri azureEndPoint = new Uri("<MENTION-YOUR-URL>");
string deploymentName = "<MENTION-YOUR-DEPLOYMENT-NAME>";

// Shows how to configure Azure AI service to the Smart Components.
AzureOpenAIClient azureOpenAIClient = new AzureOpenAIClient(azureEndPoint, new AzureKeyCredential(key));
IChatClient azureChatClient = azureOpenAIClient.GetChatClient(deploymentName).AsIChatClient();

builder.Services.AddChatClient(azureChatClient);
builder.ConfigureSyncfusionAIServices();

Here,

  • azureOpenAIKey: Azure OpenAI API key.
  • azureOpenAIEndpoint: Azure OpenAI deployment endpoint URL.
  • azureOpenAIModel: Azure OpenAI deployment name.

For Azure OpenAI, first deploy an Azure OpenAI Service resource and model, then the values for azureOpenAIKey, azureOpenAIEndpoint, and azureOpenAIModel will all be provided to you.

The chat client registered using AddChatClient is resolved by the Smart PDF Viewer through dependency injection. The same chat client can be shared across other AI-powered Smart Components in your application.

Step 5: Add the Smart PDF Viewer

Open the MainPage.xaml file and follow the steps below.

  1. Add the following namespace in your MainPage.xaml file.
xmlns:syncfusion="clr-namespace:Syncfusion.Maui.SmartPdfViewer;assembly=Syncfusion.Maui.SmartPdfViewer"
  1. Add the SfSmartPdfViewer control.
<syncfusion:SfSmartPdfViewer x:Name="pdfViewer" />

Step 6: Load a PDF Document

  1. From the solution explorer of the project, add a new folder to the project named Assets and add the PDF document you need to load into the PDF viewer. Here, a PDF document named PDF_Succinctly.pdf is used.
  2. In Visual Studio, right-click the added PDF document and set its Build Action as Embedded Resource.
  3. In this example, the PDF document is loaded using MVVM binding. Create a new C# file named PdfViewerViewModel.cs and add the following code snippet.
using System.ComponentModel;
    using System.Reflection;

    public class PdfViewerViewModel : INotifyPropertyChanged
    {
        private Stream pdfDocumentStream;

        /// <summary>
        /// Occurs when a property value changes.
        /// </summary>
        public event PropertyChangedEventHandler? PropertyChanged;

        /// <summary>
        /// Gets or sets the stream of the currently loaded PDF document.
        /// </summary>
        public Stream PdfDocumentStream
        {
            get
            {
                return pdfDocumentStream;
            }
            set
            {
                pdfDocumentStream = value;
                OnPropertyChanged(nameof(PdfDocumentStream));
            }
        }

        /// <summary>
        /// Initializes a new instance of the <see cref="PdfViewerViewModel"/> class.
        /// </summary>
        public PdfViewerViewModel()
        {
            // Load the embedded PDF document stream.
            // Replace 'SmartPdfViewerExample' with your project's default namespace in the resource path. Verify that the namespace matches your project name.
            pdfDocumentStream = typeof(App).GetTypeInfo().Assembly.GetManifestResourceStream("SmartPdfViewerExample.Assets.PDF_Succinctly.pdf");
        }

        /// <summary>
        /// Raises the <see cref="PropertyChanged"/> event for the specified property name.
        /// </summary>
        /// <param name="name">The name of the property that changed.</param>
        public void OnPropertyChanged(string name)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
        }
    }
  1. Open the MainPage.xaml file again and add the namespace SmartPdfViewerExample and name it as local.
xmlns:local="clr-namespace:SmartPdfViewerExample"
  1. Set an instance of the PdfViewerViewModel class as the BindingContext. Bind the Smart PDF viewer’s DocumentSource to the PdfDocumentStream property of the PdfViewerViewModel class.
<ContentPage.BindingContext>
        <local:PdfViewerViewModel x:Name="viewModel" />
    </ContentPage.BindingContext>

    <syncfusion:SfSmartPdfViewer x:Name="pdfViewer" DocumentSource="{Binding PdfDocumentStream}"/>

  • While changing or opening different documents on the same page, the previously loaded document will be unloaded automatically by the SfSmartPdfViewer.
  • If you are using multiple pages in your application, then make sure to unload the document from the SfSmartPdfViewer while leaving the page that has it to release the memory and resources consumed by the PDF document that is loaded. The unloading of documents can be done by calling the UnloadDocument method.
  • The SfSmartPdfViewer also implements IDisposable. Call the Dispose method when the viewer is no longer needed (for example, when leaving the page) to dispose the Smart PDF Viewer and its associated resources and dependencies, including the AI panels and settings event handlers. Calling Dispose more than once has no effect.
protected override void OnDisappearing()
    {
        pdfViewer.Dispose();
        base.OnDisappearing();
    }

Step 7: Enable the AI-Powered Features

The Smart PDF Viewer exposes three settings classes to enable and configure the AI features. Add them in your MainPage.xaml file as needed.

Document summarization

Use the AssistViewSettings class to configure the AI Assist panel used for document summarization and Q&A.

<syncfusion:SfSmartPdfViewer x:Name="pdfViewer" 
                             DocumentSource="{Binding PdfDocumentStream}"
                             IsAIAssistViewVisible="True">
    <syncfusion:SfSmartPdfViewer.AssistViewSettings>
        <syncfusion:AssistViewSettings Prompt="Summarize this document."
                                        Placeholder="Enter your query..."
                                        ShowPromptSuggestions="True" />
    </syncfusion:SfSmartPdfViewer.AssistViewSettings>
</syncfusion:SfSmartPdfViewer>
using Syncfusion.Maui.SmartPdfViewer;

SfSmartPdfViewer pdfViewer = new SfSmartPdfViewer
{
    IsAIAssistViewVisible = true,
    AssistViewSettings = new AssistViewSettings
    {
        Prompt = "Summarize this document.",
        Placeholder = "Enter your query...",
        ShowPromptSuggestions = true
    }
};

Here,

  • IsAIAssistViewVisible: Shows or hides the AI Assist View panel.
  • Prompt: The prompt used to guide AI-generated responses.
  • Placeholder: The placeholder text displayed in the Assist View input area.
  • ShowPromptSuggestions: Shows or hides prompt suggestions in the Assist View panel.

Smart redaction

Use the SmartRedactSettings class to enable AI-assisted redaction of sensitive information.

<syncfusion:SfSmartPdfViewer x:Name="pdfViewer" 
                             DocumentSource="{Binding PdfDocumentStream}"
                             IsSmartRedactViewVisible="True">
    <syncfusion:SfSmartPdfViewer.SmartRedactSettings>
        <syncfusion:SmartRedactSettings IsEnabled="True">
            <x:Array Type="{x:Type x:String}">
                <x:String>Person Names</x:String>
                <x:String>Organization Names</x:String>
                <x:String>Email Addresses</x:String>
                <x:String>Phone Numbers</x:String>
                <x:String>Credit Card Numbers</x:String>
            </x:Array>
        </syncfusion:SmartRedactSettings>
    </syncfusion:SfSmartPdfViewer.SmartRedactSettings>
</syncfusion:SfSmartPdfViewer>
using Syncfusion.Maui.SmartPdfViewer;

SfSmartPdfViewer pdfViewer = new SfSmartPdfViewer
{
    IsSmartRedactViewVisible = true,
    SmartRedactSettings = new SmartRedactSettings
    {
        IsEnabled = true,
        RedactPatterns = new string[]
        {
            "Person Names",
            "Organization Names",
            "Email Addresses",
            "Phone Numbers",
            "Credit Card Numbers"
        }
    }
};

Here,

  • IsSmartRedactViewVisible: Shows or hides the Smart Redaction panel.
  • IsEnabled: Enables or disables the Smart Redaction feature.
  • RedactPatterns: The collection of patterns used to identify sensitive information, such as names, phone numbers, email addresses, identification numbers, and financial information. Custom patterns can be added to detect organization-specific confidential content.

Smart fill

Use the SmartFillSettings class to enable AI-assisted form filling.

<syncfusion:SfSmartPdfViewer x:Name="pdfViewer" 
                             DocumentSource="{Binding PdfDocumentStream}">
    <syncfusion:SfSmartPdfViewer.SmartFillSettings>
        <syncfusion:SmartFillSettings IsEnabled="True" />
    </syncfusion:SfSmartPdfViewer.SmartFillSettings>
</syncfusion:SfSmartPdfViewer>
using Syncfusion.Maui.SmartPdfViewer;

SfSmartPdfViewer pdfViewer = new SfSmartPdfViewer
{
    SmartFillSettings = new SmartFillSettings
    {
        IsEnabled = true
    }
};

Here,

  • IsEnabled: Enables or disables the Smart Fill feature, which intelligently populates form fields based on context.

Step 8: Register the Syncfusion license

Register your Syncfusion license key in the MauiProgram.cs file before using the Smart PDF Viewer. For more details, see Licensing.

public static MauiApp CreateMauiApp()
{
    ...
    builder.ConfigureSyncfusionCore();
    Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("YOUR_LICENSE_KEY");
    return builder.Build();
}

Step 9: Running the Application

  1. Select the target framework, device, or emulator.
  2. Press F5 to run the application.
  3. The PDF document will be loaded in the Smart PDF Viewer, and the AI-powered features can be accessed from the built-in toolbar and the AI Assist, Smart Redaction, and Smart Fill panels.

To run the AI features on Android, an additional semantic-search model setup (model.ONNX and vocab.txt) may be required. Refer to the platform-specific notes in the Smart Components documentation for details on copying the local embeddings model to the app data directory at startup.

Prerequisites

Before proceeding, ensure the following are set up:

  1. Ensure you have the latest version of JetBrains Rider.
  2. Install .NET 9 SDK or later.
  3. Make sure the MAUI workloads are installed and configured as described here.

Step 1: Create a new .NET MAUI Project

  1. Go to File > New Solution, Select .NET (C#) and choose the .NET MAUI App template.
  2. Enter the Project Name, Solution Name, and Location.
  3. Select the .NET framework version and click Create.

Step 2: Install the Syncfusion® MAUI Smart PDF Viewer NuGet Package

  1. In Solution Explorer, right-click the project and choose Manage NuGet Packages.
  2. Search for Syncfusion.Maui.SmartPdfViewer and install the latest version.
  3. Ensure the necessary dependencies are installed correctly, and the project is restored. If not, open the Terminal in Rider and manually run: dotnet restore

Alternatively, you can utilize the following dotnet CLI command to achieve the same.

dotnet add package Syncfusion.Maui.SmartPdfViewer

Step 3: Register the handler

The Syncfusion.Maui.Core NuGet is a dependent package for all Syncfusion® controls of .NET MAUI. In the MauiProgram.cs file, register the handler for Syncfusion® core.

using Syncfusion.Maui.Core.Hosting;
namespace GettingStarted
{
    public static class MauiProgram
    {
        public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();

            builder.ConfigureSyncfusionCore();
            builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            });

            return builder.Build();
        }
    }
}

Step 4: Configure the AI Service

To configure the AI services, you must register a chat client and call the ConfigureSyncfusionAIServices() method in the MauiProgram.cs file.

using Azure.AI.OpenAI;
using Microsoft.Extensions.AI;
using Syncfusion.Maui.Core.Hosting;
using Syncfusion.Maui.SmartComponents.Hosting;
using System.ClientModel;

namespace GettingStarted
{
    public class MauiProgram
    {
        public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
                .UseMauiApp<App>()
                .ConfigureFonts(fonts =>
                {
                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                });

            string azureOpenAIKey = "AZURE_OPENAI_KEY";
            string azureOpenAIEndpoint = "AZURE_OPENAI_ENDPOINT";
            string azureOpenAIModel = "AZURE_OPENAI_MODEL";

            // Configure Azure AI service for the Smart PDF Viewer.
            AzureOpenAIClient azureOpenAIClient = new AzureOpenAIClient(new Uri(azureOpenAIEndpoint), new ApiKeyCredential(azureOpenAIKey));
            IChatClient azureOpenAIChatClient = azureOpenAIClient.GetChatClient(azureOpenAIModel).AsIChatClient();

            builder.Services.AddChatClient(azureOpenAIChatClient);
            builder.ConfigureSyncfusionAIServices();

            return builder.Build();
        }
    }
}

  • You can refer to Configure Chat Client for services like Azure, OpenAI, and Ollama.
  • You can also refer to the Custom AI Service section to configure your own services, such as Claude, Gemini, DeepSeek, Groq, etc.
  • If you are using a custom AI service, there is no need to register ConfigureSyncfusionAIServices() in MauiProgram.

Step 5: Add the Smart PDF Viewer control

  1. To initialize the control, import the Syncfusion.Maui.SmartPdfViewer namespace into your code.
  2. Initialize SfSmartPdfViewer.
<ContentPage   
    . . .
    xmlns:syncfusion="clr-namespace:Syncfusion.Maui.SmartPdfViewer;assembly=Syncfusion.Maui.SmartPdfViewer">

    <syncfusion:SfSmartPdfViewer />
</ContentPage>
using Syncfusion.Maui.SmartPdfViewer;
. . .

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        SfSmartPdfViewer pdfViewer = new SfSmartPdfViewer();
        this.Content = pdfViewer;
    }
}
  1. Bind the DocumentSource property to load a PDF document from a stream, and enable the AI features as shown in the Visual Studio tab above (Step 6 and Step 7).

Step 6: Running the Application

  1. Select the target framework, device, or emulator.
  2. Run the application. The PDF document will be loaded in the Smart PDF Viewer, and the AI-powered features can be accessed from the built-in toolbar and the AI Assist, Smart Redaction, and Smart Fill panels.

See also