What does your education app need? A PDF Viewer! Here’s how to add one to your .NET MAUI app with ease.
Do you remember those times when you needed to study some materials but your printer ran out of ink right when you needed it the most? 🥲 (I’ve been there too.) But imagine if you had the option to access all those materials digitally for your academic preparation. That one thing could’ve saved you from not having your materials ready just because you couldn’t print them.
Technology keeps evolving to make our daily lives less stressful and give us easier access to the tools we need—and education is no exception. Educational apps can now include entire ecosystems where documents can be opened directly in PDF format. That’s exactly what we’ll explore in this article.
We’ll take a look at the Progress Telerik UI for .NET MAUI PDF Viewer, a tool that makes it super easy to display PDFs right inside your .NET MAUI apps—perfect for education and beyond!
The Telerik UI for .NET MAUI PDF Viewer allows users to open and view PDF documents directly within their .NET MAUI applications. It includes everything you need for a smooth implementation experience—from comprehensive support and detailed documentation to demos and explanatory resources.
This control is part of the Telerik UI for .NET MAUI library, which includes more than 60 professionally designed UI components to help you build powerful and modern cross-platform applications.
The PDF Viewer is composed of two main elements:
By default, the PDF Viewer Toolbar provides the following items, as detailed in the table below:
And the best part? In addition to the predefined items, if you need something that’s not already included, you can easily add your own custom items to the toolbar to tailor the experience to your specific needs! 😎 You can find more information about how to customize items here.
Below is an example of how the component would appear across your different platform apps. 😎
Now that you’ve seen the incredible results you can achieve, let’s walk through how to bring it to life! You can get up and running in just a few easy steps using the free trial of Telerik.
First make sure you have the following prerequisites ready:
Once all the prerequisites are set, you’re ready to start!
Go to your XAML file, and add the following namespace:
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
<telerik:RadPdfViewer x:Name="pdfViewer" AutomationId="pdfViewer"/>
Head over to your MauiProgram.cs file and, inside the CreateMauiApp method, add .UseTelerik() to enable Telerik controls. Place it right above .UseMauiApp<App>(), like this:
using Telerik.Maui.Controls.Compatibility;
public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder
.UseTelerik()
.UseMauiApp<App>()
.ConfigureFonts(fonts =>
{
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
});
return builder.Build();
}
}
To display the PDF document, simply assign the file to the .Source property of the PdfViewer component.
This property expects a delegate of type Func<CancellationToken, Task<Stream>>, which should return a Stream containing the content of the PDF file you want to display in the viewer.
Let’s take a look at how to display a PDF document embedded as a resource:
Func<CancellationToken, Task<Stream>> streamFunc = ct => Task.Run(() =>
{
Assembly assembly = typeof(GettingStartedXaml).Assembly;
string fileName = assembly.GetManifestResourceNames().FirstOrDefault(n => n.Contains("pdf-hello-sample.pdf"));
Stream stream = assembly.GetManifestResourceStream(fileName);
return stream;
});
this.pdfViewer.Source = streamFunc;
You can easily load a PDF from an online source using one of the following approaches:
🔹 Option 1 – Assign the URI directly:
Uri uri = this.GetUri();
this.pdfViewer.Source = uri;🔹 Option 2 – Use the UriDocumentSource class:
Uri uri = this.GetUri();
this.pdfViewer.Source = new UriDocumentSource(uri);
Choose the one that best suits your implementation needs. 😉
You can also display a document stored locally on the device! To do this, simply pass the file path to the Source property like so:
this.pdfViewer.Source = filePath;
To make sure the file exists, you can validate the path using the following line:
System.IO.File.OpenRead(filePath);
✍️ Keep in mind that your app must have the necessary permissions to access local storage.
It’s very simple to display a document from a byte array—you can do it like this:
byte[] bytes = this.GetBytes();
this.pdfViewer.Source = bytes;
Or by using the ByteArrayDocumentSource class:
byte[] bytes = this.GetBytes();
this.pdfViewer.Source = new ByteArrayDocumentSource(bytes, true);
You can choose between two layout modes, which can be configured using the LayoutMode property of the component:
You can switch between layout modes using the ToggleLayoutModeCommand or the ToggleLayoutModeToolbarItem.
You can also work with password-protected PDF documents. 😎
To let the viewer know that the document requires a password to be accessed, you just need to handle the SourcePasswordNeeded event. This event provides two parameters:
You can implement it as follows:
🔹PDF Viewer Control Declaration
<telerik:RadPdfViewer x:Name="pdfViewer" SourcePasswordNeeded="pdfViewer_SourcePasswordNeeded" />
🔹 Event Handler Implementation
private void pdfViewer_SourcePasswordNeeded(object sender, Telerik.Windows.Documents.Fixed.FormatProviders.Pdf.Import.PasswordNeededEventArgs e)
{
e.Password = "my_user_password_here";
}
Yes! You can also work with links in the .NET MAUI PDF Viewer. 😎
You can do this by clicking on a hyperlink to open the browser, or by navigating to bookmarks within the same document!
To achieve this, you need to handle the LinkAnnotationTapped event, which is triggered when the user taps on a link. This event provides two parameters:
🔹 sender (object type): Although it’s a generic object, in this context it represents the RadPdfViewer control.
🔹 LinkAnnotationTappedEventArgs: Provides information about the tapped link and lets you control its behavior. It includes:
Step 1 – Declare the PDF Viewer
<telerik:RadPdfViewer x:Name="pdfViewer" LinkAnnotationTapped="LinkTapped" />
Step 2 – Implement the handler for the LinkAnnotationTapped event
private void LinkTapped(object sender, Telerik.Maui.Controls.PdfViewer.Annotations.LinkAnnotationTappedEventArgs e)
{
if (e.LinkAnnotation.Action is UriAction uriAction)
{
e.Handled = true;
Application.Current.MainPage.DisplayAlert("Confirm", "Are you sure you want to navigate", "Yes", "No").ContinueWith(t =>
{
bool shouldNavigateAway = t.Status == TaskStatus.RanToCompletion ? t.Result : false;
if (shouldNavigateAway)
{
Dispatcher.Dispatch(() =>
{
Launcher.OpenAsync(uriAction.Uri);
});
}
});
}
}
That’s it! You’ve successfully integrated link annotations into your .NET MAUI app in just a few easy steps!
In this article, you learned how to easily implement the PDF Viewer in your .NET MAUI apps, as well as explore powerful features like link annotations, layout modes, different ways to display PDF files and other super useful capabilities!
✨ I hope you enjoyed it and that from now on you’ll start integrating it into your .NET MAUI applications to give your users an even better and more polished experience.
Remember, Telerik UI for .NET MAUI comes with a free 30-day trial.
If you have any questions, feel free to leave them in the comments. 💚💕
See you next time! 🙋♀️
Leomaris Reyes is a Software Engineer from the Dominican Republic, with more than 5 years of experience. A Xamarin Certified Mobile Developer, she is also the founder of Stemelle, an entity that works with software developers, training and mentoring with a main goal of including women in Tech. Leomaris really loves learning new things! 💚💕 You can follow her: Twitter, LinkedIn , AskXammy and Medium.