Migrate WPF Applications to ASP.NET Core Blazor
- 6 minutes to read
When you migrate a WPF application to ASP.NET Core Blazor, you can reuse the data layer and business logic, but you need to reconstruct the UI from scratch. This article contains the following information:
- Resources that describe migration in general and application architecture choices that facilitate the transition.
- Tables that list DevExpress WPF controls and their DevExpress Blazor counterparts.
Why Use DevExpress UI Controls for Blazor
The DevExpress Blazor Component Suite ships with components and development libraries for Blazor Server, Blazor WebAssembly, and Blazor Hybrid hosting models. The suite includes a comprehensive set of UI controls, such as Data Grid, Pivot Grid, Scheduler, Chart, Data Editors, and Reporting. Review the complete list of available components in our documentation.
DevExpress Blazor Components can be purchased as part of the following DevExpress subscriptions: ASP.NET and Blazor (includes DevExtreme), DXperience, and Universal.
How to Migrate a Project: Useful Resources
For information on how to migrate your project to a different platform, review the following resources:
- Blog: Modern Desktop Apps And Their Complex Architectures
- Blog: Choosing a Framework/App Architecture for Desktop & Mobile Cross-Platform Apps
- Microsoft Learn: Overview of porting from .NET Framework to .NET
- Microsoft Learn: Build a Windows Presentation Foundation (WPF) Blazor app
DevExpress UI Components: Equivalents for Different Platforms
Most of our product lines contain similar component sets. Regardless of the platform, developers usually require the same UI controls for their business apps and websites.
Tables below list DevExpress WPF components and their DevExpress Blazor equivalents (or ways to implement similar functionality).
Data Grids
| WPF Component | Blazor Component |
|---|---|
| GridControl | DxGrid or DxTreeList |
| TreeListControl | DxTreeList |
| PropertyGridControl | — |
| GanttControl | Consider integrating DevExtreme Gantt. |
Data Binding
Refer to the following help topics for information on binding DevExpress Blazor controls to data:
If our standard data source bindings do not meet your business requirements, you can implement your own data provider. Refer to the following example for implementation details: Blazor Grid - Custom Data Source Binding using Entity Framework Core.
Export to CSV, PDF, and XLS/XLSX
WPF Grid and TreeList controls use the same internal export engine as their Blazor counterparts. Public API names may differ. Refer to the following documentation section for Blazor equivalents:
Item Selectors
| WPF Component | Blazor Component |
|---|---|
| ListBoxEdit | DxListBox<TData, TValue> |
| ComboBoxEdit, AutoSuggestEdit | DxComboBox<TData, TValue> |
| LookUpEdit (SearchLookUpEdit, MultiSelectLookUpEdit) | Based on required functionality, use one of the following options: 1. Use DxComboBox<TData, TValue> with columns. 2. Place DxGrid into DxDropDownBox.DropDownBodyTemplate (see Demo). |
| TokenLookUpEdit | DxTagBox<TData, TValue> |
| FontEdit | DxComboBox<TData, TValue> or DxDropDownBox (see Demo). |
Data Input Editors
| WPF Component | Blazor Component |
|---|---|
| ButtonEdit | Command buttons. |
| BrowsePathEdit | — |
| CheckEdit | DxCheckBox<T> |
| MemoEdit | DxMemo embedded into DxDropDownBox. |
| SpinEdit | DxSpinEdit<T> |
| TextEdit | DxTextBox |
| ToggleSwitchEdit | DxCheckBox<T> in switch mode. |
| PasswordBoxEdit | DxTextBox in password mode. |
Date and Time Editors
| WPF Component | Blazor Component |
|---|---|
| DateEdit | DxDateEdit<T> |
| DateNavigator | DxCalendar<T> |
| DateRangeControl | DxDateRangePicker<T> |
| TimePicker | DxTimeEdit<T> |
Image and Color Editors
| WPF Component | Blazor Component |
|---|---|
| ImageEdit | <img> tag[1]. Editing operations are unavailable. |
| PopupImageEdit | <img> tag[1] embedded into DxDropDownBox. |
| BrushEdit, ColorEdit | DxColorPalette |
| PopupBrushEdit, PopupColorEdit | DxColorPalette embedded into DxDropDownBox (see Demo). |
Buttons
| WPF Component | Blazor Component |
|---|---|
| SimpleButton | DxButton |
| DropDownButton | DxDropDownButton |
| SplitButton | DxSplitButton |
Navigation Controls
| WPF Component | Blazor Component |
|---|---|
| AccordionControl | DxAccordion |
| NavBarControl | DxAccordion or DxTreeView |
| OfficeNavigationBar | DxMenu |
| TileNavPane | — |
| TileBar | — |
| TreeViewControl | DxTreeView |
| Wizard | — |
| HamburgerMenu | DxMenu in a mobile view with a horizontal orientation. |
Ribbon, Bars & Menu
| WPF Component | Blazor Component |
|---|---|
| BarManager | Replicate each Bar and its items with a DxToolbar or DxMenu. |
| ToolBarControl, MainMenuControl | DxToolbar |
| RibbonControl | DxRibbon |
| DXContextMenu (PopupMenu, PopupControlContainer) | DxContextMenu or DxDropDown |
Layout Controls
| WPF Component | Blazor Component |
|---|---|
| DockLayoutManager | — |
| LayoutControl, DataLayoutControl | DxFormLayout |
| TileLayoutControl | — |
| DockLayoutControl | DxGridLayout or DxSplitter |
| FlowLayoutControl | — |
| DXTabControl | DxTabs |
| FlipView | DxCarousel |
| PageView | DxTabs |
Dialogs, Notifications, and Panels
| WPF Component | Blazor Component |
|---|---|
| ThemedWindow | DxFormLayout inside a DxPopup or DxWindow |
| MessageBoxService, ThemedMessageBox | DxMessageBox |
| WinUIMessageBox | DxMessageBox |
| DXOpenFileDialog, DXSaveFileDialog | DxFileInput, DxUpload |
| DXFolderBrowserDialog | — |
| FlyoutControl | DxFlyout |
| NotificationService | DxToast |
| WinUIDialogWindow | DxPopup or DxWindow |
Visualization Controls
| WPF Component | Blazor Component |
|---|---|
| ProgressBarEdit | DxProgressBar |
| SparklineEdit | DxSparkline |
| TrackBarEdit, Range Control | Use DxRangeSelector if you need two sliders. For one slider, consider integrating DevExtreme Slider. |
| RatingEdit | — |
Utility Controls
| WPF Component | Blazor Component |
|---|---|
| HyperlinkEdit | <a> tag |
| FlyoutControl | DxFlyout |
| Splash Screens, Wait Indicator | DxLoadingPanel, DxWaitIndicator |
| LoadingDecorator | DxLoadingPanel |
| Badge | Consider integrating Bootstrap Badge. |
| StepProgressBar | — |
| BarCodeEdit | Generate bar codes using Office File API[2] and display them within the <img> tag. |
| Calculator, PopupCalcEdit | — |
Office-Inspired Controls
| WPF Component | Blazor Component |
|---|---|
| RichEditControl | DxRichEdit |
| SchedulerControl | DxScheduler |
| SpreadsheetControl | — |
| SpellChecker | — |
| Office File API | Use the same APIs[2]. |
Reporting and Analytics
| WPF Component | Blazor Component |
|---|---|
| PdfViewerControl | DxPdfViewer |
| PivotGridControl | DxPivotTable |
| Visual Studio Report Designer | DxReportViewer |
| End-User Report Designer | DxReportDesigner |
| Dashboard Viewer, Dashboard Designer | Blazor Dashboard (includes both Designer and Viewer) |
Data Visualization
| WPF Component | Blazor Component |
|---|---|
| Charts Suite | DxChart<T>, DxPieChart<T>, DxPolarChart<T> |
| DiagramDesignerControl | Consider integrating DevExtreme Diagram. |
| Gauge Controls | DxBarGauge. Consider integrating DevExtreme Circular Bar Gauge (see Example). |
| MapControl | DxMap |
| TreeMapControl | Consider integrating DevExtreme TreeMap. |
| SunburstControl | — |
| SankeyDiagramControl | DxSankey |
| HeatmapControl | — |
Concepts
| WPF Concept | Blazor Concept |
|---|---|
| Application Themes, Lightweight Themes | Styling and Themes |
| MVVM Support | Although you can implement the MVVM pattern in your Blazor app, this approach is not common for Blazor. Refer to online resources to choose the best option based on your requirements. |
| Input Validation | Validate Input |
| Masked Input | Masks |
| AI-powered Extensions for WPF | DevExpress AI-powered Extensions for Blazor |
Inplace editors
Blazor Grid and TreeList use a similar column editor architecture that allows you to generate editors based on data field type. You can also specify custom cell templates, that is, display custom components or HTML markup in cells. Refer to the following help topics for more information:
- Blazor Grid - Cell Editors
- Blazor Grid - Templates
- Blazor TreeList - Cell Editors
- Blazor TreeList - Templates
WPF Bar Manager and Ribbon Control ship with a specially designed editor container item - BarEditItem. In Blazor, the editor integration technique depends on the container control. Use the following resources to find instructions:
Have a Question?
If you have additional technical questions about migration between UI platforms within the DevExpress ecosystem, feel free to contact us: DevExpress Support Center.
-
Example:
<img src="data:image/png;base64,{imageBytes} />. -
You need a DevExpress Office File API Subscription or DevExpress Universal Subscription license to use this library in production code.