Blog Post

How to Build a .NET MAUI PDF Viewer with the PSPDFKit SDK

Illustration: How to Build a .NET MAUI PDF Viewer with the PSPDFKit SDK

In this post, you’ll learn how to build a .NET MAUI PDF viewer with the PSPDFKit for Web SDK using the release candidate version of .NET 7.

.NET MAUI stands for .NET Multi-platform App User Interface, and it’s a new framework from Microsoft for creating native cross-platform mobile and desktop applications from a single codebase using .NET.

Architecture and Features

.NET MAUI is a successor to Microsoft’s now-deprecated Xamarin project, which was made for cross-platform mobile application development for Android, iOS, and Windows.

arch

It’s a multi-year project that was architected from ground up, resulting in a framework that offers:

  • Unification of projects — Out of the box, you get a single multi-targeted setup.

  • Truly native MAUI applications — They run on the native infrastructure of each supported platform.

  • Optimized compilation — .NET for iOS does full ahead-of-time (AOT) compilation to produce ARM binaries for Apple’s App Store, while .NET for Android takes advantage of just-in-time (JIT) and AOT compilation on an Android device.

  • Creation of native applications that host a web view, using Blazor.

  • Speed — It’s 68 percent faster than Xamarin.Android and 44 percent faster than Xamarin.Forms.

It also offers:

  • MVVM and XAML support

  • 7 different layouts

  • 44 views

  • More than 50 controls

controls

Release and Versioning

.NET MAUI has been available since May 2022. It ships with .NET with the same cadence, lifecycle, and support cycle as .NET. In November 2022, during the three-day .NET Conf 2022 event, .NET 7 will be launched and become the first .NET release shipped together with MAUI. It’ll also be the current release of .NET, while .NET 6 will become the long-term support (LTS) version.

Building a .NET MAUI PDF Viewer with the PSPDFKit Web SDK

When using .NET MAUI, you can create either a standalone MAUI app or a MAUI Blazor application. However, in the next sections, you’ll create a MAUI Blazor application using a Windows machine.

React Application

  1. First, create a React application using the PSPDFKit for Web SDK by following the instructions on the Getting Started on Web page. Or, use (clone) the already created one from our GitHub repository. The application will be located in the pspdfkit-react-example folder (or pspdfkit-web-example-react if you cloned the GitHub repository).

  2. Within that folder, use one of the following commands:

  • If you created an application, run yarn build (or npm run build), which will result in a new pspdfkit-react-example/build folder.

  • If you cloned the repository, run yarn and yarn build (or npm install and npm run build), which will result in a new pspdfkit-web-example-react/build folder.

Installing Visual Studio 2022 Preview

  1. To build this example, you’ll need Visual Studio 2022 Preview (version 17.4.0 Preview 2.1 at the time of writing). You can download it here.

  2. Within the Visual Studio 2022 installer, make sure the .NET Multi-platform App UI development checkbox is checked. step 4

Using Visual Studio 2022 Preview

  1. Open Visual Studio 2022 Preview.

  2. Choose Create New Project.

  3. At the top, where it says Search for templates, enter MAUI Blazor.

  4. Choose .NET MAUI Blazor App from the top of the resulting list. step 8

  5. Click Next.

  6. Under Project name, enter PSPDFKitMAUI7Example. Then, press Next.

  7. Choose the .NET 7.0 (Preview) framework from the combo box and press Create.

  8. Once the new solution is created, the project tree will look like what’s shown in the following image. step 12

  9. Under the Manage NuGet Packages context menu item, make sure the Package source is set to nuget.org. If it doesn’t exist, create one using this source. step 13

  10. Remove the Shared, Data, and Pages folders, as they contain samples from the initial template that you won’t need for this example.

  11. Remove the contents of the Main.razor file and leave the file empty in the project tree.

  12. In the Imports.razor file, remove the last line (@using PSPDFKitMAUI7Example.Shared).

  13. In MainProgram.cs, remove the following, which aren’t needed for this example:

  • Line 2 (using PSPDFKitMAUI7Example.Data;)

  • Line 25 (builder.Services.AddSingleton<WeatherForecastService>();)

  1. Remove all the files and folders from the wwwroot folder.

  2. Copy all the files and folders from the above-mentioned pspdfkit-react-example/build folder (or the pspdfkit-web-example-react/build folder) to the wwwroot folder.

WinUI 3

  1. From the Debug menu, choose Start Debugging.

  2. The application will start as a WinUI 3 Windows application and look like what’s shown below. step 21

Android

  1. To start the application as an Android app, choose Tools > Android > Android Device Manager.

  2. Make sure to have at least one Android Virtual Device (AVD) ready. Start it. step 23

  3. Windows Machine will be shown. step 24_1
    Instead of using that, choose the available AVD from the combo box. step 24_2

  4. From the Debug menu, choose Start Debugging.

  5. The first run will take couple minutes, and you’ll see something like this (depending on the appearance of your AVD). step 26

iOS

  1. To start the application as an iOS app, choose Tools > iOS > Pair to Mac, and pair your Windows machine with a machine running macOS. step 27

  2. Pick one of the iOS simulators from the menu.

  3. From the Debug menu, choose Start Debugging.

  4. The first run will take couple minutes, and you’ll see something like this on your macOS machine. step 30

Conclusion

With .NET MAUI, you can build native applications for Android, iOS, macOS, and Windows from a single codebase. With more than 5 million .NET developers, it’ll be interesting to see how fast it’s adopted.

The code for the example in this post can be found in our PSPDFKit-labs github repository.

Here are some additional links worth checking out:

Related Products
PSPDFKit for Windows

Product Page
Guides
API Docs

Share Post
Free 60-Day Trial Try PSPDFKit in your app today.
Free Trial

Related Articles

Explore more
PRODUCTS  |  .NET

PDF-to-Office Conversion with GdPicture.NET SDK

DEVELOPMENT  |  .NET

Extracting Key-Value Pairs Using GdPicture.NET SDK

TUTORIALS  |  .NET • How To

How to Manipulate and Edit PDFs in .NET with PdfSharpCore