Syncfusion AI Assistant

How can I help you?

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

12 Feb 20267 minutes to read

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

Prerequisites

Create a new WPF app in Visual Studio

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

Install Blazor PDF Viewer NuGet packages

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

NOTE

Ensure the package Microsoft.AspNetCore.Components.WebView.Wpf is 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 hosts 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.

  • Press Ctrl+` to open the integrated terminal in Visual Studio Code.
  • Ensure the current directory contains the WPF project .csproj file.
  • Run the following commands to install the required packages. This adds the PDF Viewer, theme, and the BlazorWebView host control.
dotnet add package Syncfusion.Blazor.SfPdfViewer -v 33.1.44
dotnet add package Syncfusion.Blazor.Themes -v 33.1.44
dotnet add package Microsoft.AspNetCore.Components.WebView.Wpf
dotnet restore

NOTE

Syncfusion® Blazor components are available on nuget.org. See NuGet packages for package details.

NOTE

Ensure the package Microsoft.AspNetCore.Components.WebView.Wpf is 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 initializes the Blazor runtime and loads 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 app

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

WPF Blazor HybridApp SfPdfViewer rendering in browser

NOTE

View the sample on GitHub.

See also