diff --git a/blazor/common/migration/wpf-blazor-migration.md b/blazor/common/migration/wpf-blazor-migration.md
index b655d059e..eb7073aac 100644
--- a/blazor/common/migration/wpf-blazor-migration.md
+++ b/blazor/common/migration/wpf-blazor-migration.md
@@ -1,26 +1,19 @@
 ---
 layout: post
-title: Migrating from WPF to Blazor | Syncfusion
-description: Guide to migrating Syncfusion WPF apps to Blazor, covering key components and detailed DataGrid migration.
+title: Migrating Syncfusion WPF Controls to Blazor
+description: Guide to migrate Syncfusion WPF controls to Syncfusion Blazor components on .NET 8+, with setup, config, and examples.
 platform: Blazor
 component: Common
 documentation: ug
 ---
 
-# Migrating from WPF to Blazor
+# Migrating Syncfusion® WPF Controls to Blazor
 
-## Overview
+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 path for **[Syncfusion WPF Controls](https://www.syncfusion.com/wpf-controls)** to their **[Syncfusion Blazor equivalents](https://www.syncfusion.com/blazor-components)** using **[Visual Studio](https://visualstudio.microsoft.com/vs/)** or **[Visual Studio Code](https://code.visualstudio.com/)**.
 
-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 path for **[Syncfusion WPF components](https://www.syncfusion.com/wpf-controls)** to their **[Syncfusion Blazor equivalents](https://www.syncfusion.com/blazor-components)**, developed using **[Visual Studio](https://visualstudio.microsoft.com/vs/)** or **[Visual Studio Code](https://code.visualstudio.com/)**.
+It focuses on key architectural differences and demonstrates the essential setup and rendering patterns required to successfully migrate major Syncfusion UI components from WPF to Blazor.
 
-This document covers:
-* Architectural differences between WPF and Blazor
-* Initial rendering setup for major Syncfusion components
-* Detailed DataGrid migration with feature parity mapping
-
-### Why migrate from WPF to Blazor?
-
-> **Blazor Web App with Interactive Server render mode** is often the closest fit for WPF-style responsiveness and centrally managed state.
+## Why migrate from WPF to Blazor?
 
 | Dimension | WPF | Blazor Web App (Interactive Server) |
 |---|---|---|
@@ -50,12 +43,14 @@ Run the following commands to verify that the installed .NET SDK version is 8.0
 {% tabs %}
 {% highlight bash tabtitle=".NET CLI" %}
 
-dotnet --version   # Print installed .NET SDK version (should be 8.0.x or later)
+dotnet --version   # Print installed .NET SDK version (should be 8.0 or later)
 dotnet new list blazor   # List available/installed Blazor project templates
 
 {% endhighlight %}
 {% endtabs %}
 
+N> This guide is tested with .NET 8.0 and later versions. Ensure that your installed SDK version is 8.0 or higher.
+
 ## Project structure comparison
 
 WPF and Blazor use different application models. The table below shows the closest functional equivalents, not a strict one-to-one match.
@@ -74,9 +69,7 @@ WPF and Blazor use different application models. The table below shows the close
 | `ICommand` and `RelayCommand` | Event handlers, `EventCallback`, or injected services | Handles user actions and command logic |
 | `INotifyPropertyChanged` | Component state and re-rendering | Updates the UI when state changes |
 
-## Getting started: project creation
-
-### Creating a Blazor Web App with Interactive Server in VS Code
+## Creating a Blazor Web App with Interactive Server in Visual Studio Code
 
 {% tabs %}
 {% highlight bash tabtitle=".NET CLI" %}
@@ -93,133 +86,97 @@ N> The `--interactivity Server` flag configures SignalR-based interactivity and
 
 ## Migrating key Syncfusion components from WPF to Blazor
 
-This section provides **step-by-step migration guidance** for six Syncfusion components, with side-by-side WPF and Blazor code examples:
-
-1. **[DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid)** - Tabular data display with sorting, filtering, editing, and grouping
-2. **[TreeGrid](https://www.syncfusion.com/blazor-components/blazor-tree-grid)** - Hierarchical data display in a grid format
-3. **[Charts](https://www.syncfusion.com/blazor-components/blazor-charts)** - Data visualization with various chart types
-4. **[Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler)** - Calendar and appointment scheduling
-5. **[Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram)** - Visual diagramming and flowchart creation
-6. **[RichTextEditor](https://www.syncfusion.com/blazor-components/blazor-rich-text-editor)** - Rich text editing with formatting capabilities
-
-Each component section includes package installation, theme setup, service registration, and basic rendering code for both platforms.
-
-### 1. DataGrid
+The following shared setup applies to all six Syncfusion components and covers the common configuration required before moving on to the [component-specific migration steps](./wpf-blazor-migration#1-datagrid).
 
-For detailed explanation, refer to the [WPF DataGrid getting started guide](https://help.syncfusion.com/wpf/datagrid/getting-started) and [Blazor DataGrid getting started guide](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-server-app).
+### Common NuGet packages
 
-#### Migration overview
+Use the following NuGet packages for each component.
 
-| Aspect | WPF (SfDataGrid) | Blazor (SfGrid) |
+| Component | WPF package (NuGet) | Blazor package (NuGet) |
 |---|---|---|
-| Package (NuGet) | `Syncfusion.SfGrid.WPF` | `Syncfusion.Blazor.Grid` |
-| Namespace | `Syncfusion.UI.Xaml.Grid` | `Syncfusion.Blazor.Grids` |
-| Component declaration | `<syncfusion:SfDataGrid>` | `<SfGrid>` |
-| Data binding | `ItemsSource` with `DataContext` or a view model | `DataSource` with component state |
-| Collection type | `ObservableCollection<T>` is commonly used | `List<T>` or `IEnumerable<T>` is commonly used |
-| Columns | `GridTextColumn`, `GridNumericColumn`, `GridTemplateColumn` | `GridColumn` with `Field`, `Format`, and `EditType` |
-| Templates | XAML `DataTemplate` | Razor `<Template>` |
-| Editing and events | Code-behind events and properties | `GridEditSettings`, `GridEvents`, and event callbacks |
-| Paging and virtualization | `SfDataPager` and native virtualization | `GridPageSettings`, `EnableVirtualization`, and `EnableColumnVirtualization` |
-| Styling | `ResourceDictionary`, styles, and triggers | CSS, CSS isolation, and callback-based styling |
+| DataGrid | [Syncfusion.SfGrid.WPF](https://www.nuget.org/packages/Syncfusion.SfGrid.WPF) | [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid) |
+| TreeGrid | [Syncfusion.SfGrid.WPF](https://www.nuget.org/packages/Syncfusion.SfGrid.WPF) | [Syncfusion.Blazor.TreeGrid](https://www.nuget.org/packages/Syncfusion.Blazor.TreeGrid) |
+| Charts | [Syncfusion.SfChart.WPF](https://www.nuget.org/packages/Syncfusion.SfChart.WPF) | [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts) |
+| Scheduler | [Syncfusion.SfScheduler.WPF](https://www.nuget.org/packages/Syncfusion.SfScheduler.WPF) | [Syncfusion.Blazor.Schedule](https://www.nuget.org/packages/Syncfusion.Blazor.Schedule) |
+| Diagram | [Syncfusion.SfDiagram.WPF](https://www.nuget.org/packages/Syncfusion.SfDiagram.WPF) | [Syncfusion.Blazor.Diagram](https://www.nuget.org/packages/Syncfusion.Blazor.Diagram) |
+| RichTextEditor | [Syncfusion.SfRichTextBoxAdv.WPF](https://www.nuget.org/packages/Syncfusion.SfRichTextBoxAdv.WPF) | [Syncfusion.Blazor.RichTextEditor](https://www.nuget.org/packages/Syncfusion.Blazor.RichTextEditor) |
+| Themes | — | [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes) |
 
-#### Step-by-step migration
+N> Install `Syncfusion.Blazor.Themes` once at the application level. This package is required for the Blazor components used in this migration guide.
 
-#### Step 1: Package installation
+### Script and theme configuration
 
-Install the required Syncfusion NuGet packages to enable DataGrid functionality in your application.
-
-In WPF, the [DataGrid control](https://www.syncfusion.com/wpf-controls/datagrid) is available through a single package. 
-
-In Blazor, the [DataGrid component](https://www.syncfusion.com/blazor-components/blazor-datagrid) and its theme styles are provided as separate packages, and both need to be installed.
-
-**WPF approach:**
+Use the same Blazor theme and script setup for all migrated components.
 
 {% tabs %}
-{% highlight bash tabtitle=".NET CLI" %}
+{% highlight razor tabtitle="App.razor" %}
 
-dotnet add package Syncfusion.SfGrid.WPF
+<head>
+    ...
+    <!-- Syncfusion theme stylesheet -->
+    <link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
+    ...
+</head>
 
-{% endhighlight %}
-{% endtabs %}
-
-**Blazor equivalent:**
-
-{% tabs %}
-{% highlight bash tabtitle=".NET CLI" %}
-
-dotnet add package Syncfusion.Blazor.Grid -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
+<body>
+    ...
+    <!-- Syncfusion Blazor core script (required for most UI components) -->
+    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+</body>
 
 {% endhighlight %}
 {% endtabs %}
 
-#### Step 2: Theme configuration
-
-Configure the visual theme to ensure that the DataGrid follows a consistent and modern appearance across the application.
+### Blazor service registration
 
-In WPF, themes are applied at the window level using the [SfSkinManager](https://help.syncfusion.com/wpf/themes/skin-manager), while Blazor applications apply themes by referencing the required Syncfusion CSS files during application startup.
-
-**WPF approach (MainWindow.xaml):**
-
-{% tabs %}
-{% highlight xml tabtitle="MainWindow.xaml" %}
-
-<Window x:Class="GettingStarted.MainWindow"
-        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
-        xmlns:syncfusionskin="clr-namespace:Syncfusion.SfSkinManager;assembly=Syncfusion.SfSkinManager.WPF"
-        syncfusionskin:SfSkinManager.Theme="{syncfusionskin:SkinManagerExtension ThemeName=FluentLight}">
-</Window>
-
-{% endhighlight %}
-{% endtabs %}
-
-**Blazor equivalent (App.razor):**
+Register Syncfusion services once for all six components.
 
 {% tabs %}
-{% highlight html tabtitle="App.razor" %}
-
-<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
-<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-
+{% highlight C# tabtitle="Program.cs" %}
+...
+using Syncfusion.Blazor;
+...
+builder.Services.AddSyncfusionBlazor();
+...
 {% endhighlight %}
 {% endtabs %}
 
-#### Step 3: Service registration (Blazor-specific)
+### Namespace imports
 
-Register the Syncfusion services in the Blazor dependency injection container to enable component rendering and runtime behavior.
-This step is required only for Blazor applications and replaces the implicit component initialization mechanism used in WPF.
+Add the following namespaces to `_Imports.razor` so the Syncfusion Blazor components are available throughout the application.
 
-**Blazor requirement:**
-
-{% tabs %}
-{% highlight c# tabtitle="Program.cs" %}
-....
-using Syncfusion.Blazor;
-....
-builder.Services.AddSyncfusionBlazor();
-....
-{% endhighlight %}
-{% endtabs %}
+| Component | Required namespaces |
+|---|---|
+| DataGrid | `@using Syncfusion.Blazor`<br>`@using Syncfusion.Blazor.Grids` |
+| TreeGrid | `@using Syncfusion.Blazor`<br>`@using Syncfusion.Blazor.TreeGrid` |
+| Charts | `@using Syncfusion.Blazor`<br>`@using Syncfusion.Blazor.Charts` |
+| Scheduler | `@using Syncfusion.Blazor`<br>`@using Syncfusion.Blazor.Schedule` |
+| Diagram | `@using Syncfusion.Blazor`<br>`@using Syncfusion.Blazor.Diagram` |
+| RichTextEditor | `@using Syncfusion.Blazor`<br>`@using Syncfusion.Blazor.RichTextEditor` |
 
-**Additional step (Blazor only):**
+### 1. DataGrid
 
-{% tabs %}
-{% highlight razor tabtitle="_Imports.razor" %}
+For detailed explanation, refer to the [WPF DataGrid getting started guide](https://help.syncfusion.com/wpf/datagrid/getting-started) and [Blazor DataGrid getting started guide](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-server-app).
 
-@using Syncfusion.Blazor
-@using Syncfusion.Blazor.Grids
+#### Migration overview
 
-{% endhighlight %}
-{% endtabs %}
+| Aspect | WPF (SfDataGrid) | Blazor (SfGrid) |
+|---|---|---|
+| Namespace | `Syncfusion.UI.Xaml.Grid` | `Syncfusion.Blazor.Grids` |
+| Component declaration | `<syncfusion:SfDataGrid>` | `<SfGrid>` |
+| Data binding | `ItemsSource` with `DataContext` or a view model | `DataSource` with component state |
+| Collection type | `ObservableCollection<T>` is commonly used | `List<T>` or `IEnumerable<T>` is commonly used |
+| Columns | `GridTextColumn`, `GridNumericColumn`, `GridTemplateColumn` | `GridColumn` with `Field`, `Format`, and `EditType` |
+| Templates | XAML `DataTemplate` | Razor `<Template>` |
+| Editing and events | Code-behind events and properties | `GridEditSettings`, `GridEvents`, and event callbacks |
+| Paging and virtualization | `SfDataPager` and native virtualization | `GridPageSettings`, `EnableVirtualization`, and `EnableColumnVirtualization` |
+| Styling | `ResourceDictionary`, styles, and triggers | CSS, CSS isolation, and callback-based styling |
 
-#### Step 4: Component rendering
+#### Component rendering
 
 Render the DataGrid and configure the required columns.
 
-In WPF, the DataGrid control is defined in XAML and the data collection is assigned programmatically using the [ItemsSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_ItemsSource) property. 
+In WPF, the DataGrid control is defined in XAML and the data collection is assigned programmatically using the [ItemsSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_ItemsSource) property.
 
 In Blazor, the DataGrid component is declared in Razor markup and receives its data through the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) parameter.
 
@@ -232,8 +189,6 @@ In Blazor, the DataGrid component is declared in Razor markup and receives its d
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:syncfusion="clr-namespace:Syncfusion.UI.Xaml.Grid;assembly=Syncfusion.SfGrid.WPF"
-        xmlns:syncfusionskin="clr-namespace:Syncfusion.SfSkinManager;assembly=Syncfusion.SfSkinManager.WPF"
-        syncfusionskin:SfSkinManager.Theme="{syncfusionskin:SkinManagerExtension ThemeName=FluentLight}"
         Title="Orders" Height="450" Width="800">
     
     <syncfusion:SfDataGrid x:Name="dataGrid"
@@ -347,7 +302,6 @@ For detailed explanation, refer to the [WPF TreeGrid getting started guide](http
 
 | Aspect | WPF (SfTreeGrid) | Blazor (SfTreeGrid) |
 |---|---|---|
-| Package (NuGet) | `Syncfusion.SfGrid.WPF` | `Syncfusion.Blazor.TreeGrid` |
 | Namespace | `Syncfusion.UI.Xaml.TreeGrid` | `Syncfusion.Blazor.TreeGrid` |
 | Component declaration | `<syncfusion:SfTreeGrid>` | `<SfTreeGrid>` |
 | Data structure | Nested collections or self-referencing flat data | Self-referencing flat data is the common approach |
@@ -358,105 +312,11 @@ For detailed explanation, refer to the [WPF TreeGrid getting started guide](http
 | Events | WPF routed events and CLR events | `GridEvents` and event callbacks |
 | Performance | Native desktop rendering | Virtual scrolling and load-on-demand |
 
-#### Step-by-step migration
-
-#### Step 1: Package installation
-
-Install the required Syncfusion NuGet packages to enable TreeGrid functionality for displaying hierarchical data in a grid format.
-
-In WPF, the [TreeGrid control](https://www.syncfusion.com/wpf-controls/treegrid) is included as part of the Syncfusion Grid package. 
-
-In Blazor, the [TreeGrid component](https://www.syncfusion.com/blazor-components/blazor-tree-grid) and its theme styles are available as separate packages, and both need to be installed.
-
-**WPF approach:**
-
-{% tabs %}
-{% highlight bash tabtitle=".NET CLI" %}
-
-dotnet add package Syncfusion.SfGrid.WPF
-
-{% endhighlight %}
-{% endtabs %}
-
-**Blazor equivalent:**
-
-{% tabs %}
-{% highlight bash tabtitle=".NET CLI" %}
-
-dotnet add package Syncfusion.Blazor.TreeGrid -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-#### Step 2: Theme configuration
-
-Configure the visual theme to ensure that the TreeGrid follows a consistent and modern appearance across the application.
-
-In WPF, themes are applied at the window level using the [SfSkinManager](https://help.syncfusion.com/wpf/themes/skin-manager). 
-
-In Blazor, themes are applied by referencing the appropriate Syncfusion CSS files during application startup.
-
-**WPF approach (MainWindow.xaml):**
-
-{% tabs %}
-{% highlight xml tabtitle="MainWindow.xaml" %}
-
-<Window x:Class="GettingStarted.MainWindow"
-        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
-        xmlns:syncfusionskin="clr-namespace:Syncfusion.SfSkinManager;assembly=Syncfusion.SfSkinManager.WPF"
-        syncfusionskin:SfSkinManager.Theme="{syncfusionskin:SkinManagerExtension ThemeName=FluentLight}">
-</Window>
-
-{% endhighlight %}
-{% endtabs %}
-
-**Blazor equivalent (App.razor):**
-
-{% tabs %}
-{% highlight html tabtitle="App.razor" %}
-
-<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
-<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-
-{% endhighlight %}
-{% endtabs %}
-
-#### Step 3: Service registration (Blazor-specific)
-
-Register the Syncfusion services in the Blazor dependency injection container to enable TreeGrid component initialization and runtime functionality.
-This step is required only for Blazor applications and replaces the implicit component setup used in WPF.
-
-**Blazor requirement:**
-
-{% tabs %}
-{% highlight c# tabtitle="Program.cs" %}
-....
-using Syncfusion.Blazor;
-....
-builder.Services.AddSyncfusionBlazor();
-....
-{% endhighlight %}
-{% endtabs %}
-
-**Additional step (Blazor only):**
-
-{% tabs %}
-{% highlight razor tabtitle="_Imports.razor" %}
-
-@using Syncfusion.Blazor
-@using Syncfusion.Blazor.TreeGrid
-
-{% endhighlight %}
-{% endtabs %}
-
-#### Step 4: Component rendering
+#### Component rendering
 
-Render the TreeGrid and configure the required columns to display hierarchical data using a self‑referencing data structure.
+Render the TreeGrid and configure the required columns to display hierarchical data using a self-referencing data structure.
 
-In WPF, the TreeGrid control is defined in XAML, and the hierarchical data collection is assigned programmatically using the [ItemsSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_ItemsSource) property along with parent‑child mapping properties. 
+In WPF, the TreeGrid control is defined in XAML, and the hierarchical data collection is assigned programmatically using the [ItemsSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_ItemsSource) property along with parent-child mapping properties.
 
 In Blazor, the TreeGrid component is declared in Razor markup and receives its hierarchical data through the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_DataSource) parameter, using [IdMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_IdMapping) and [ParentIdMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_ParentIdMapping) to establish relationships.
 
@@ -469,9 +329,7 @@ In Blazor, the TreeGrid component is declared in Razor markup and receives its h
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:syncfusion="clr-namespace:Syncfusion.UI.Xaml.TreeGrid;assembly=Syncfusion.SfGrid.WPF"
-        xmlns:syncfusionskin="clr-namespace:Syncfusion.SfSkinManager;assembly=Syncfusion.SfSkinManager.WPF"
-        syncfusionskin:SfSkinManager.Theme="{syncfusionskin:SkinManagerExtension ThemeName=FluentLight}"
-        Title="Tree Grid - Employees" Height="450" Width="800">
+        Title="Tree Grid - Tasks" Height="450" Width="800">
 
     <syncfusion:SfTreeGrid x:Name="treeGrid"
                            AutoGenerateColumns="False"
@@ -592,7 +450,6 @@ For detailed explanation, refer to the [WPF Charts getting started guide](https:
 
 | Aspect | WPF (SfChart) | Blazor (SfChart) |
 |---|---|---|
-| Package (NuGet) | `Syncfusion.SfChart.WPF` | `Syncfusion.Blazor.Charts` |
 | Namespace | `Syncfusion.UI.Xaml.Charts` | `Syncfusion.Blazor.Charts` |
 | Component declaration | `<syncfusion:SfChart>` | `<SfChart>` |
 | Data binding | `ItemsSource` with `XBindingPath` and `YBindingPath` | `DataSource` with `XName` and `YName` |
@@ -602,105 +459,11 @@ For detailed explanation, refer to the [WPF Charts getting started guide](https:
 | Events | CLR events | Event callbacks such as point and tooltip events |
 | Responsiveness | Window-based layout | CSS-based responsive layout |
 
-#### Step-by-step migration
-
-#### Step 1: Package installation
-
-Install the required Syncfusion NuGet packages to enable charting and data visualization capabilities in your application.
-
-In WPF, the [Chart control](https://www.syncfusion.com/wpf-controls/charts) is available through a single package. 
-
-In Blazor, the [Chart component](https://www.syncfusion.com/blazor-components/blazor-charts) and its theme styles are provided as separate packages.
-
-**WPF approach:**
-
-{% tabs %}
-{% highlight bash tabtitle=".NET CLI" %}
-
-dotnet add package Syncfusion.SfChart.WPF
-
-{% endhighlight %}
-{% endtabs %}
-
-**Blazor equivalent:**
-
-{% tabs %}
-{% highlight bash tabtitle=".NET CLI" %}
-
-dotnet add package Syncfusion.Blazor.Charts -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-#### Step 2: Theme configuration
-
-Configure the visual theme to ensure that the charts follow a consistent and modern appearance across the application.
-
-In WPF, themes are applied at the window level using the [SfSkinManager](https://help.syncfusion.com/wpf/themes/skin-manager). 
-
-In Blazor, themes are applied by referencing the required Syncfusion CSS files during application startup.
-
-**WPF approach (MainWindow.xaml):**
-
-{% tabs %}
-{% highlight xml tabtitle="MainWindow.xaml" %}
-
-<Window x:Class="GettingStarted.MainWindow"
-        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
-        xmlns:syncfusionskin="clr-namespace:Syncfusion.SfSkinManager;assembly=Syncfusion.SfSkinManager.WPF"
-        syncfusionskin:SfSkinManager.Theme="{syncfusionskin:SkinManagerExtension ThemeName=FluentLight}">
-</Window>
-
-{% endhighlight %}
-{% endtabs %}
-
-**Blazor equivalent (App.razor):**
-
-{% tabs %}
-{% highlight html tabtitle="App.razor" %}
-
-<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
-<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-
-{% endhighlight %}
-{% endtabs %}
-
-#### Step 3: Service registration (Blazor-specific)
-
-Register the Syncfusion services in the Blazor dependency injection container to enable chart component initialization and interactive features.
-This step is required only for Blazor applications and replaces the implicit component setup used in WPF.
-
-**Blazor requirement:**
-
-{% tabs %}
-{% highlight c# tabtitle="Program.cs" %}
-....
-using Syncfusion.Blazor;
-....
-builder.Services.AddSyncfusionBlazor();
-....
-{% endhighlight %}
-{% endtabs %}
-
-**Additional step (Blazor only):**
-
-{% tabs %}
-{% highlight razor tabtitle="_Imports.razor" %}
-
-@using Syncfusion.Blazor
-@using Syncfusion.Blazor.Charts
-
-{% endhighlight %}
-{% endtabs %}
-
-#### Step 4: Component rendering
+#### Component rendering
 
 Render the chart and configure the required axes, series, and visualization settings.
 
-In WPF, the Chart control is defined using nested XAML elements, and data is assigned through the [ItemsSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_ItemsSource) property using binding paths for the X and Y values. 
+In WPF, the Chart control is defined using nested XAML elements, and data is assigned through the [ItemsSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_ItemsSource) property using binding paths for the X and Y values.
 
 In Blazor, the Chart component is declared in Razor markup, with axes and series configured using child components, and data supplied through the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) parameter.
 
@@ -713,8 +476,6 @@ In Blazor, the Chart component is declared in Razor markup, with axes and series
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
-        xmlns:syncfusionskin="clr-namespace:Syncfusion.SfSkinManager;assembly=Syncfusion.SfSkinManager.WPF"
-        syncfusionskin:SfSkinManager.Theme="{syncfusionskin:SkinManagerExtension ThemeName=FluentLight}"
         Title="Sales Analysis" Height="450" Width="800">
 
     <syncfusion:SfChart Header="Sales Analysis">
@@ -751,7 +512,7 @@ In Blazor, the Chart component is declared in Razor markup, with axes and series
 {% endhighlight %}
 {% highlight cs tabtitle="MainWindow.xaml.cs" %}
 
-using Syncfusion.UI.Xaml.Charts;  
+using Syncfusion.UI.Xaml.Charts;
 using System.Collections.ObjectModel;
 using System.Windows;
 
@@ -843,7 +604,6 @@ For detailed explanation, refer to the [WPF Scheduler getting started guide](htt
 
 | Aspect | WPF (SfScheduler) | Blazor (SfSchedule<TValue>) |
 |---|---|---|
-| Package (NuGet) | `Syncfusion.SfScheduler.WPF` | `Syncfusion.Blazor.Schedule` |
 | Namespace | `Syncfusion.UI.Xaml.Scheduler` | `Syncfusion.Blazor.Schedule` |
 | Component declaration | `<syncfusion:SfScheduler>` | `<SfSchedule TValue="TModel">` |
 | Appointment model | Built-in `ScheduleAppointment` | Custom model mapped with `ScheduleEventSettings` |
@@ -854,105 +614,11 @@ For detailed explanation, refer to the [WPF Scheduler getting started guide](htt
 | Events | CLR events | Event callbacks such as action and cell events |
 | Large data handling | Native desktop behavior | Virtualization and lazy loading are commonly used |
 
-#### Step-by-step migration
-
-#### Step 1: Package installation
-
-Install the required Syncfusion NuGet packages to enable calendar and appointment scheduling functionality in your application.
-
-In WPF, the [Scheduler control](https://www.syncfusion.com/wpf-controls/scheduler) is available through a single package. 
-
-In Blazor, the [Scheduler component](https://www.syncfusion.com/blazor-components/blazor-scheduler) and its theme styles are provided as separate packages, and both need to be installed.
-
-**WPF approach:**
-
-{% tabs %}
-{% highlight bash tabtitle=".NET CLI" %}
-
-dotnet add package Syncfusion.SfScheduler.WPF
-
-{% endhighlight %}
-{% endtabs %}
-
-**Blazor equivalent:**
-
-{% tabs %}
-{% highlight bash tabtitle=".NET CLI" %}
-
-dotnet add package Syncfusion.Blazor.Schedule -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-#### Step 2: Theme configuration
-
-Configure the visual theme to ensure that the Scheduler follows a consistent and modern appearance across the application.
-
-In WPF, themes are applied at the window level using the [SfSkinManager](https://help.syncfusion.com/wpf/themes/skin-manager). 
-
-In Blazor, themes are applied by referencing the required Syncfusion CSS files during application startup.
-
-**WPF approach (MainWindow.xaml):**
-
-{% tabs %}
-{% highlight xml tabtitle="MainWindow.xaml" %}
-
-<Window x:Class="GettingStarted.MainWindow"
-        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
-        xmlns:syncfusionskin="clr-namespace:Syncfusion.SfSkinManager;assembly=Syncfusion.SfSkinManager.WPF"
-        syncfusionskin:SfSkinManager.Theme="{syncfusionskin:SkinManagerExtension ThemeName=FluentLight}">
-</Window>
-
-{% endhighlight %}
-{% endtabs %}
-
-**Blazor equivalent (App.razor):**
-
-{% tabs %}
-{% highlight html tabtitle="App.razor" %}
-
-<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
-<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-
-{% endhighlight %}
-{% endtabs %}
-
-#### Step 3: Service registration (Blazor-specific)
-
-Register the Syncfusion services in the Blazor dependency injection container to enable Scheduler component initialization and interactive features.
-This step is required only for Blazor applications and replaces the implicit component setup used in WPF.
-
-**Blazor requirement:**
-
-{% tabs %}
-{% highlight c# tabtitle="Program.cs" %}
-....
-using Syncfusion.Blazor;
-....
-builder.Services.AddSyncfusionBlazor();
-....
-{% endhighlight %}
-{% endtabs %}
-
-**Additional step (Blazor only):**
-
-{% tabs %}
-{% highlight razor tabtitle="_Imports.razor" %}
-
-@using Syncfusion.Blazor
-@using Syncfusion.Blazor.Schedule
-
-{% endhighlight %}
-{% endtabs %}
-
-#### Step 4: Component rendering
+#### Component rendering
 
 Render the Scheduler and configure the required views, date settings, and appointment data.
 
-In WPF, the Scheduler control is defined in XAML, with the active view and display date configured through properties, and appointments assigned programmatically using the [ItemsSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Scheduler.SfScheduler.html#Syncfusion_UI_Xaml_Scheduler_SfScheduler_ItemsSource) property. 
+In WPF, the Scheduler control is defined in XAML, with the active view and display date configured through properties, and appointments assigned programmatically using the [ItemsSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Scheduler.SfScheduler.html#Syncfusion_UI_Xaml_Scheduler_SfScheduler_ItemsSource) property.
 
 In Blazor, the Scheduler component is declared in Razor markup, views are configured using child components, and appointment data is supplied through the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEventSettings-1.html#Syncfusion_Blazor_Schedule_ScheduleEventSettings_1_DataSource) parameter.
 
@@ -965,8 +631,6 @@ In Blazor, the Scheduler component is declared in Razor markup, views are config
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:syncfusion="clr-namespace:Syncfusion.UI.Xaml.Scheduler;assembly=Syncfusion.SfScheduler.WPF"
-        xmlns:syncfusionskin="clr-namespace:Syncfusion.SfSkinManager;assembly=Syncfusion.SfSkinManager.WPF"
-        syncfusionskin:SfSkinManager.Theme="{syncfusionskin:SkinManagerExtension ThemeName=FluentLight}"
         Title="Scheduler" Height="650" Width="1000">
 
     <syncfusion:SfScheduler x:Name="scheduler"
@@ -1080,7 +744,6 @@ For detailed explanation, refer to the [WPF Diagram getting started guide](https
 
 | Aspect | WPF (SfDiagram) | Blazor (SfDiagramComponent) |
 |---|---|---|
-| Package (NuGet) | `Syncfusion.SfDiagram.WPF` | `Syncfusion.Blazor.Diagram` |
 | Namespace | `Syncfusion.UI.Xaml.Diagram` | `Syncfusion.Blazor.Diagram` |
 | Component declaration | `<syncfusion:SfDiagram>` | `<SfDiagramComponent>` |
 | Element model | `NodeCollection` and `ConnectorCollection` | `DiagramObjectCollection<Node>` and `DiagramObjectCollection<Connector>` |
@@ -1091,107 +754,11 @@ For detailed explanation, refer to the [WPF Diagram getting started guide](https
 | Events | Routed events and CLR events | Event callbacks |
 | Save and load | Built-in diagram persistence | Component methods for persistence |
 
-#### Step-by-step migration
-
-#### Step 1: Package installation
-
-Install the required Syncfusion NuGet packages to enable diagramming and visual flowchart creation in your application.
-
-In WPF, the [Diagram control](https://www.syncfusion.com/wpf-controls/diagram) is available through a single package. 
-
-In Blazor, the [Diagram component](https://www.syncfusion.com/blazor-components/blazor-diagram) and its theme styles are provided as separate packages, and both need to be installed.
-
-**WPF approach:**
-
-{% tabs %}
-{% highlight bash tabtitle=".NET CLI" %}
-
-dotnet add package Syncfusion.SfDiagram.WPF
-
-{% endhighlight %}
-{% endtabs %}
-
-**Blazor equivalent:**
-
-{% tabs %}
-{% highlight bash tabtitle=".NET CLI" %}
-
-dotnet add package Syncfusion.Blazor.Diagram -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-#### Step 2: Theme configuration
-
-Configure the visual theme to ensure that the Diagram follows a consistent and modern appearance across the application.
-
-In WPF, themes are applied at the window level using the [SfSkinManager](https://help.syncfusion.com/wpf/themes/skin-manager). 
-
-In Blazor, themes are applied by referencing the required Syncfusion CSS files during application startup.
-
-**WPF approach (MainWindow.xaml):**
-
-{% tabs %}
-{% highlight xml tabtitle="MainWindow.xaml" %}
-
-<Window x:Class="GettingStarted.MainWindow"
-        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
-        xmlns:syncfusionskin="clr-namespace:Syncfusion.SfSkinManager;assembly=Syncfusion.SfSkinManager.WPF"
-        syncfusionskin:SfSkinManager.Theme="{syncfusionskin:SkinManagerExtension ThemeName=FluentLight}">
-</Window>
-
-{% endhighlight %}
-{% endtabs %}
-
-**Blazor equivalent (App.razor):**
-
-{% tabs %}
-{% highlight html tabtitle="App.razor" %}
-
-<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
-<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-
-{% endhighlight %}
-{% endtabs %}
-
-#### Step 3: Service registration (Blazor-specific)
-
-Register the Syncfusion services in the Blazor dependency injection container to enable Diagram component initialization and interactive features.
-This step is required only for Blazor applications and replaces the implicit component setup used in WPF.
-
-**Blazor requirement:**
-
-{% tabs %}
-{% highlight c# tabtitle="Program.cs" %}
-
-....
-using Syncfusion.Blazor;
-....
-builder.Services.AddSyncfusionBlazor();
-....
-
-{% endhighlight %}
-{% endtabs %}
-
-**Additional step (Blazor only):**
-
-{% tabs %}
-{% highlight razor tabtitle="_Imports.razor" %}
-
-@using Syncfusion.Blazor
-@using Syncfusion.Blazor.Diagram
-
-{% endhighlight %}
-{% endtabs %}
-
-#### Step 4: Component rendering
+#### Component rendering
 
 Render the Diagram component and define its visual elements, such as nodes and connectors.
 
-In WPF, the Diagram control is declared in XAML, with nodes and connectors defined using nested collections. 
+In WPF, the Diagram control is declared in XAML, with nodes and connectors defined using nested collections.
 
 In Blazor, the Diagram component is declared in Razor markup, and nodes and connectors are created programmatically and supplied through component parameters.
 
@@ -1204,8 +771,6 @@ In Blazor, the Diagram component is declared in Razor markup, and nodes and conn
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
-        xmlns:syncfusionskin="clr-namespace:Syncfusion.SfSkinManager;assembly=Syncfusion.SfSkinManager.WPF"
-        syncfusionskin:SfSkinManager.Theme="{syncfusionskin:SkinManagerExtension ThemeName=FluentLight}"
         Title="Diagram" Height="600" Width="1000">
 
     <syncfusion:SfDiagram x:Name="diagram">
@@ -1315,7 +880,6 @@ For detailed explanation, refer to the [WPF RichTextBox getting started guide](h
 
 | Aspect | WPF (SfRichTextBoxAdv) | Blazor (SfRichTextEditor) |
 |---|---|---|
-| Package (NuGet) | `Syncfusion.SfRichTextBoxAdv.WPF` | `Syncfusion.Blazor.RichTextEditor` |
 | Namespace | `Syncfusion.Windows.Controls.RichTextBoxAdv` | `Syncfusion.Blazor.RichTextEditor` |
 | Component declaration | `<syncfusion:SfRichTextBoxAdv>` | `<SfRichTextEditor>` |
 | Content model | Document-based content | HTML string content |
@@ -1325,109 +889,15 @@ For detailed explanation, refer to the [WPF RichTextBox getting started guide](h
 | Import and export | Native document formats | HTML-based content with conversion options |
 | Events | CLR and routed events | Event callbacks |
 
-> **Warning:** WPF `SfRichTextBoxAdv` uses a native Document Object Model for Word-like documents. Blazor `SfRichTextEditor` uses HTML as its content format. If your WPF app relies on complex DOCX features (sections, headers/footers, advanced styles), you may need server-side conversion or alternative components.
-
-#### Step-by-step migration
-
-#### Step 1: Package installation
-
-Install the required Syncfusion NuGet packages to enable rich text editing with formatting and content authoring capabilities in your application.
-
-In WPF, the [RichTextEditor control](https://www.syncfusion.com/docx-editor-sdk/wpf-docx-editor) is available through a single package. 
-
-In Blazor, the [RichTextEditor component](https://www.syncfusion.com/blazor-components/blazor-rich-text-editor) and its theme styles are provided as separate packages, and both need to be installed.
-
-**WPF approach:**
-
-{% tabs %}
-{% highlight bash tabtitle=".NET CLI" %}
-
-dotnet add package Syncfusion.SfRichTextBoxAdv.WPF
-
-{% endhighlight %}
-{% endtabs %}
-
-**Blazor equivalent:**
-
-{% tabs %}
-{% highlight bash tabtitle=".NET CLI" %}
-
-dotnet add package Syncfusion.Blazor.RichTextEditor -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-#### Step 2: Theme configuration
-
-Configure the visual theme to ensure that the RichTextEditor follows a consistent and modern appearance across the application.
-
-In WPF, themes are applied at the window level using the [SfSkinManager](https://help.syncfusion.com/wpf/themes/skin-manager). 
-
-In Blazor, themes are applied by referencing the required Syncfusion CSS files during application startup.
-
-**WPF approach (MainWindow.xaml):**
-
-{% tabs %}
-{% highlight xml tabtitle="MainWindow.xaml" %}
-
-<Window x:Class="GettingStarted.MainWindow"
-        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
-        xmlns:syncfusionskin="clr-namespace:Syncfusion.SfSkinManager;assembly=Syncfusion.SfSkinManager.WPF"
-        syncfusionskin:SfSkinManager.Theme="{syncfusionskin:SkinManagerExtension ThemeName=FluentLight}">
-</Window>
-
-{% endhighlight %}
-{% endtabs %}
-
-**Blazor equivalent (App.razor):**
-
-{% tabs %}
-{% highlight html tabtitle="App.razor" %}
-
-<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
-<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
-
-{% endhighlight %}
-{% endtabs %}
-
-#### Step 3: Service registration (Blazor-specific)
-
-Register the Syncfusion services in the Blazor dependency injection container to enable RichTextEditor component initialization and interactive features.
-This step is required only for Blazor applications and replaces the implicit component setup used in WPF.
+N> WPF `SfRichTextBoxAdv` uses a native document object model for Word-like documents. Blazor `SfRichTextEditor` uses HTML as its content format. If your WPF app relies on complex DOCX features (sections, headers/footers, advanced styles), you may need server-side conversion or alternative components.
 
-**Blazor requirement:**
-
-{% tabs %}
-{% highlight c# tabtitle="Program.cs" %}
-....
-using Syncfusion.Blazor;
-....
-builder.Services.AddSyncfusionBlazor();
-....
-{% endhighlight %}
-{% endtabs %}
-
-**Additional step (Blazor only):**
-
-{% tabs %}
-{% highlight razor tabtitle="_Imports.razor" %}
-
-@using Syncfusion.Blazor
-@using Syncfusion.Blazor.RichTextEditor
-
-{% endhighlight %}
-{% endtabs %}
-
-#### Step 4: Component rendering
+#### Component rendering
 
 Render the RichTextEditor and configure its editing surface for rich text content.
 
-In WPF, the RichTextEditor control is declared directly in XAML, and the initial content is loaded programmatically using a stream. 
+In WPF, the RichTextEditor control is declared directly in XAML, and the initial content is loaded programmatically using a stream.
 
-In Blazor, the RichTextEditor component is declared in Razor markup, and the editor content is initialized and synchronized using two‑way binding with the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_Value) property.
+In Blazor, the RichTextEditor component is declared in Razor markup, and the editor content is initialized and synchronized using two-way binding with the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_Value) property.
 
 **WPF approach (MainWindow.xaml):**
 
@@ -1438,8 +908,6 @@ In Blazor, the RichTextEditor component is declared in Razor markup, and the edi
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:syncfusion="clr-namespace:Syncfusion.Windows.Controls.RichTextBoxAdv;assembly=Syncfusion.SfRichTextBoxAdv.WPF"
-        xmlns:syncfusionskin="clr-namespace:Syncfusion.SfSkinManager;assembly=Syncfusion.SfSkinManager.WPF"
-        syncfusionskin:SfSkinManager.Theme="{syncfusionskin:SkinManagerExtension ThemeName=FluentLight}"
         Title="RichTextEditor" Height="500" Width="800">
 
     <Grid>
@@ -1501,763 +969,6 @@ namespace WpfRichTextEditor
 {% endhighlight %}
 {% endtabs %}
 
-## Detailed DataGrid migration
-
-The following sections provide **in-depth migration guidance** for the **Syncfusion DataGrid**, covering data binding, columns, editing, sorting, filtering, paging, styling, and performance optimization.
-
-### Data binding
-
-**WPF implementation:**
-
-{% tabs %}
-{% highlight xml tabtitle="OrderView.xaml" %}
-
-<syncfusion:SfDataGrid ItemsSource="{Binding Orders}" AutoGenerateColumns="False">
-    <syncfusion:SfDataGrid.Columns>
-        <syncfusion:GridTextColumn HeaderText="Order ID" MappingName="OrderID" />
-        <syncfusion:GridTextColumn HeaderText="Customer" MappingName="CustomerID" />
-        <syncfusion:GridNumericColumn HeaderText="Freight" MappingName="Freight" />
-    </syncfusion:SfDataGrid.Columns>
-</syncfusion:SfDataGrid>
-
-{% endhighlight %}
-{% highlight c# tabtitle="OrderViewModel.cs" %}
-
-using System.ComponentModel;
-using System.Runtime.CompilerServices; 
-
-public class OrderViewModel : INotifyPropertyChanged
-{
-    private ObservableCollection<Order> _orders;
-    public ObservableCollection<Order> Orders
-    {
-        get => _orders;
-        set { _orders = value; OnPropertyChanged(); }
-    }
-    
-    public OrderViewModel()
-    {
-        Orders = new ObservableCollection<Order>(OrderService.GetOrders());
-    }
-    
-    public event PropertyChangedEventHandler PropertyChanged;
-    protected void OnPropertyChanged([CallerMemberName] string name = null)
-        => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-**Blazor implementation:**
-
-{% tabs %}
-{% highlight razor tabtitle="Orders.razor" %}
-
-@page "/orders"
-@rendermode InteractiveServer
-
-<SfGrid TValue="Order" DataSource="@Orders" Height="400">
-    <GridColumns>
-        <GridColumn Field="@nameof(Order.OrderID)" HeaderText="Order ID" Width="100" />
-        <GridColumn Field="@nameof(Order.CustomerID)" HeaderText="Customer ID" Width="150" />
-        <GridColumn Field="@nameof(Order.Freight)" HeaderText="Freight" Format="C2" Width="120" />
-    </GridColumns>
-</SfGrid>
-
-@code {
-    private List<Order> Orders = new List<Order>
-    {
-        new Order { OrderID = 10248, CustomerID = "VINET", Freight = 32.38 },
-        new Order { OrderID = 10249, CustomerID = "TOMSP", Freight = 11.61 },
-        new Order { OrderID = 10250, CustomerID = "HANAR", Freight = 65.83 }
-    };
-
-    public class Order
-    {
-        public int OrderID { get; set; }
-        public string CustomerID { get; set; }
-        public double Freight { get; set; }
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-**Key migration changes:**
-
-- `ItemsSource` in WPF maps to `DataSource` in Blazor.
-- WPF commonly uses `ObservableCollection<T>` for dynamic updates.
-- Blazor commonly uses `List<T>` or `IEnumerable<T>` for grid data.
-- WPF uses `INotifyPropertyChanged` for UI refresh.
-- Blazor refreshes the UI through component state changes and re-rendering.
-- `MappingName` in WPF maps to `Field` in Blazor.
-
-### Column types and formatting
-
-**WPF implementation:**
-
-{% tabs %}
-{% highlight xml tabtitle="OrderView.xaml" %}
-
-<syncfusion:SfDataGrid ItemsSource="{Binding Orders}">
-    <syncfusion:SfDataGrid.Columns>
-        <syncfusion:GridTextColumn MappingName="OrderID" HeaderText="Order ID" />
-        <syncfusion:GridNumericColumn MappingName="Freight" HeaderText="Freight" NumberDecimalDigits="2" />
-        <syncfusion:GridCurrencyColumn MappingName="Amount" HeaderText="Amount" CurrencyDecimalDigits="2" />
-        <syncfusion:GridDateTimeColumn MappingName="OrderDate" HeaderText="Order Date" />
-        <syncfusion:GridCheckBoxColumn MappingName="IsShipped" HeaderText="Shipped" />
-    </syncfusion:SfDataGrid.Columns>
-</syncfusion:SfDataGrid>
-
-{% endhighlight %}
-{% endtabs %}
-
-**Blazor implementation:**
-
-{% tabs %}
-{% highlight razor tabtitle="Orders.razor" %}
-
-<SfGrid TValue="Order" DataSource="@Orders">
-    <GridColumns>
-        <GridColumn Field="@nameof(Order.OrderID)" HeaderText="Order ID" Width="120" />
-        <GridColumn Field="@nameof(Order.Freight)" HeaderText="Freight" Format="N2" Width="120" />
-        <GridColumn Field="@nameof(Order.Amount)" HeaderText="Amount" Format="C2" Width="120" />
-        <GridColumn Field="@nameof(Order.OrderDate)" HeaderText="Order Date" Format="d" Type="ColumnType.Date" Width="150" />
-        <GridColumn Field="@nameof(Order.IsShipped)" HeaderText="Shipped" Type="ColumnType.Boolean" Width="100" />
-    </GridColumns>
-</SfGrid>
-
-{% endhighlight %}
-{% endtabs %}
-
-**Key migration changes:**
-
-- WPF column types such as `GridTextColumn`, `GridNumericColumn`, `GridCurrencyColumn`, `GridDateTimeColumn`, and `GridCheckBoxColumn` map to `GridColumn` in Blazor.
-- Column binding in Blazor is configured with the `Field` property.
-- Numeric values are formatted by using the `Format` property.
-- Currency values are formatted by using the `Format` property, such as `C2`.
-- Date values are formatted by using the `Format` property and `Type="ColumnType.Date"`.
-- Boolean values use `Type="ColumnType.Boolean"`.
-- Alignment and column width are configured through column-level properties in Blazor.
-
-### Template columns
-
-**WPF implementation:**
-
-{% tabs %}
-{% highlight xml tabtitle="OrderView.xaml" %}
-
-<syncfusion:GridTemplateColumn MappingName="ShipCity" HeaderText="Ship City">
-    <syncfusion:GridTemplateColumn.CellTemplate>
-        <DataTemplate>
-            <StackPanel Orientation="Horizontal">
-                <Image Source="/Images/location.png" Width="16" Height="16" Margin="0,0,5,0" />
-                <TextBlock Text="{Binding ShipCity}" Foreground="Blue" FontWeight="Bold" />
-            </StackPanel>
-        </DataTemplate>
-    </syncfusion:GridTemplateColumn.CellTemplate>
-</syncfusion:GridTemplateColumn>
-
-{% endhighlight %}
-{% endtabs %}
-
-**Blazor implementation:**
-
-{% tabs %}
-{% highlight razor tabtitle="Orders.razor" %}
-
-<GridColumn Field="@nameof(Order.ShipCity)" HeaderText="Ship City" Width="200">
-    <Template>
-        @{
-            var order = context as Order;
-        }
-        <div style="display: flex; align-items: center;">
-            <img src="/images/location.png" style="width: 16px; height: 16px; margin-right: 5px;" />
-            <span style="color: blue; font-weight: bold;">@order?.ShipCity</span>
-        </div>
-    </Template>
-</GridColumn>
-
-{% endhighlight %}
-{% endtabs %}
-
-**Key migration changes:**
-
-- XAML `DataTemplate` maps to Razor `<Template>` in Blazor.
-- The current row data is available through `context` in the template.
-- WPF visual controls inside the template are replaced by HTML elements in Blazor.
-- Styling in Blazor is handled by CSS classes and inline styles.
-- Static images and other assets should be stored in `wwwroot`.
-
-### Editing
-
-**WPF implementation:**
-
-{% tabs %}
-{% highlight xml tabtitle="OrderView.xaml" %}
-
-<syncfusion:SfDataGrid x:Name="OrdersGrid"
-                       ItemsSource="{Binding Orders}"
-                       AllowEditing="True"
-                       EditTrigger="OnTap"                    
-                       EditorSelectionBehavior="SelectAll"         
-                       LostFocusBehavior="Default"                 
-                       CurrentCellBeginEdit="OrdersGrid_CurrentCellBeginEdit"
-                       CurrentCellEndEdit="OrdersGrid_CurrentCellEndEdit"
-                       CurrentCellValueChanged="OrdersGrid_CurrentCellValueChanged"
-                       CellTapped="OrdersGrid_CellTapped"
-                       CellDoubleTapped="OrdersGrid_CellDoubleTapped">
-    <syncfusion:SfDataGrid.Columns>
-        <syncfusion:GridTextColumn MappingName="OrderID" HeaderText="Order ID" AllowEditing="False" />
-        <syncfusion:GridTextColumn MappingName="CustomerID" HeaderText="Customer" />
-        <syncfusion:GridNumericColumn MappingName="Freight" HeaderText="Freight" />
-    </syncfusion:SfDataGrid.Columns>
-</syncfusion:SfDataGrid>
-
-{% endhighlight %}
-{% highlight cs tabtitle="OrderView.xaml.cs" %}
-
-private void OrdersGrid_CurrentCellBeginEdit(object sender, CurrentCellBeginEditEventArgs e)
-{
-    // Use e.RowColumnIndex and e.Column to customize or cancel cell editing using e.Cancel.
-}
-
-private void OrdersGrid_CurrentCellEndEdit(object sender, CurrentCellEndEditEventArgs e)
-{
-    // Use e.RowColumnIndex to perform validation or post‑edit processing when editing ends.
-}
-
-private void OrdersGrid_CurrentCellValueChanged(object sender, CurrentCellValueChangedEventArgs e)
-{
-    // Use e.RowColumnIndex and e.Column to respond to value changes in editable cells.
-}
-
-private void OrdersGrid_CellTapped(object sender, GridCellTappedEventArgs e)
-{
-    // Use e.RowColumnIndex, e.Column, and e.Record to handle single‑click or tap interactions.
-}
-
-private void OrdersGrid_CellDoubleTapped(object sender, GridCellDoubleTappedEventArgs e)
-{
-    // Use e.RowColumnIndex, e.Column, and e.Record to initiate editing or perform double‑click actions.
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-**Blazor implementation:**
-
-{% tabs %}
-{% highlight razor tabtitle="Orders.razor" %}
-
-<SfGrid TValue="Order" @ref="OrdersGrid" DataSource="@Orders">
-    <GridEditSettings AllowEditing="true" AllowAdding="true" AllowDeleting="true" Mode="EditMode.Normal"></GridEditSettings>
-    <GridEvents TValue="Order" OnRecordClick="RecordClickHandler" OnRecordDoubleClick="RecordDoubleClickHandler" OnCellEdit="CellEditHandler" OnCellSave="CellSaveHandler" CellSaved="CellSavedHandler"></GridEvents>
-    <GridColumns>
-        <GridColumn Field="@nameof(Order.OrderID)" HeaderText="Order ID" IsPrimaryKey="true" AllowEditing="false" Width="120" />
-        <GridColumn Field="@nameof(Order.CustomerID)" HeaderText="Customer" Width="150" />
-        <GridColumn Field="@nameof(Order.Freight)" HeaderText="Freight" EditType="EditType.NumericEdit" TextAlign="TextAlign.Right" Width="120" />
-    </GridColumns>
-</SfGrid>
-
-@code {
-    private SfGrid<Order> OrdersGrid;
-    private List<Order> Orders = new();
-
-    private void RecordClickHandler(RecordClickEventArgs<Order> args)
-    {
-        // Use args.RowData and args.RowIndex to handle single-click record interactions.
-    }
-
-    private void RecordDoubleClickHandler(RecordDoubleClickEventArgs<Order> args)
-    {
-        // Use args.RowData and args.RowIndex to initiate editing or perform record-level actions.
-    }
-
-    private void CellEditHandler(CellEditArgs<Order> args)
-    {
-        // Use args.ColumnName and args.RowData to customize or cancel editing using args.Cancel.
-    }
-
-    private void CellSaveHandler(CellSaveArgs<Order> args)
-    {
-        // Validate args.Value and set args.Cancel to prevent saving if needed.
-    }
-
-    private void CellSavedHandler(CellSavedArgs<Order> args)
-    {
-        // Use args.Data and args.ColumnName to perform actions after the cell value is saved.
-    }
-
-    public class Order
-    {
-        public int OrderID { get; set; }
-        public string CustomerID { get; set; }
-        public double Freight { get; set; }
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-**Key migration changes:**
-
-- WPF editing properties map to `GridEditSettings` in Blazor.
-- WPF edit events map to grid event callbacks in Blazor.
-- Blazor editing behavior is configured through the `Mode` property on `GridEditSettings`.
-- WPF cell edit actions such as begin edit, save, and value changed map to `CellEdit`, `CellSave`, and `CellSaved` in Blazor.
-- Record-level interactions such as single click and double click map to `OnRecordClick` and `OnRecordDoubleClick`.
-- Validation in Blazor is typically handled through DataAnnotations or event callbacks.
-
-### Sorting and filtering
-
-**WPF implementation:**
-
-{% tabs %}
-{% highlight xml tabtitle="OrderView.xaml" %}
-
-<syncfusion:SfDataGrid ItemsSource="{Binding Orders}"
-                       AllowSorting="True"
-                       ShowSortNumbers="True"
-                       SortClickAction="DoubleClick"
-                       AllowFiltering="True"
-                       AutoGenerateColumns="True"
-                       FilterPopupStyle="{StaticResource  gridFilterControlStyle}"
-                       FilterRowPosition="FixedTop">
-    <syncfusion:SfDataGrid.SortColumnDescriptions>
-        <syncfusion:SortColumnDescription ColumnName="OrderID" SortDirection="Ascending" />
-        <syncfusion:SortColumnDescription ColumnName="CustomerName" SortDirection="Descending" />
-    </syncfusion:SfDataGrid.SortColumnDescriptions>
-</syncfusion:SfDataGrid>
-
-{% endhighlight %}
-{% endtabs %}
-
-**Blazor implementation:**
-
-{% tabs %}
-{% highlight razor tabtitle="Orders.razor" %}
-
-<SfGrid TValue="Order" DataSource="@Orders" AllowSorting="true" AllowMultiSorting="true" AllowFiltering="true">
-    <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Excel" />
-    <GridSortSettings>
-        <GridSortColumns>
-            <GridSortColumn Field="OrderID" Direction="SortDirection.Ascending" />
-            <GridSortColumn Field="CustomerName" Direction="SortDirection.Descending" />
-        </GridSortColumns>
-    </GridSortSettings>
-    <GridColumns>
-        <GridColumn Field="@nameof(Order.OrderID)" HeaderText="Order ID" Width="120" />
-        <GridColumn Field="@nameof(Order.CustomerName)" HeaderText="Customer" Width="150" />
-        <GridColumn Field="@nameof(Order.Freight)" HeaderText="Freight" Format="C2" Width="120" />
-    </GridColumns>
-</SfGrid>
-
-{% endhighlight %}
-{% endtabs %}
-
-**Key migration changes:**
-
-- WPF sorting settings map to `AllowSorting` and `GridSortSettings` in Blazor.
-- Multi-column sorting in Blazor is enabled with `AllowMultiSorting`.
-- WPF sort descriptions map to `GridSortColumns` in Blazor.
-- WPF filtering settings map to `AllowFiltering` and `GridFilterSettings` in Blazor.
-- Filter behavior in Blazor is configured through the `Type` property.
-- The Excel-style filter UI is enabled by using `GridFilterSettings Type="FilterType.Excel"`.
-
-### Grouping
-
-**WPF implementation:**
-
-{% tabs %}
-{% highlight xml tabtitle="OrderView.xaml" %}
-
-<syncfusion:SfDataGrid ItemsSource="{Binding Orders}"
-                       AllowGrouping="True"
-                       ShowGroupDropArea="True">
-    <syncfusion:SfDataGrid.GroupColumnDescriptions>
-        <syncfusion:GroupColumnDescription ColumnName="OrderID" />
-        <syncfusion:GroupColumnDescription ColumnName="CustomerID" />
-    </syncfusion:SfDataGrid.GroupColumnDescriptions>
-</syncfusion:SfDataGrid>
-
-{% endhighlight %}
-{% endtabs %}
-
-**Blazor implementation:**
-
-{% tabs %}
-{% highlight razor tabtitle="Orders.razor" %}
-
-<SfGrid TValue="Order" DataSource="@Orders" AllowGrouping="true" Height="450px">
-    <GridGroupSettings ShowDropArea="true" ShowGroupedColumn="true" Columns="@Initial" />
-    <GridColumns>
-        <GridColumn Field="@nameof(Order.OrderID)" HeaderText="Order ID" Width="120" />
-        <GridColumn Field="@nameof(Order.CustomerID)" HeaderText="Customer" Width="150" />
-        <GridColumn Field="@nameof(Order.Freight)" HeaderText="Freight" Format="C2" Width="120" />
-    </GridColumns>
-</SfGrid>
-
-@code {
-    private IEnumerable<Order> Orders;
-    private readonly string[] Initial = new[] { nameof(Order.OrderID), nameof(Order.CustomerID) };
-
-    protected override void OnInitialized()
-    {
-        Orders = OrderData.GetAllRecords();
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-**Key migration changes:**
-
-- WPF grouping settings map to `AllowGrouping` in Blazor.
-- WPF `ShowGroupDropArea` maps to `GridGroupSettings.ShowDropArea` in Blazor.
-- WPF group column descriptions map to `GridGroupSettings.Columns` in Blazor.
-- Blazor supports grouped column display using `GridGroupSettings.ShowGroupedColumn`.
-- Grouping can also be applied programmatically using the grid API.
-
-### Selection
-
-**WPF implementation:**
-
-{% tabs %}
-{% highlight xml tabtitle="OrderView.xaml" %}
-
-<syncfusion:SfDataGrid x:Name="dataGrid"
-                       ItemsSource="{Binding Orders}"
-                       SelectionUnit="Any"
-                       SelectionMode="Extended"
-                       ShowRowHeader="True"
-                       EnableExcelLikeSelection="True"
-                       SelectionChanged="DataGrid_SelectionChanged"
-                       AutoGenerateColumns="False">
-    <syncfusion:SfDataGrid.Columns>
-        <syncfusion:GridTextColumn MappingName="OrderID" HeaderText="Order ID" Width="100" />
-        <syncfusion:GridTextColumn MappingName="CustomerID" HeaderText="Customer" Width="150" />
-        <syncfusion:GridNumericColumn MappingName="Freight" HeaderText="Freight" NumberDecimalDigits="2" Width="120" />
-    </syncfusion:SfDataGrid.Columns>
-</syncfusion:SfDataGrid>
-
-{% endhighlight %}
-{% highlight c# tabtitle="OrderView.xaml.cs" %}
-
-using Syncfusion.UI.Xaml.Grid;
-using System.Collections;
-
-private void DataGrid_SelectionChanged(object sender, GridSelectionChangedEventArgs e)
-{
-    var grid = (SfDataGrid)sender;
-    IList selected = grid.SelectedItems;           // selected rows (IList)
-    if (selected.Count > 0 && selected[0] is Order o)
-    {
-        // use selected order
-    }
-
-    var current = grid.CurrentCellManager.CurrentCell; // current cell info
-    var currentRow = current?.RowData as Order;
-}
-{% endhighlight %}
-{% endtabs %}
-
-**Blazor implementation:**
-
-{% tabs %}
-{% highlight razor tabtitle="Orders.razor" %}
-
-<SfGrid TValue="Order" @ref="Grid" DataSource="@Orders" Height="320" AllowSelection="true">
-    <GridSelectionSettings Type="SelectionType.Single" Mode="SelectionMode.Row" />
-    <GridEvents TValue="Order" RowSelected="OnRowSelected" RowDeselected="OnRowDeselected" />
-    <GridColumns>
-        <GridColumn Field="@nameof(Order.OrderID)" HeaderText="Order ID" Width="120" />
-        <GridColumn Field="@nameof(Order.CustomerID)" HeaderText="Customer" Width="150" />
-        <GridColumn Field="@nameof(Order.Freight)" HeaderText="Freight" Format="C2" Width="120" TextAlign="TextAlign.Right" />
-    </GridColumns>
-</SfGrid>
-
-@code {
-    private SfGrid<Order> Grid;
-    private List<Order> Orders = new()
-    {
-        new Order{ OrderID = 10248, CustomerID = "VINET", Freight = 32.38 },
-        new Order{ OrderID = 10249, CustomerID = "TOMSP", Freight = 11.61 }
-    };
-
-    private void OnRowSelected(RowSelectEventArgs<Order> args)
-    {
-        // Use args.Data for the selected row
-    }
-
-    private void OnRowDeselected(RowDeselectEventArgs<Order> args)
-    {
-        // Use args.Data for the deselected row
-    }
-
-    private async Task<IEnumerable<Order>> GetSelected()
-    {
-        // Returns the currently selected records from the grid
-        return await Grid.GetSelectedRecordsAsync();
-    }
-
-    public class Order { public int OrderID { get; set; } public string CustomerID { get; set; } public double Freight { get; set; } }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-**Key migration changes:**
-
-- WPF `SelectionMode` maps to `GridSelectionSettings.Mode` in Blazor.
-- WPF `SelectionUnit` maps to `GridSelectionSettings.Type` in Blazor.
-- WPF `SelectedItems` maps to `GetSelectedRecordsAsync()` in Blazor.
-- WPF selection events map to `RowSelected` and `RowDeselected` in Blazor.
-- Blazor selection is enabled by using `AllowSelection="true"`.
-
-### Paging
-
-**WPF implementation:**
-
-{% tabs %}
-{% highlight xml tabtitle="OrderView.xaml" %}
-
-<Grid>
-    <Grid.RowDefinitions>
-        <RowDefinition Height="*" />
-        <RowDefinition Height="Auto" />
-    </Grid.RowDefinitions>
-    <syncfusion:SfDataGrid Grid.Row="0" 
-                           ItemsSource="{Binding ElementName=dataPager, Path=PagedSource}" />
-    <syncfusion:SfDataPager Grid.Row="1"
-                            x:Name="dataPager"
-                            PageSize="20"
-                            Source="{Binding Orders}" />
-</Grid>
-
-{% endhighlight %}
-{% endtabs %}
-
-**Blazor implementation:**
-
-{% tabs %}
-{% highlight razor tabtitle="Orders.razor" %}
-
-<SfGrid TValue="Order" DataSource="@Orders" AllowPaging="true">
-    <GridPageSettings PageSize="20"  PageSizes="true" />
-    <GridColumns>
-        <GridColumn Field="@nameof(Order.OrderID)" HeaderText="Order ID" Width="120" />
-        <GridColumn Field="@nameof(Order.CustomerID)" HeaderText="Customer" Width="150" />
-        <GridColumn Field="@nameof(Order.Freight)" HeaderText="Freight" Format="C2" Width="120" />
-    </GridColumns>
-</SfGrid>
-
-{% endhighlight %}
-{% endtabs %}
-
-**Key migration changes:**
-
-- WPF `SfDataPager` is replaced by built-in paging in Blazor DataGrid.
-- Paging is enabled by using `AllowPaging="true"` in Blazor.
-- `PageSize` is configured through `GridPageSettings.PageSize`.
-- Page size options are configured through `GridPageSettings.PageSizes`.
-- Paging is handled directly on the grid in Blazor.
-
-### Virtualization
-
-**WPF implementation:**
-
-{% tabs %}
-{% highlight xml tabtitle="OrderView.xaml" %}
-
-<syncfusion:SfDataGrid ItemsSource="{Binding Orders}"
-                       EnableDataVirtualization="True">
-</syncfusion:SfDataGrid>
-
-{% endhighlight %}
-{% endtabs %}
-
-**Blazor implementation:**
-
-{% tabs %}
-{% highlight razor tabtitle="Orders.razor" %}
-
-<SfGrid TValue="Order" DataSource="@LargeOrders" EnableVirtualization="true" EnableColumnVirtualization="true" Height="600px">
-    <GridColumns>
-        <GridColumn Field="@nameof(Order.OrderID)" HeaderText="Order ID" Width="120" />
-        <GridColumn Field="@nameof(Order.CustomerID)" HeaderText="Customer" Width="150" />
-        <GridColumn Field="@nameof(Order.Freight)" HeaderText="Freight" Format="C2" Width="120" />
-    </GridColumns>
-</SfGrid>
-
-{% endhighlight %}
-{% endtabs %}
-
-N> When using `EnableVirtualization="true"`, set an explicit `Height` on the grid (for example, `Height="500px"`).
-
-**Key migration changes:**
-
-- WPF `EnableDataVirtualization` maps to `EnableVirtualization` in Blazor.
-- Column virtualization in Blazor is enabled with `EnableColumnVirtualization`.
-- A fixed `Height` is required for virtualization to work correctly in Blazor.
-- Virtualization is recommended for large data sets.
-
-### Styling - Cell level
-
-**WPF implementation:**
-
-{% tabs %}
-{% highlight xml tabtitle="OrderView.xaml" %}
-
-<syncfusion:GridTextColumn MappingName="Freight" HeaderText="Freight">
-    <syncfusion:GridTextColumn.CellStyle>
-        <Style TargetType="syncfusion:GridCell">
-            <Setter Property="Background" Value="LightYellow" />
-            <Setter Property="FontWeight" Value="Bold" />
-        </Style>
-    </syncfusion:GridTextColumn.CellStyle>
-</syncfusion:GridTextColumn>
-
-{% endhighlight %}
-{% endtabs %}
-
-**Blazor implementation:**
-
-{% tabs %}
-{% highlight razor tabtitle="Orders.razor" %}
-
-<GridColumn Field="@nameof(Order.Freight)" 
-            HeaderText="Freight" 
-            Format="C2"
-            CustomAttributes='@(new Dictionary<string, object> { { "class", "freight-col" } })' 
-            Width="120" />
-
-{% endhighlight %}
-{% highlight css tabtitle="app.css" %}
-
-.freight-col {
-    background-color: lightyellow;
-    font-weight: bold;
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-**Key migration changes:**
-
-- WPF `CellStyle` maps to CSS-based styling in Blazor.
-- Blazor uses `CustomAttributes` to apply CSS classes to cells.
-- Conditional cell styling can be applied through grid event callbacks such as `QueryCellInfo`.
-- WPF styles and triggers are replaced by CSS classes and component callbacks in Blazor.
-
-### Styling - Row level
-
-**WPF implementation:**
-
-{% tabs %}
-{% highlight xml tabtitle="OrderView.xaml" %}
-
-<Window.Resources>
-    <Style TargetType="syncfusion:VirtualizingCellsControl" x:Key="alternatingRowStyle">
-        <Setter Property="Background" Value="LightBlue"/>
-    </Style>
-
-    <Style TargetType="syncfusion:VirtualizingCellsControl" x:Key="RowStyle">
-        <Setter Property="Background" Value="Bisque"/>
-    </Style>
-</Window.Resources>
-
-<syncfusion:SfDataGrid x:Name="dataGrid" 
-                       AlternatingRowStyle="{StaticResource alternatingRowStyle}" 
-                       AlternationCount="3"
-                       RowStyle="{StaticResource RowStyle}"
-                       ItemsSource="{Binding Orders}"/>
-
-{% endhighlight %}
-{% endtabs %}
-
-**Blazor implementation:**
-
-{% tabs %}
-{% highlight razor tabtitle="Orders.razor" %}
-
-<SfGrid TValue="Order" DataSource="@Orders">
-    <GridEvents TValue="Order" RowDataBound="OnRowDataBound" />
-    <GridColumns>
-        <GridColumn Field="@nameof(Order.OrderID)" HeaderText="Order ID" Width="120" />
-        <GridColumn Field="@nameof(Order.CustomerID)" HeaderText="Customer" Width="150" />
-        <GridColumn Field="@nameof(Order.Freight)" HeaderText="Freight" Format="C2" Width="120" />
-    </GridColumns>
-</SfGrid>
-
-@code {
-    private void OnRowDataBound(RowDataBoundEventArgs<Order> args)
-    {
-        if (args.Data.Freight > 500)
-            args.Row.AddClass(new string[] { "high-freight-row" });
-    }
-}
-
-{% endhighlight %}
-{% highlight css tabtitle="app.css" %}
-
-.high-freight-row {
-    background-color: #fff3cd;
-    color: #856404;
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-**Key migration changes:**
-
-- WPF `RowStyle` and `AlternatingRowStyle` map to row-level styling in Blazor.
-- Blazor uses `RowDataBound` to apply custom row classes or styles.
-- Conditional row formatting is handled through CSS classes.
-- WPF triggers are replaced by CSS and event-based styling in Blazor.
-
-### Performance - Frozen columns
-
-**WPF implementation:**
-
-{% tabs %}
-{% highlight xml tabtitle="OrderView.xaml" %}
-
-<syncfusion:SfDataGrid ItemsSource="{Binding Orders}" FrozenColumnCount="2">
-    <syncfusion:SfDataGrid.Columns>
-        <syncfusion:GridTextColumn MappingName="OrderID" HeaderText="Order ID" />
-        <syncfusion:GridTextColumn MappingName="CustomerID" HeaderText="Customer" />
-        <syncfusion:GridTextColumn MappingName="ShipCity" HeaderText="Ship City" />
-    </syncfusion:SfDataGrid.Columns>
-</syncfusion:SfDataGrid>
-
-{% endhighlight %}
-{% endtabs %}
-
-**Blazor implementation:**
-
-{% tabs %}
-{% highlight razor tabtitle="Orders.razor" %}
-
-<SfGrid TValue="Order" DataSource="@Orders"  Height="300px" EnableHover="false" RowHeight="38" EnableVirtualization="true" EnableColumnVirtualization="true" EnableVirtualMaskRow="true">
-    <GridColumns>
-        <GridColumn Field="@nameof(Order.OrderID)" HeaderText="Order ID" IsFrozen="true" Width="120" />
-        <GridColumn Field="@nameof(Order.CustomerID)" HeaderText="Customer" IsFrozen="true" Width="150" />
-        <GridColumn Field="@nameof(Order.ShipCity)" HeaderText="Ship City" Width="150" />
-    </GridColumns>
-</SfGrid>
-
-{% endhighlight %}
-{% endtabs %}
-
-**Key migration changes:**
-
-- WPF `FrozenColumnCount` maps to `IsFrozen="true"` on individual Blazor columns.
-- Frozen columns are configured at the column level in Blazor.
-- Frozen columns work best with explicit column widths.
-- Virtualization can be enabled to improve performance with large data sets.
-- Set a fixed grid height to maintain smooth scrolling behavior.
-
 ## See also
 
 - [Blazor DataGrid Demos](https://blazor.syncfusion.com/demos/datagrid/overview?theme=fluent2)