From 6cd0e612f2b487c974b2e3b431d3de744f1e31da Mon Sep 17 00:00:00 2001 From: SaranSF4541 Date: Thu, 11 Jun 2026 22:59:42 +0530 Subject: [PATCH 01/18] Task(1032539) - updating getting started page --- .../asp-net-core/getting-started-core.md | 22 +++--- .../asp-net-mvc/getting-started.md | 26 +++---- .../client-side-application.md | 18 +++-- .../blazor/getting-started/web-app.md | 41 +++++++----- .../javascript-es5/getting-started.md | 67 +++++++++---------- .../vue/getting-started-vue-3.md | 59 +++++++++++++--- 6 files changed, 132 insertions(+), 101 deletions(-) diff --git a/Document-Processing/Word/Word-Processor/asp-net-core/getting-started-core.md b/Document-Processing/Word/Word-Processor/asp-net-core/getting-started-core.md index 9dbab810cb..822c061408 100644 --- a/Document-Processing/Word/Word-Processor/asp-net-core/getting-started-core.md +++ b/Document-Processing/Word/Word-Processor/asp-net-core/getting-started-core.md @@ -38,7 +38,7 @@ Alternatively, you can utilize the following package manager command to achieve {% tabs %} {% highlight C# tabtitle="Package Manager" %} -Install-Package Syncfusion.EJ2.AspNet.Core -Version {{ site.releaseversion }} +Install-Package Syncfusion.EJ2.AspNet.Core {% endhighlight %} {% endtabs %} @@ -59,18 +59,15 @@ Open `~/Views/_ViewImports.cshtml` file and import the `Syncfusion.EJ2` TagHelpe ### Add Themes and Script References -Here, the theme and scripts are referenced using CDN inside the `` of `~/Views/Shared/_Layout.cshtml` file as follows, +Include the required stylesheet and script references in the `` section of `~/Views/Shared/_Layout.cshtml` file to apply proper layout and theme styling. {% tabs %} {% highlight cshtml tabtitle="~/_Layout.cshtml" %} - - ... - - - - - + + + + {% endhighlight %} {% endtabs %} @@ -84,11 +81,8 @@ Also, register the script manager `` at the end of `` in the {% tabs %} {% highlight cshtml tabtitle="~/_Layout.cshtml" %} - - ... - - - + + {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/Word/Word-Processor/asp-net-mvc/getting-started.md b/Document-Processing/Word/Word-Processor/asp-net-mvc/getting-started.md index a37a097744..288794fe0d 100644 --- a/Document-Processing/Word/Word-Processor/asp-net-mvc/getting-started.md +++ b/Document-Processing/Word/Word-Processor/asp-net-mvc/getting-started.md @@ -37,7 +37,7 @@ Alternatively, you can utilize the following package manager command to achieve {% tabs %} {% highlight C# tabtitle="Package Manager" %} -Install-Package Syncfusion.EJ2.MVC5 -Version {{ site.ej2version }} +Install-Package Syncfusion.EJ2.MVC5 {% endhighlight %} {% endtabs %} @@ -46,14 +46,12 @@ N> This package includes dependencies such as [Newtonsoft.Json](https://www.nug ### Add namespace -Add **Syncfusion.EJ2** namespace reference in `Web.config` under `Views` folder. +Add the **Syncfusion.EJ2** namespace reference to the `` section in the `~/Views/Web.config` file. {% tabs %} {% highlight C# tabtitle="Web.config" %} - - - + {% endhighlight %} {% endtabs %} @@ -65,13 +63,10 @@ Here, the theme and script is referred using CDN inside the `` of `~/Views {% tabs %} {% highlight cshtml tabtitle="~/_Layout.cshtml" %} - - ... - - - - - + + + + {% endhighlight %} {% endtabs %} @@ -85,11 +80,8 @@ Also, register the script manager `EJS().ScriptManager()` at the end of `` {% tabs %} {% highlight cshtml tabtitle="~/_Layout.cshtml" %} - - ... - - @Html.EJS().ScriptManager() - + +@Html.EJS().ScriptManager() {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/Word/Word-Processor/blazor/getting-started/client-side-application.md b/Document-Processing/Word/Word-Processor/blazor/getting-started/client-side-application.md index ca1fde0386..3f735eb981 100644 --- a/Document-Processing/Word/Word-Processor/blazor/getting-started/client-side-application.md +++ b/Document-Processing/Word/Word-Processor/blazor/getting-started/client-side-application.md @@ -41,8 +41,8 @@ Alternatively, you can utilize the following package manager command to achieve {% tabs %} {% highlight C# tabtitle="Package Manager" %} -Install-Package Syncfusion.Blazor.WordProcessor -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +Install-Package Syncfusion.Blazor.WordProcessor +Install-Package Syncfusion.Blazor.Themes {% endhighlight %} {% endtabs %} @@ -86,8 +86,8 @@ cd BlazorApp {% highlight c# tabtitle="Package Manager" %} -dotnet add package Syncfusion.Blazor.WordProcessor -v {{ site.releaseversion }} -dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.WordProcessor +dotnet add package Syncfusion.Blazor.Themes dotnet restore {% endhighlight %} @@ -129,7 +129,6 @@ builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder. builder.Services.AddSyncfusionBlazor(); await builder.Build().RunAsync(); -.... {% endhighlight %} {% endtabs %} @@ -141,11 +140,10 @@ Add the following stylesheet and script to the head section of **~/index.html** {% tabs %} {% highlight html tabtitle="~/index.html" %} - - .... - - - + + + + {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/Word/Word-Processor/blazor/getting-started/web-app.md b/Document-Processing/Word/Word-Processor/blazor/getting-started/web-app.md index 26292888a1..5d13af366c 100644 --- a/Document-Processing/Word/Word-Processor/blazor/getting-started/web-app.md +++ b/Document-Processing/Word/Word-Processor/blazor/getting-started/web-app.md @@ -40,8 +40,8 @@ Alternatively, you can utilize the following package manager command to achieve {% tabs %} {% highlight C# tabtitle="Package Manager" %} -Install-Package Syncfusion.Blazor.WordProcessor -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +Install-Package Syncfusion.Blazor.WordProcessor +Install-Package Syncfusion.Blazor.Themes {% endhighlight %} {% endtabs %} @@ -88,8 +88,8 @@ If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need t {% highlight c# tabtitle="Package Manager" %} -dotnet add package Syncfusion.Blazor.WordProcessor -v {{ site.releaseversion }} -dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.WordProcessor +dotnet add package Syncfusion.Blazor.Themes dotnet restore {% endhighlight %} @@ -126,13 +126,14 @@ Register the Syncfusion® Blazor service in {% tabs %} {% highlight c# tabtitle="Program.cs" %} -.... +// Other code Snippet + using Syncfusion.Blazor; -.... +// Register Syncfusion Blazor services along with other service registrations builder.Services.AddSyncfusionBlazor(); -.... +// Other code Snippet {% endhighlight %} {% endtabs %} @@ -141,20 +142,26 @@ N> If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, registe ### Add Themes and Script References -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). + +Include the stylesheet reference in the `` section of the **~/Components/App.razor** file as shown below: + +{% tabs %} +{% highlight razor tabtitle="~/App.razor" %} + + + + +{% endhighlight %} +{% endtabs %} + +Include the script reference at the end of the `` section in the **~/Components/App.razor** file. {% tabs %} {% highlight razor tabtitle="~/App.razor" %} - - .... - - -.... - - .... - - + + {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/getting-started.md b/Document-Processing/Word/Word-Processor/javascript-es5/getting-started.md index 45806b9d6a..da71848b2d 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/getting-started.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/getting-started.md @@ -45,41 +45,38 @@ Add the following CDN references inside the `` section of your `index.html {% tabs %} {% highlight html tabtitle="index.html" %} -... - - Syncfusion JavaScript Document Editor - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -... +Syncfusion JavaScript Document Editor + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/Word/Word-Processor/vue/getting-started-vue-3.md b/Document-Processing/Word/Word-Processor/vue/getting-started-vue-3.md index ae90fbe675..daba938f36 100644 --- a/Document-Processing/Word/Word-Processor/vue/getting-started-vue-3.md +++ b/Document-Processing/Word/Word-Processor/vue/getting-started-vue-3.md @@ -21,16 +21,61 @@ This article provides a step-by-step guide for setting up a [Vite](https://vitej ### Create a Vue application -To create a new Vue application, run the following command. +Use [Vite](https://vitejs.dev/) to quickly scaffold a Vue 3 project. Run one of the following commands to create a new project: ```bash -npm create vite@latest documenteditor-app -- --template vue +npm create vite@latest ``` -Next, you will be prompted with "Install with npm and start now?". Select **Yes**. Move into the created project using the following command: +or ```bash -cd documenteditor-app +yarn create vite +``` + +After running the command, follow the interactive prompts shown below to configure the project: + +Step 1: Define the project name: Specify the project name directly. This guide uses `documenteditor-app`. + +```bash +? Project name: » documenteditor-app +``` + +Step 2: Select `Vue` as the framework to target Vue 3. + +```bash +? Select a framework: » - Use arrow-keys. Return to submit. +Vanilla +> Vue + React + Preact + Lit + Svelte + Others +``` + +Step 3: Choose `JavaScript` as the variant to build the Vite project with JavaScript and Vue. + +```bash +? Select a variant: » - Use arrow-keys. Return to submit. +> JavaScript + TypeScript + Customize with create-vue ↗ + Nuxt ↗ +``` + +Step 4: After the scaffold completes, install the project dependencies: + +```bash +cd documenteditor-app +npm install +``` + +or + +```bash +cd documenteditor-app +yarn install ``` ### Install the Document Editor packages @@ -45,12 +90,11 @@ To install the Document Editor component, use the following command: ### Add CSS reference -Add the following Document Editor and dependent component style references to the ` {% endhighlight %} {% endtabs %} From db3106def671a70beeeb2d27858d49ae6b3b587b Mon Sep 17 00:00:00 2001 From: ThilagarajSF5012 Date: Fri, 19 Jun 2026 13:31:25 +0530 Subject: [PATCH 02/18] Updated the getting started Page for UWP and MAUI pdfviewer --- .../PDF/PDF-Viewer/maui/Getting-Started.md | 434 +++++++----------- .../uwp/Concepts-and-Features/Viewing-PDF.md | 169 +++++++ .../PDF/PDF-Viewer/uwp/Getting-Started.md | 223 ++++----- .../Getting-Started_img4.png | Bin 0 -> 53483 bytes 4 files changed, 426 insertions(+), 400 deletions(-) create mode 100644 Document-Processing/PDF/PDF-Viewer/uwp/Getting-Started_images/Getting-Started_img4.png diff --git a/Document-Processing/PDF/PDF-Viewer/maui/Getting-Started.md b/Document-Processing/PDF/PDF-Viewer/maui/Getting-Started.md index 0f7ee4352e..fd466e1d13 100644 --- a/Document-Processing/PDF/PDF-Viewer/maui/Getting-Started.md +++ b/Document-Processing/PDF/PDF-Viewer/maui/Getting-Started.md @@ -35,37 +35,38 @@ Before proceeding, ensure the following are in place: ## Step 2: Install the Syncfusion® MAUI PDF Viewer NuGet Package 1. In **Solution Explorer**, right-click the project and choose **Manage NuGet Packages**. -2. Search for [Syncfusion.Maui.PdfViewer](https://www.nuget.org/packages/Syncfusion.Maui.PdfViewer) and install the latest version.` -3. Ensure the necessary dependencies are installed correctly and the project is restored. +2. Search for [Syncfusion.Maui.PdfViewer](https://www.nuget.org/packages/Syncfusion.Maui.PdfViewer) and install the latest version. +3. Ensure the dependencies are installed and the project is restored. ## Step 3: Register the Syncfusion® Core Handler -[Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core/) is a dependency for all MAUI Syncfusion controls. This package will be automatically installed as a dependency when [Syncfusion.Maui.PdfViewer](https://www.nuget.org/packages/Syncfusion.Maui.PdfViewer) NuGet is installed. Register the Syncfusion® core handler in the `MauiProgram.cs` file. +[Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core/) is automatically installed as a dependency when [Syncfusion.Maui.PdfViewer](https://www.nuget.org/packages/Syncfusion.Maui.PdfViewer) NuGet is installed. +1. Add the following namespace in your `MauiProgram.cs` file. {% tabs %} -{% highlight c# tabtitle="MauiProgram.cs" hl_lines="1 17" %} - +{% highlight c# tabtitle="MauiProgram.cs" %} using Syncfusion.Maui.Core.Hosting; +{% endhighlight %} +{% endtabs %} + +2. Register the Syncfusion core handler in your `MauiProgram.cs` file to use Syncfusion controls. +{% tabs %} +{% highlight c# tabtitle="MauiProgram.cs" hl_lines="12" %} -namespace PdfViewerExample -{ - public class MauiProgram + public static MauiApp CreateMauiApp() { - public static MauiApp CreateMauiApp() - { - var builder = MauiApp.CreateBuilder(); - builder - .UseMauiApp() - .ConfigureFonts(fonts => - { - fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); - }); - - builder.ConfigureSyncfusionCore(); - return builder.Build(); - } + var builder = MauiApp.CreateBuilder(); + builder + .UseMauiApp() + .ConfigureFonts(fonts => + { + fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); + }); + + builder.ConfigureSyncfusionCore(); + return builder.Build(); } -} + {% endhighlight %} {% endtabs %} @@ -73,25 +74,19 @@ namespace PdfViewerExample Open the `MainPage.xaml` file and follow the steps below. -1. Import the control namespace `Syncfusion.Maui.PdfViewer`, -2. Add the [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html) control inside the `` tag. -3. Name the PDF viewer control as `pdfViewer`. - +1. Add the following namespace in your MainPage.xaml file. {% tabs %} {% highlight xaml tabtitle="MainPage.xaml" %} - - +xmlns:syncfusion="clr-namespace:Syncfusion.Maui.PdfViewer;assembly=Syncfusion.Maui.PdfViewer" +{% endhighlight %} +{% endtabs %} - - - - - +2. Add the [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html) control. +{% tabs %} +{% highlight xaml tabtitle="MainPage.xaml" %} + {% endhighlight %} {% endtabs %} @@ -99,87 +94,61 @@ Open the `MainPage.xaml` file and follow the steps below. 1. From the solution explorer of the project, add a new folder to the project named `Assets` and add the PDF document you need to load into the PDF viewer. Here, a PDF document named `PDF_Succinctly.pdf` is used. 2. In Visual Studio, right-click the added PDF document and set its `Build Action` as `Embedded Resource`. -3. In this example, we will load the PDF document through MVVM binding. Create a new C# file named `PdfViewerViewModel.cs` and add the following code snippet. +3. In this example, the PDF document is loaded using MVVM binding. Create a new C# file named `PdfViewerViewModel.cs` and add the following code snippet. {% tabs %} {% highlight c# tabtitle="PdfViewerViewModel.cs" %} using System.Reflection; - using System.ComponentModel; - namespace PdfViewerExample + internal class PdfViewerViewModel { - class PdfViewerViewModel : INotifyPropertyChanged - { - private Stream pdfDocumentStream; - - /// - /// Occurs when a property value changes. - /// - public event PropertyChangedEventHandler? PropertyChanged; + private Stream pdfDocumentStream; - /// - /// Gets or sets the stream of the currently loaded PDF document. - /// - public Stream PdfDocumentStream + /// + /// Gets or sets the stream of the currently loaded PDF document. + /// + public Stream PdfDocumentStream + { + get { - get - { - return pdfDocumentStream; - } - set - { - pdfDocumentStream = value; - OnPropertyChanged(nameof(PdfDocumentStream)); - } + return pdfDocumentStream; } - - /// - /// Initializes a new instance of the class. - /// - public PdfViewerViewModel() + set { - // Load the embedded PDF document stream. - pdfDocumentStream = typeof(App).GetTypeInfo().Assembly.GetManifestResourceStream("PdfViewerExample.Assets.PDF_Succinctly.pdf"); + pdfDocumentStream = value; } - - /// - /// Raises the event for the specified property name. - /// - /// The name of the property that changed. - public void OnPropertyChanged(string name) - { - PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name)); - } + } + + /// + /// Initializes a new instance of the class. + /// + public PdfViewerViewModel() + { + // Load the embedded PDF document stream. + // Update the resource path to match your project namespace (replace PdfViewerExample with your actual project name): + pdfDocumentStream = typeof(App).GetTypeInfo().Assembly.GetManifestResourceStream("PdfViewerExample.Assets.PDF_Succinctly.pdf"); } } {% endhighlight %} {% endtabs %} -4. Open the `MainPage.xaml` file again and add the default namespace of the created .NET MAUI project and name it as `local`. Here the default namespace of the demo sample `PdfViewerExample` is used. -5. Set an instance of the `PdfViewerViewModel` class as the `BindingContext` of the `ContentPage`. -6. Bind the PDF viewer's [DocumentSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_DocumentSource) to the `PdfDocumentStream` property of the `PdfViewerViewModel` class. - +4. Open the `MainPage.xaml` file again and add the namespace `PdfViewerExample` and name it as `local`. {% tabs %} {% highlight xaml tabtitle="MainPage.xaml" %} + xmlns:local="clr-namespace:PdfViewerExample" +{% endhighlight %} +{% endtabs %} - - - +5. Set an instance of the `PdfViewerViewModel` class as the `BindingContext`. Bind the PDF viewer's [DocumentSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_DocumentSource) to the `PdfDocumentStream` property of the `PdfViewerViewModel` class. +{% tabs %} +{% highlight xaml tabtitle="MainPage.xaml" %} - - - - - + {% endhighlight %} {% endtabs %} @@ -214,37 +183,38 @@ Before proceeding, ensure the following are in place: ## Step 2: Install the Syncfusion® MAUI PDF Viewer NuGet Package 1. In **Solution Explorer**, right-click the project and choose **Add NuGet Package**. -2. Search for [Syncfusion.Maui.PdfViewer](https://www.nuget.org/packages/Syncfusion.Maui.PdfViewer) and install the latest version.` -3. Ensure the necessary dependencies are installed correctly, and the project is restored. +2. Search for [Syncfusion.Maui.PdfViewer](https://www.nuget.org/packages/Syncfusion.Maui.PdfViewer) and install the latest version. +3. Ensure the dependencies are installed, and the project is restored. ## Step 3: Register the Syncfusion® Core Handler -[Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core/) is a dependency for all MAUI Syncfusion controls. This package will be automatically installed as a dependency when [Syncfusion.Maui.PdfViewer](https://www.nuget.org/packages/Syncfusion.Maui.PdfViewer) NuGet is installed. Register the Syncfusion® core handler in the `MauiProgram.cs` file. +[Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core/) will be automatically installed as a dependency when [Syncfusion.Maui.PdfViewer](https://www.nuget.org/packages/Syncfusion.Maui.PdfViewer) NuGet is installed. +1. Add the following namespace in your `MauiProgram.cs` file. {% tabs %} -{% highlight c# tabtitle="MauiProgram.cs" hl_lines="1 17" %} - +{% highlight c# tabtitle="MauiProgram.cs" %} using Syncfusion.Maui.Core.Hosting; +{% endhighlight %} +{% endtabs %} -namespace PdfViewerExample -{ - public class MauiProgram +2. Register the Syncfusion core handler in your `MauiProgram.cs` file to use Syncfusion controls. +{% tabs %} +{% highlight c# tabtitle="MauiProgram.cs" hl_lines="12" %} + + public static MauiApp CreateMauiApp() { - public static MauiApp CreateMauiApp() - { - var builder = MauiApp.CreateBuilder(); - builder - .UseMauiApp() - .ConfigureFonts(fonts => - { - fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); - }); - - builder.ConfigureSyncfusionCore(); - return builder.Build(); - } + var builder = MauiApp.CreateBuilder(); + builder + .UseMauiApp() + .ConfigureFonts(fonts => + { + fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); + }); + + builder.ConfigureSyncfusionCore(); + return builder.Build(); } -} + {% endhighlight %} {% endtabs %} @@ -252,24 +222,20 @@ namespace PdfViewerExample Open the `MainPage.xaml` file and follow the steps below. -1. Import the control namespace `Syncfusion.Maui.PdfViewer`, -2. Add the [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html) control inside the `` tag. -3. Name the PDF viewer control as `pdfViewer`. - +1. Add the following namespace in your MainPage.xaml file. {% tabs %} {% highlight xaml tabtitle="MainPage.xaml" %} - - +xmlns:syncfusion="clr-namespace:Syncfusion.Maui.PdfViewer;assembly=Syncfusion.Maui.PdfViewer" +{% endhighlight %} +{% endtabs %} + +2. Add the [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html) control. + +{% tabs %} +{% highlight xaml tabtitle="MainPage.xaml" %} - - - - - + {% endhighlight %} {% endtabs %} @@ -288,26 +254,17 @@ Open the `MainPage.xaml` file and follow the steps below. {% endhighlight %} {% endtabs %} +3. In this example, the PDF document is loaded using MVVM binding. Create a new C# file named `PdfViewerViewModel.cs` and add the following code snippet. -3. In this example, we will load the PDF document through MVVM binding. Create a new C# file named `PdfViewerViewModel.cs` and add the following code snippet. - -{% tabs %} -{% highlight c# tabtitle="PdfViewerViewModel.cs" %} - -using System.Reflection; -using System.ComponentModel; - -namespace PdfViewerExample -{ - class PdfViewerViewModel : INotifyPropertyChanged + {% tabs %} + {% highlight c# tabtitle="PdfViewerViewModel.cs" %} + + using System.Reflection; + + internal class PdfViewerViewModel { private Stream pdfDocumentStream; - /// - /// Occurs when a property value changes. - /// - public event PropertyChangedEventHandler? PropertyChanged; - /// /// Gets or sets the stream of the currently loaded PDF document. /// @@ -320,7 +277,6 @@ namespace PdfViewerExample set { pdfDocumentStream = value; - OnPropertyChanged(nameof(PdfDocumentStream)); } } @@ -330,47 +286,31 @@ namespace PdfViewerExample public PdfViewerViewModel() { // Load the embedded PDF document stream. + // Update the resource path to match your project namespace (replace PdfViewerExample with your actual project name): pdfDocumentStream = typeof(App).GetTypeInfo().Assembly.GetManifestResourceStream("PdfViewerExample.Assets.PDF_Succinctly.pdf"); } - - /// - /// Raises the event for the specified property name. - /// - /// The name of the property that changed. - public void OnPropertyChanged(string name) - { - PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name)); - } } -} -{% endhighlight %} -{% endtabs %} + {% endhighlight %} + {% endtabs %} -4. Open the `MainPage.xaml` file again and add the default namespace of the created .NET MAUI project and name it as `local`. Here the default namespace of the demo sample `PdfViewerExample` is used. -5. Set an instance of the `PdfViewerViewModel` class as the `BindingContext` of the `ContentPage`. -6. Bind the PDF viewer's [DocumentSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_DocumentSource) to the `PdfDocumentStream` property of the `PdfViewerViewModel` class. +4. Open the `MainPage.xaml` file again and add the namespace `PdfViewerExample`and name it as `local`. {% tabs %} {% highlight xaml tabtitle="MainPage.xaml" %} + xmlns:local="clr-namespace:PdfViewerExample" +{% endhighlight %} +{% endtabs %} - - - +5. Set an instance of the `PdfViewerViewModel` class as the `BindingContext`. Bind the PDF viewer's [DocumentSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_DocumentSource) to the `PdfDocumentStream` property of the `PdfViewerViewModel` class. +{% tabs %} +{% highlight xaml tabtitle="MainPage.xaml" %} - - - - - - + + {% endhighlight %} {% endtabs %} @@ -404,8 +344,8 @@ Before proceeding, ensure the following are set up: ## Step 2: Install the Syncfusion® MAUI PDF Viewer NuGet Package 1. In **Solution Explorer,** right-click the project and choose **Manage NuGet Packages.** -2. Search for [Syncfusion.Maui.PdfViewer](https://www.nuget.org/packages/Syncfusion.Maui.PdfViewer/) and install the latest version. -3. Ensure the necessary dependencies are installed correctly, and the project is restored. If not, open the Terminal in Rider and manually run the following code. +2. Search for [Syncfusion.Maui.PdfViewer](https://www.nuget.org/packages/Syncfusion.Maui.PdfViewer) and install the latest version. +3. Ensure the dependencies are installed, and the project is restored. If not, open the Terminal in Rider and manually run the following code. {% tabs %} {% highlight c# tabtitle="terminal" %} @@ -417,32 +357,33 @@ dotnet restore ## Step 3: Register the Syncfusion® Core Handler -[Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core/) is a dependency for all MAUI Syncfusion controls. This package will be automatically installed as a dependency when [Syncfusion.Maui.PdfViewer](https://www.nuget.org/packages/Syncfusion.Maui.PdfViewer) NuGet is installed. Register the Syncfusion® core handler in the `MauiProgram.cs` file. +[Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core/) is a dependency for all MAUI Syncfusion controls. This package will be automatically installed as a dependency when [Syncfusion.Maui.PdfViewer](https://www.nuget.org/packages/Syncfusion.Maui.PdfViewer) NuGet is installed. +1. Add the following namespace in your `MauiProgram.cs` file. {% tabs %} -{% highlight c# tabtitle="MauiProgram.cs" hl_lines="1 17" %} - +{% highlight c# tabtitle="MauiProgram.cs" %} using Syncfusion.Maui.Core.Hosting; +{% endhighlight %} +{% endtabs %} -namespace PdfViewerExample -{ - public class MauiProgram +2. Register the Syncfusion core handler in your `MauiProgram.cs` file to use Syncfusion controls. +{% tabs %} +{% highlight c# tabtitle="MauiProgram.cs" hl_lines="12" %} + + public static MauiApp CreateMauiApp() { - public static MauiApp CreateMauiApp() - { - var builder = MauiApp.CreateBuilder(); - builder - .UseMauiApp() - .ConfigureFonts(fonts => - { - fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); - }); - - builder.ConfigureSyncfusionCore(); - return builder.Build(); - } + var builder = MauiApp.CreateBuilder(); + builder + .UseMauiApp() + .ConfigureFonts(fonts => + { + fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); + }); + + builder.ConfigureSyncfusionCore(); + return builder.Build(); } -} + {% endhighlight %} {% endtabs %} @@ -450,24 +391,19 @@ namespace PdfViewerExample Open the `MainPage.xaml` file and follow the steps below. -1. Import the control namespace `Syncfusion.Maui.PdfViewer`. -2. Add the [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html) control inside the `` tag. -3. Name the PDF viewer control as `pdfViewer`. - +1. Add the following namespace in your MainPage.xaml file. {% tabs %} {% highlight xaml tabtitle="MainPage.xaml" %} + xmlns:syncfusion="clr-namespace:Syncfusion.Maui.PdfViewer;assembly=Syncfusion.Maui.PdfViewer" +{% endhighlight %} +{% endtabs %} - - +2. Add the [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html) control. Name the PDF viewer control as `pdfViewer`. + +{% tabs %} +{% highlight xaml tabtitle="MainPage.xaml" %} - - - - - + {% endhighlight %} {% endtabs %} @@ -486,26 +422,17 @@ Open the `MainPage.xaml` file and follow the steps below. {% endhighlight %} {% endtabs %} +3. In this example, the PDF document is loaded using MVVM binding. Create a new C# file named `PdfViewerViewModel.cs` and add the following code snippet. -3. In this example, we will load the PDF document through MVVM binding. Create a new C# file named `PdfViewerViewModel.cs` and add the following code snippet. - -{% tabs %} -{% highlight c# tabtitle="PdfViewerViewModel.cs" %} - -using System.Reflection; -using System.ComponentModel; - -namespace PdfViewerExample -{ - class PdfViewerViewModel : INotifyPropertyChanged + {% tabs %} + {% highlight c# tabtitle="PdfViewerViewModel.cs" %} + + using System.Reflection; + + internal class PdfViewerViewModel { private Stream pdfDocumentStream; - /// - /// Occurs when a property value changes. - /// - public event PropertyChangedEventHandler? PropertyChanged; - /// /// Gets or sets the stream of the currently loaded PDF document. /// @@ -518,7 +445,6 @@ namespace PdfViewerExample set { pdfDocumentStream = value; - OnPropertyChanged(nameof(PdfDocumentStream)); } } @@ -528,45 +454,29 @@ namespace PdfViewerExample public PdfViewerViewModel() { // Load the embedded PDF document stream. + // Update the resource path to match your project namespace (replace PdfViewerExample with your actual project name) pdfDocumentStream = typeof(App).GetTypeInfo().Assembly.GetManifestResourceStream("PdfViewerExample.Assets.PDF_Succinctly.pdf"); } - - /// - /// Raises the event for the specified property name. - /// - /// The name of the property that changed. - public void OnPropertyChanged(string name) - { - PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name)); - } } -} {% endhighlight %} {% endtabs %} -4. Open the `MainPage.xaml` file again and add the default namespace of the created .NET MAUI project and name it as `local`. Here the default namespace of the demo sample `PdfViewerExample` is used. -5. Set an instance of the `PdfViewerViewModel` class as the `BindingContext` of the `ContentPage`. -6. Bind the PDF viewer's [DocumentSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_DocumentSource) to the `PdfDocumentStream` property of the `PdfViewerViewModel` class. - +4. Open the `MainPage.xaml` file again and add the namespace `PdfViewerExample` and name it as `local`. {% tabs %} {% highlight xaml tabtitle="MainPage.xaml" %} + xmlns:local="clr-namespace:PdfViewerExample" +{% endhighlight %} +{% endtabs %} - - - +5. Set an instance of the `PdfViewerViewModel` class as the `BindingContext`. Bind the PDF viewer's [DocumentSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_DocumentSource) to the `PdfDocumentStream` property of the `PdfViewerViewModel` class. +{% tabs %} +{% highlight xaml tabtitle="MainPage.xaml" %} - - - - - + {% endhighlight %} {% endtabs %} @@ -590,16 +500,16 @@ N> You can refer to our [.NET MAUI PDF Viewer](https://www.syncfusion.com/maui-c ## What to Do Next -Now that the PDF Viewer is running, here is a suggested learning path to explore its capabilities: - -| Step | Goal | Topic | -|---|---|---| -| 1 | **Open documents from different sources** | Load a PDF from a URL, the device's file system, a Base64 string, or a password-protected file. → [Open a Document](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/maui/open-a-document) | -| 2 | **Navigate and read** | Jump to specific pages, control zoom levels, and search for text. → [Page Navigation](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/maui/page-navigation) · [Magnification](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/maui/magnification) · [Text Search](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/maui/text-search) | -| 3 | **Add annotations** | Highlight text, draw shapes, add sticky notes, or use freehand ink. → [Annotations Overview](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/maui/annotations-overview) | -| 4 | **Fill form fields** | Read, edit, validate, import, and export PDF form data. → [Form Filling Overview](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/maui/form-filling-overview) | -| 5 | **Save and print** | Persist changes back to a file stream, optionally flattening annotations. → [Save a Document](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/maui/save-a-document) · [Print a Document](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/maui/print-a-document) | -| 6 | **Customize the toolbar** | Show, hide, add, or remove toolbar items to match your app's workflow. → [Toolbar Customization](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/maui/toolbar-customization) | -| 7 | **Redact sensitive content** | Permanently remove confidential text or images before sharing. → [Redaction](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/maui/redaction) | +Now that the PDF Viewer is running, you can explore the following features: + +| Topics | Resources | +|---|---| +| **Open documents from different sources** | Load a PDF from a URL, the device's file system, a Base64 string, or a password-protected file. → [Open a Document](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/maui/open-a-document) | +| **Navigate and read** | Jump to specific pages, control zoom levels, and search for text. → [Page Navigation](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/maui/page-navigation) · [Magnification](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/maui/magnification) · [Text Search](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/maui/text-search) | +| **Add annotations** | Highlight text, draw shapes, add sticky notes, or use freehand ink. → [Annotations Overview](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/maui/annotations-overview) | +| **Fill form fields** | Read, edit, validate, import, and export PDF form data. → [Form Filling Overview](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/maui/form-filling-overview) | +| **Save and print** | Persist changes back to a file stream, optionally flattening annotations. → [Save a Document](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/maui/save-a-document) · [Print a Document](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/maui/print-a-document) | +| **Customize the toolbar** | Show, hide, add, or remove toolbar items to match your app's workflow. → [Toolbar Customization](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/maui/toolbar-customization) | +| **Redact sensitive content** | Permanently remove confidential text or images before sharing. → [Redaction](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/maui/redaction) | * For migration from Xamarin to .NET MAUI, please follow the [Migration Guide](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/maui/migration). diff --git a/Document-Processing/PDF/PDF-Viewer/uwp/Concepts-and-Features/Viewing-PDF.md b/Document-Processing/PDF/PDF-Viewer/uwp/Concepts-and-Features/Viewing-PDF.md index cdcdadf98b..22373c525e 100644 --- a/Document-Processing/PDF/PDF-Viewer/uwp/Concepts-and-Features/Viewing-PDF.md +++ b/Document-Processing/PDF/PDF-Viewer/uwp/Concepts-and-Features/Viewing-PDF.md @@ -94,6 +94,175 @@ Await pdfViewer.LoadDocumentAsync(fileStream, cancellationTokenSource.Token) In the above code sample, the [`CancellationToken`](https://learn.microsoft.com/en-us/dotnet/api/system.threading.cancellationtoken?view=net-5.0) enables you to cancel the asynchronous loading of a PDF document when it is in progress. +## Loading PDF through binding + +The [`SfPdfViewer`](https://help.syncfusion.com/cr/uwp/Syncfusion.Windows.PdfViewer.SfPdfViewerControl.html) supports loading a PDF document using data binding. This is useful in MVVM-based applications where the document stream is exposed as a property. + +### Creating a view model + +1. Add a PDF file to the project and set its **Build Action** to **Embedded Resource**. + +2. Create a simple class (`PdfReport.cs`) that provides the PDF stream property for binding. + +{% tabs %} +{% highlight c# %} +class PdfReport : INotifyPropertyChanged + { + private Stream docStream; + public event PropertyChangedEventHandler PropertyChanged; + + /// + /// Stream object to be bound to the ItemsSource of the PDF Viewer + /// + public Stream DocumentStream + { + get + { + return docStream; + } + set + { + docStream = value; + OnPropertyChanged(new PropertyChangedEventArgs("DocumentStream")); + } + } + + public PdfReport() + { + //Loads the stream from the embedded resource. + Assembly assembly = typeof(MainPage).GetTypeInfo().Assembly; + docStream = assembly.GetManifestResourceStream("SimpleSample.Assets.JavaScript_Succinctly.pdf"); + } + + public void OnPropertyChanged(PropertyChangedEventArgs e) + { + if (PropertyChanged != null) + PropertyChanged(this, e); + } + } +{% endhighlight %} +{% highlight vbnet %} +Class PdfReport + Implements INotifyPropertyChanged + + Private docStream As Stream + Private Event PropertyChanged As PropertyChangedEventHandler Implements INotifyPropertyChanged.PropertyChanged + + ''' + ''' Stream object to be bound to the ItemsSource of the PDF Viewer + ''' + Public Property DocumentStream As Stream + Get + Return docStream + End Get + Set + docStream = Value + OnPropertyChanged(New PropertyChangedEventArgs("DocumentStream")) + End Set + End Property + + Public Sub New() + 'Loads the stream from the embedded resource. + Dim assembly As Assembly = GetType(MainPage).GetTypeInfo().Assembly + docStream = assembly.GetManifestResourceStream("SimpleSample.JavaScript_Succinctly.pdf") + End Sub + + Public Sub OnPropertyChanged(e As PropertyChangedEventArgs) + RaiseEvent PropertyChanged(Me, e) + End Sub +End Class +{% endhighlight %} +{% endtabs %} + +### Binding the document + +To bind the [DocumentStream](https://help.syncfusion.com/cr/uwp/Syncfusion.Windows.PdfViewer.SfPdfViewerControl.html#Syncfusion_Windows_PdfViewer_SfPdfViewerControl_DocumentStream) property of the PdfReport class to the PDF viewer, you need to set the [DataContext](https://learn.microsoft.com/en-us/uwp/api/windows.ui.xaml.frameworkelement.datacontext?view=winrt-28000) of the page. After setting the DataContext, bind the [`ItemsSource`](https://help.syncfusion.com/cr/uwp/Syncfusion.Windows.PdfViewer.SfPdfViewerControl.html#Syncfusion_Windows_PdfViewer_SfPdfViewerControl_ItemsSource) property of the `SfPdfViewer` to the `DocumentStream` property. + +The following example shows how to set the `DataContext` and `ItemsSource`property in XAML: + +{% tabs %} +{% highlight xaml %} + + + + + + + + +{% endhighlight %} +{% endtabs %} + + +## Loading PDF document using FileOpenPicker + +The `SfPdfViewer` allows users to select and load a PDF document at runtime using the `FileOpenPicker`. The selected file is returned as a `StorageFile`, which can be directly loaded into the viewer. + +{% tabs %} +{% highlight xaml %} +