Getting Started with UWP PDF Viewer (SfPdfViewer)

26 Jun 20268 minutes to read

This section briefly explains how to include the Syncfusion® UWP PDF Viewer component in UWP App using Visual Studio.

Prerequisites

Create a new UWP App in Visual Studio

You can create a UWP Application using Visual Studio via Microsoft Templates or the Syncfusion® UWP.

Assemblies Deployment

You can add a UWP PdfViewer component to your application by installing it via NuGet packages (recommended) or by manually adding the required assemblies to the project.

Install Syncfusion® UWP PdfViewer NuGet Package

To add UWP PdfViewer component in the application, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install:

• Syncfusion.SfPdfViewer.UWP

Add Syncfusion® UWP PdfViewer Assemblies

Below table describes, list of assemblies required to be added in project when the UWP PdfViewer control is used in your application.

Assembly Description
Syncfusion.SfPdfViewer.UWP This component contains the rendering area and other related UI elements.
Syncfusion.Pdf.UWP This library contains the PDF reader and creator that supports the PDF Viewer.
Syncfusion.SfColorPickers.UWP This component contains UI controls for Color Picker that are used in the PDF Viewer.
Syncfusion.SfInput.UWP This component contains input controls like combobox, range slider and text boxes used in the PDF Viewer
Syncfusion.SfRadialMenu.UWP This component contains UI controls for context menu that are used in the PDF Viewer.
Syncfusion.SfShared.UWP This component contains various UI controls (Numeric UpDown) that are used in the PDF Viewer.

Each assembly must be placed together with its corresponding resource files (i.e., the resource files for an assembly should reside in the same folder as that assembly). The assemblies do not all have to be in a single folder — each assembly may live in its own folder so long as its resource files are kept alongside it. The screenshot shows only the SfPdfViewer assembly for brevity.

Dependent assemblies needed for SfPdfViewerControl

This co-location matters only if you move assemblies out of their installed location. If you relocate an assembly, be sure to move its resource files with it and place them in the same folder as that assembly.

NOTE

Starting with v16.2.0.x, if you reference Syncfusion® assemblies from trial setup or from the NuGet feed, you also have to include a license key in your projects. Please refer to this link to know about registering Syncfusion® license key in your UWP application to use our components.

Add UWP PdfViewer component

UWP PdfViewer control can be added to an application either through the designer (XAML) or programmatically using code.

  1. Click and open the MainPage.xaml file.

  2. Open the Visual Studio Tool box. Navigate to “Syncfusion® Controls for UWP” tab and find the SfPdfViewerControl toolbox items.

SfPdfViewerControl in visual studio toolbox

  1. Drag SfPdfViewerControl(https://help.syncfusion.com/cr/uwp/Syncfusion.Windows.PdfViewer.SfPdfViewerControl.html) and drop in to the Designer area from the Toolbox.

When you drag the SfPdfViewerControl toolbox item to the window, it automatically adds the required assembly references to the current application.

The SfPdfViewerControl is available in the following namespace Syncfusion.Windows.PdfViewer and it can be created using XAML or programmatically using C#.

  1. Add the Syncfusion PdfViewer namespace
xmlns:syncfusion="using:Syncfusion.Windows.PdfViewer"
  1. Add SfPdfViewerControl
<syncfusion:SfPdfViewerControl Name="pdfViewer"> </syncfusion:SfPdfViewerControl>

Load a PDF document

After adding the SfPdfViewerControl, you can load a PDF document using data binding.

  1. Add a PDF file to the project and set its Build Action to Embedded Resource.

  2. Create a simple class (PdfReport.cs) that provides the PDF stream.

using System.Reflection;
using System.IO;

internal class PdfReport : INotifyPropertyChanged
{
    private Stream docStream;

    public event PropertyChangedEventHandler PropertyChanged;

    /// <summary>
    /// Stream object to be bound to the ItemsSource of the PDF Viewer
    /// </summary>
    public Stream DocumentStream
    {
        get
        {
            return docStream;
        }
        set
        {
            docStream = value;
            OnPropertyChanged(new PropertyChangedEventArgs("DocumentStream"));
        }
    }

    public PdfReport()
    {
        // Loads the stream from the embedded resource.
        Assembly assembly = typeof(MainPage).GetTypeInfo().Assembly;

        // Replace 'PdfViewerExample' with your project's namespace in resource path
        docStream = assembly.GetManifestResourceStream("PdfViewerExample.Assets.PDF_Succinctly.pdf");
    }

    public void OnPropertyChanged(PropertyChangedEventArgs e)
    {
        if (PropertyChanged != null)
            PropertyChanged(this, e);
    }        
}
Class PdfReport
    Implements INotifyPropertyChanged

    Private docStream As Stream
    Private Event PropertyChanged As PropertyChangedEventHandler Implements INotifyPropertyChanged.PropertyChanged

    ''' <summary>
    ''' Stream object to be bound to the ItemsSource of the PDF Viewer
    ''' </summary>
    Public Property DocumentStream As Stream
        Get
            Return docStream
        End Get
        Set
            docStream = Value
            OnPropertyChanged(New PropertyChangedEventArgs("DocumentStream"))
        End Set
    End Property

    Public Sub New()
        'Loads the stream from the embedded resource.
        Dim assembly As Assembly = GetType(MainPage).GetTypeInfo().Assembly
        docStream = assembly.GetManifestResourceStream("PdfViewerExample.Assets.PDF_Succinctly.pdf")
    End Sub

    Public Sub OnPropertyChanged(e As PropertyChangedEventArgs)
        RaiseEvent PropertyChanged(Me, e)
    End Sub

End Class
  1. Open the MainPage.xaml file again and add the namespace PdfViewerExample as local.
xmlns:local="using:PdfViewerExample"
  1. Set an instance of the PdfReport class as the DataContext. Bind the PDF viewer’s [ItemSource] to the DocumentStream property of the PdfReport class.
<Page.DataContext>
    <local:PdfReport/>
</Page.DataContext>
<Grid>
   <syncfusion:SfPdfViewerControl Name="pdfViewer" ItemsSource="{Binding DocumentStream}"></syncfusion:SfPdfViewerControl>
</Grid>

You can load and display PDF documents using various approaches such as loading from a stream, StorageFile, PdfLoadedDocument, data binding, or FileOpenPicker.

For detailed information and code examples, refer to Viewing Pdf.

Run the application

Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The output will appear as follows:
SfPdfViewerControl

See Also