SelectedOrderId: @SelectedOrderId
+ +@code { + public int SelectedOrderId { get; set; } + + public ListSelectedOrderCode: @SelectedOrderCode
+ +@code { + public string SelectedOrderCode { get; set; } = string.Empty; + + public ListWelcome to Blazor Rich Text Editor
+Welcome to Blazor Rich Text Editor
"; +} + +{% endhighlight %} +{% endtabs %} + +## Run the application + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. + +Alternatively, run the application using the following .NET CLI command from the project root directory. + +{% tabs %} +{% highlight bash tabtitle=".NET CLI" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} + +## See also + +* [Getting started with Blazor DataGrid](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-server-app) +* [Getting started with Blazor Scheduler](https://blazor.syncfusion.com/documentation/scheduler/getting-started-with-server-app) +* [Getting started with Blazor Rich Text Editor](https://blazor.syncfusion.com/documentation/rich-text-editor/getting-started-with-server-app) diff --git a/blazor/common/migration/wpf-blazor-migration.md b/blazor/common/migration/wpf-blazor-migration.md new file mode 100644 index 0000000000..10afea223c --- /dev/null +++ b/blazor/common/migration/wpf-blazor-migration.md @@ -0,0 +1,658 @@ +--- +layout: post +title: Migrating WPF Controls to Blazor Components | Syncfusion +description: Step-by-step guide to migrate WPF controls to Blazor components on .NET 8+, including setup, configuration, code examples, and migration limitations. +platform: Blazor +component: Common +documentation: ug +--- + +# Migrating WPF Controls to Blazor Components + +Migrating enterprise applications from **[WPF (Windows Presentation Foundation)](https://learn.microsoft.com/en-us/dotnet/desktop/wpf/overview/)** to **[Blazor](https://learn.microsoft.com/en-us/aspnet/core/blazor/)** involves a significant architectural transition, moving from a rich, XAML-based desktop client framework to a component-driven, cross-platform web framework running on .NET. This guide provides a structured, step-by-step migration approach for **[WPF Controls](https://www.syncfusion.com/wpf-controls)** to their corresponding **[Blazor components](https://www.syncfusion.com/blazor-components)** with the **Blazor Web App (Interactive Server)** rendering mode. + +## Why migrate from WPF to Blazor? + +| Dimension | WPF | Blazor Web App (Interactive Server) | +|---|---|---| +| Runtime | Windows desktop app on .NET Framework or modern .NET | Web app on .NET with interactive server rendering | +| UI definition | XAML-based UI with code-behind | Razor components with HTML and C# | +| Code-behind / logic | `.xaml.cs` files or view models | `@code { }` blocks or `.razor.cs` partial classes | +| Pattern | MVVM is commonly used | Component-based development is the standard approach | +| Data binding | Uses `DataContext` and view models | Uses component parameters, `@bind`, and cascading values | +| State management | Uses view model state and `INotifyPropertyChanged` | Uses component state and re-rendering | +| Navigation | Uses windows, `Frame`, or region-based navigation | Uses `@page` routing and `NavigationManager` | +| Dependency injection | Often uses external containers | Uses built-in .NET dependency injection | +| Rendering | Uses the native WPF rendering pipeline | Uses interactive rendering in the browser | +| Communication model | In-process desktop interaction | Server interaction over SignalR for interactivity | + +## Prerequisites for Blazor + +* [.NET 8 SDK or later](https://dotnet.microsoft.com/en-us/download/dotnet) +* [Visual Studio](https://visualstudio.microsoft.com/downloads/) 2022 or later or [Visual Studio Code](https://code.visualstudio.com/) with [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension + +## Project structure comparison + +WPF and Blazor follow different application models. The following table maps common WPF artifacts to their closest Blazor equivalents and describes their roles in a Blazor application. + +| WPF artifact | Blazor equivalent | Description | +|---|---|---| +| `App.xaml` | `Program.cs` and `App.razor` | Defines startup and root rendering | +| `App.xaml.cs` | `Program.cs` | Configures services and host setup | +| `MainWindow.xaml` | `App.razor`, `MainLayout.razor`, and `Routes.razor` | Represents the application shell and routing structure | +| `Views/*.xaml` | `Pages/*.razor` | Defines route-enabled UI pages | +| `ViewModels/*.cs` | Services, component state, or `.razor.cs` | Contains UI logic and state | +| `Models/*.cs` | `Models/*.cs` | Usually reusable without changes | +| `Services/*.cs` | `Services/*.cs` | Handles shared application logic through dependency injection | +| `ResourceDictionary` | CSS, CSS isolation, and static assets | Manages styling and static resources | +| `UserControl` | Razor component (`.razor`) | Reusable UI component | +| `ICommand` and `RelayCommand` | Event handlers, `EventCallback`, component methods, or custom services | Implements user action handling and validation logic in Blazor using event callbacks or service methods | +| `INotifyPropertyChanged` | Component state and re-rendering | Updates the UI when state changes | + +## Common setup and configuration + +Create a Blazor project using one of the following getting started guides. + +* [Getting Started with Blazor Web App](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) +* [Getting Started with Blazor Server App](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) +* [Getting Started with Blazor WebAssembly App](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) + +This migration guide focuses on the **Blazor Web App (Interactive Server)** approach, which provides the most direct migration path from WPF by maintaining server-side logic and state management similar to traditional desktop applications. The interactive server rendering mode enables real-time server-client communication through SignalR, making it suitable for enterprise applications that require complex business logic and real-time updates. + +The following shared setup applies to all components and covers the common configuration required before proceeding to the [component-specific migration steps](#component-specific-migration-steps). + +### Package installation + +In WPF applications, controls are typically installed as individual NuGet packages (for example, [Syncfusion.SfGrid.WPF](https://www.nuget.org/packages/Syncfusion.SfGrid.WPF) and [Syncfusion.SfChart.WPF](https://www.nuget.org/packages/Syncfusion.SfChart.WPF)) and referenced directly in XAML and code-behind. + +In Blazor applications, components are also provided as individual NuGet packages (for example, [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid) and [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts)). Installing only the required component packages improves performance and reduces application size. + +For the complete list of available packages, refer to the [Blazor NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages). + +Additionally, install the [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes) NuGet package at the application level to enable styling. + +### Service registration + +In WPF, controls are usually declared in XAML and initialized in code-behind, so you do not need to register them explicitly. Application services are typically configured manually or through an external DI container. + +Blazor uses the built-in .NET dependency injection (DI) system, so required services must be registered in the application's service container to enable component communication and framework functionality. When using **Blazor Web App (Interactive Server)**, ensure that services are registered with the appropriate lifetime scope to support interactive components and server-side state management. + +In the `Program.cs` file, add the following namespace and register the required services. + +{% tabs %} +{% highlight c# tabtitle="Program.cs" hl_lines="2 8" %} + +... +using Syncfusion.Blazor; +... +var builder = WebApplication.CreateBuilder(args); +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents(); +// Register Blazor services +builder.Services.AddSyncfusionBlazor(); +... + +{% endhighlight %} +{% endtabs %} + +### Add required namespaces + +In Blazor applications, after installing the required packages and registering services, import the necessary namespaces in the `_Imports.razor` file. + +{% tabs %} +{% highlight razor tabtitle="_Imports.razor" %} + +@using Syncfusion.Blazor +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Charts +@using Syncfusion.Blazor.Schedule + +{% endhighlight %} +{% endtabs %} + +This example includes the namespaces used by the components covered in this guide. Import only the namespaces needed for the components used in your application. + +### Theme and script configuration + +**WPF approach** + +In WPF, themes are typically applied using [SfSkinManager](https://help.syncfusion.com/wpf/themes/skin-manager), while additional styling can be managed through `ResourceDictionary` and XAML-based styling. Scripts are not required because rendering happens locally in the desktop runtime. + +{% tabs %} +{% highlight xml tabtitle="MainWindow.xaml" %} + +