View PDF files using the PDF Viewer in a WPF Blazor Hybrid App

14 Oct 20257 minutes to read

This article explains how to add the Syncfusion® Blazor PDF Viewer component to a WPF Blazor Hybrid App using Visual Studio or Visual Studio Code. The result is a desktop application (WPF) that hosts Blazor UI inside a BlazorWebView control.

Prerequisites

Create a new WPF app in Visual Studio

Create a WPF application using Visual Studio 2022 with the WPF project template. The app will later host Blazor components via BlazorWebView. For reference, see Microsoft Blazor tooling or the Syncfusion® Blazor Extension.

Install Blazor PDF Viewer NuGet package in WPF App

To add Blazor PDF Viewer component in the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install

NOTE

Ensure that the package Microsoft.AspNetCore.Components.WebView.Wpf updated to version 8.0.16.

WPF Blazor App SfPdfViewer NuGet package reference

Prerequisites

Create a new WPF app in Visual Studio Code

Create a WPF desktop project (not a WPF Blazor HybridApp) using the .NET CLI in Visual Studio Code. This WPF project will host Blazor UI through BlazorWebView. For guidance, see Microsoft templates or the Syncfusion® Blazor Extension.

dotnet new wpf -n WPFBlazorHybridApp

Install Syncfusion® Blazor SfPdfViewer and Themes NuGet packages in the app

Install the required NuGet packages in the WPF project that will host the Blazor UI.

dotnet add package Syncfusion.Blazor.SfPdfViewer -v 31.2.12
dotnet add package Syncfusion.Blazor.Themes -v 31.2.12
dotnet add package Microsoft.AspNetCore.Components.WebView.Wpf
dotnet restore

NOTE

Syncfusion® Blazor components are available on nuget.org. See NuGet packages for the list of available packages and component details.

NOTE

Ensure that the package Microsoft.AspNetCore.Components.WebView.Wpf updated to version 8.0.16.

Register Syncfusion® Blazor service

The WPF project must target Windows and enable WPF. A typical project file looks like the following.

<Project Sdk="Microsoft.NET.Sdk.Razor">

    ....

</Project>

Create an _Imports.razor and add the component namespace

@using Microsoft.AspNetCore.Components.Web
@using Syncfusion.Blazor.SfPdfViewer

Register Syncfusion Blazor services and BlazorWebView in ~/MainWindow.xaml.cs so that the WPF window can host Blazor components.

....

using Microsoft.Extensions.DependencyInjection;
using Syncfusion.Blazor;
        ....
            InitializeComponent();
            ServiceCollection services = new ServiceCollection();
            services.AddWpfBlazorWebView();
            services.AddMemoryCache();
            services.AddSyncfusionBlazor();
            Resources.Add("services", services.BuildServiceProvider());
            ....

Create wwwroot folder and index.html file

  • Create a new folder named wwwroot in the WPF project root.

  • Inside wwwroot, create an index.html host page for the Blazor UI. This host page is required by BlazorWebView to initialize the Blazor runtime and load static assets (themes and scripts). A basic index.html might look like the following:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>WPF Blazor Hybrid App</title>
    <base href="/" />
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
</head>
<body>
    <div id="app">Loading...</div>
    <script src="_framework/blazor.webview.js"></script>
    <script src="_content/Syncfusion.Blazor.SfPdfViewer/scripts/syncfusion-blazor-sfpdfviewer.min.js" type="text/javascript"></script>
</body>
</html>

NOTE

Ensure that the PDF Viewer static assets (themes and scripts) are loaded properly.

Adding Blazor PDF Viewer component

Create a Razor component (for example, Main.razor) in the project and add the Syncfusion® PDF Viewer component to it.

@using Syncfusion.Blazor.SfPdfViewer;

<SfPdfViewer2 DocumentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
              Height="100%"
              Width="100%">
</SfPdfViewer2>

NOTE

If the DocumentPath property is not set, the PDF Viewer renders without loading a document. Users can use the Open toolbar option to browse and open a PDF.

Integrate Blazor into MainWindow.xaml

  • Open MainWindow.xaml.
  • Add the Microsoft.AspNetCore.Components.WebView.Wpf namespace.
  • Embed the BlazorWebView control, set HostPage to wwwroot/index.html, and map a RootComponent that matches the Razor component type and the selector in index.html (#app).
<Window x:Class="WPFBlazorHybridApp.MainWindow"
        ....
        xmlns:blazor="clr-namespace:Microsoft.AspNetCore.Components.WebView.Wpf;assembly=Microsoft.AspNetCore.Components.WebView.Wpf"
        ....
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <blazor:BlazorWebView HostPage="wwwroot\index.html" Services="{DynamicResource services}">
            <blazor:BlazorWebView.RootComponents>
                <blazor:RootComponent Selector="#app" ComponentType="{x:Type local:YourRazorFileName}" />
                <!-- Replace 'YourRazorFileName' with the actual Razor component class (e.g., Main) in your project's namespace -->
            </blazor:BlazorWebView.RootComponents>
        </blazor:BlazorWebView>
    </Grid>
</Window>

Run the application

Run the WPF application. The Syncfusion® Blazor PDF Viewer renders inside the WPF window.

WPF Blazor HybridApp SfPdfViewer rendering in browser

View the sample on GitHub.

See also