Syncfusion AI Assistant

How can I help you?

Using Smart PDF Viewer Component in the Windows Forms app

14 Oct 20258 minutes to read

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

Prerequisites

Create a new WinForms app in Visual Studio

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

Install Blazor Smart PDF Viewer NuGet package in WinForms App

To add Blazor Smart 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.WindowsForms updated to version 8.0.16.

WinForms Blazor App Smart Pdfviewer NuGet package reference

Prerequisites

Create a new WinForms app in Visual Studio Code

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

dotnet new winforms -n WinFormsBlazorHybridApp

Install Syncfusion® Blazor Smart PDF Viewer and Themes NuGet packages in the app

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

dotnet add package Syncfusion.Blazor.SfSmartPdfViewer -v 33.1.44
dotnet add package Syncfusion.Blazor.Themes -v 33.1.44
dotnet add package Microsoft.AspNetCore.Components.WebView.WindowsForms

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.WindowsForms updated to version 8.0.16.

Register Syncfusion® Blazor service

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

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

    ....

</Project>

Create a Component folder, add an _Imports.razor file in it, and include the required component namespaces within that folder.

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

Create wwwroot folder and index.html file

  • Create a new folder named wwwroot in the WinForms 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" />
    <title>WinForms 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.SfSmartPdfViewer/scripts/syncfusion-blazor-sfsmartpdfviewer.min.js" type="text/javascript"></script>
</body>
</html>

NOTE

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

To Configure Azure OpenAI Service

This section is required only when enabling AI-powered features in Smart PDF Viewer (such as document summarization, smart redaction, or smart fill). It is not required for basic PDF rendering.

In Visual Studio, Go to Tools → NuGet Package Manager → Package Manager Console. Run these commands one by one:

Install-Package Azure.AI.OpenAI
Install-Package Microsoft.Extensions.AI
Install-Package Microsoft.Extensions.AI.OpenAI -Version 9.8.0-preview.1.25412.6

In Visual Studio Code, open the terminal and run these commands:

dotnet add package Azure.AI.OpenAI
dotnet add package Microsoft.Extensions.AI
dotnet add package Microsoft.Extensions.AI.OpenAI --version 9.8.0-preview.1.25412.6

Register Syncfusion Blazor services and BlazorWebView in ~/Form1.cs so that the WinForms window can host Blazor components.

namespace WinFormsBlazorHybridApp;
using Microsoft.AspNetCore.Components.WebView.WindowsForms;
using Microsoft.Extensions.DependencyInjection;
using Azure.AI.OpenAI;
using Microsoft.Extensions.AI;
using Syncfusion.Blazor;
using Syncfusion.Blazor.AI;
using System.ClientModel;
using WinFormsBlazorHybridApp.Components;
....
        InitializeComponent();
        ServiceCollection services = new ServiceCollection();
        services.AddWindowsFormsBlazorWebView();
        services.AddMemoryCache();
        services.AddSyncfusionBlazor();
        string azureOpenAiKey = "api-key";
        string azureOpenAiEndpoint = "endpoint URL";
        string azureOpenAiModel = "deployment-name";
        AzureOpenAIClient azureOpenAIClient = new AzureOpenAIClient(new Uri(azureOpenAiEndpoint), new ApiKeyCredential(azureOpenAiKey));
        IChatClient azureOpenAiChatClient = azureOpenAIClient.GetChatClient(azureOpenAiModel).AsIChatClient();
        services.AddChatClient(azureOpenAiChatClient);
        services.AddSingleton<IChatInferenceService, SyncfusionAIService>();
        BlazorWebView blazorWebView = new BlazorWebView()
        {
            HostPage = "wwwroot\\index.html",
            Services = services.BuildServiceProvider(),
            Dock = DockStyle.Fill
        };
        blazorWebView.RootComponents.Add<YourRazorFileName>("#app");
        // Replace 'YourRazorFileName' with the actual Razor component class (e.g., Main) in your project's namespace
        this.Controls.Add(blazorWebView);
....

Adding Blazor Smart PDF Viewer component

Create a Razor component (for example, SmartPDFViewer.razor) in the project and add the Syncfusion® Smart PDF Viewer component to it within the Component folder

@using Syncfusion.Blazor.SmartPdfViewer;

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

Run the application

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

WinForms Blazor HybridApp Smart PDF Viewer rendering in browser

View the sample on GitHub.

See also