Migrate Windows Forms Applications to ASP.NET Core Blazor
- 7 minutes to read
When you migrate a Windows Forms 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 information related to:
- Resources that describe migration in general and application architecture choices that facilitate the transition.
- Tables that list DevExpress Windows Forms 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 topic: Overview of porting from .NET Framework to .NET
- Microsoft Topic: Build a Windows Forms 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 Windows Forms components and their DevExpress Blazor equivalents (or ways to implement similar functionality).
Data Grids
| Windows Forms Component | Blazor Component |
|---|---|
| GridControl | DxGrid |
| GridControl in CardView mode | Possible to implement using DxGridLayout and DxLayoutBreakpoint (see Demo). |
| TreeList | DxTreeList or DxTreeView |
| VGridControl | — |
| PropertyGridControl | — |
| GanttControl | Consider integrating DevExtreme Gantt. |
Data Binding
Blazor Grid and TreeList allow you to implement the same set of data binding scenarios. Refer to the following help topics for information on data binding:
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
Windows Forms 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 to find Blazor equivalents:
Lookup Editors
| Windows Forms Component | Blazor Component |
|---|---|
| LookUpEdit | Based on required functionality, you have the following options: 1. Use DxComboBox<TData, TValue> with columns. 2. Place DxGrid into DxDropDownBox.DropDownBodyTemplate (see Demo). |
| GridLookUpEdit | Place DxGrid into DxDropDownBox.DropDownBodyTemplate (see Demo). |
| SearchLookUpEdit | Place DxGrid into DxDropDownBox.DropDownBodyTemplate (see Demo). |
| TreeListLookUpEdit | Place DxTreeList into DxDropDownBox.DropDownBodyTemplate (see Demo). |
Text Editors
| Windows Forms Component | Blazor Component |
|---|---|
| ButtonEdit | Use command buttons. |
| HyperLinkEdit | Use the <a> tag. |
| MemoEdit | DxMemo |
| TokenEdit | DxTagBox<TData, TValue> |
| TextEdit | DxTextBox |
Numeric Editors
| Windows Forms Component | Blazor Component |
|---|---|
| SpinEdit | DxSpinEdit<T> |
| TimeEdit | DxTimeEdit<T> |
Buttons and Labels
| Windows Forms Component | Blazor Component |
|---|---|
| CheckButton | Enable selection in a DxButtonGroup with one button. |
| DropDownButton | DxDropDownButton, DxSplitButton |
| LabelControl | Use the <span> or <label> tag. |
| SimpleButton | DxButton |
| WindowsUIButtonPanel | If you want to implement navigation between data records, use DxPager. If you want to implement a set of command buttons, use DxButtonGroup. |
Menu & Navigation Controls
| Windows Forms Component | Blazor Component |
|---|---|
| AccordionControl, NavBarControl | DxAccordion or DxTreeView |
| OfficeNavigationBar | DxMenu |
| NavigationPane | Use DxAccordion or DxTreeView to implement routing (see Example). |
| RibbonControl | DxRibbon |
| BarManager | Replicate each Bar and its items with a DxToolbar or DxMenu. |
| PopupMenu | DxContextMenu |
| RadialMenu | — |
| TileBar | — |
| TileNavPane | — |
| ToolboxControl | — |
Forms & Layout
| Windows Forms Component | Blazor Component |
|---|---|
| XtraForm and other DevExpress Windows Forms | A browser page is equivalent to a form. Use DxPopup or DxWindow to replace child dialogs. |
| DockManager | — |
| LayoutControl, DataLayoutControl | DxFormLayout |
| GroupControl | Use DxFormLayoutGroup within DxFormLayout |
| SplitContainerControl | DxSplitter |
| NavigationFrame | Use DxAccordion or DxTreeView to implement routing (see Example). |
| XtraTabControl, TabPane | DxTabs |
| TabbedView, XtraTabbedMdiManager | Possible to implement a tab header’s context menu functionality (see Example). If you do not need a context menu, use DxTabs. |
| StackPanel | DxStackLayout |
| TablePanel | DxGridLayout |
| SidePanel | Use DxDrawer along with DxSplitter. |
| WizardControl | — |
| WidgetView in Stack Layout mode | DxStackLayout |
| WidgetView in Table Layout mode | DxGridLayout |
| WidgetView in Flow Layout mode | Align document content using display: inline-block. |
| WidgetView in Free Layout mode | — |
Item Selectors
| Windows Forms Component | Blazor Component |
|---|---|
| CalcEdit | — |
| ColorEdit | DxColorPalette |
| ColorPickEdit | Embed DxColorPalette into DxDropDownBox (see Demo). |
| ComboBoxEdit | DxComboBox<TData, TValue> |
| DateEdit | DxDateEdit<T> |
| ImageComboBoxEdit | Use templates in a DxComboBox<TData, TValue> (see Demo - Item Template and Demo - Edit Box Display Template). |
| ImageEdit | Embed the <img> tag[1] into DxDropDownBox to display images. Context menu and editing operations are unavailable. |
| ListBoxControl | DxListBox<TData, TValue> |
| CheckedListBoxControl | Enable check box selection in DxListBox<TData, TValue>. |
| ImageListBoxControl | Use DxListBox<TData, TValue> with templates (see Demo). |
| MemoExEdit | Embed DxMemo into DxDropDownBox. |
| MRUEdit | — |
| PopupContainerEdit | DxDropDownBox |
| PopupGalleryEdit | — |
| FontEdit | Use DxComboBox<TData, TValue> or DxDropDownBox (see Demo). |
| CheckedComboBoxEdit | DxDropDownBox with a custom template (see Demo) |
| BreadCrumbEdit | Consider integrating Bootstrap Breadcrumbs (see Example). |
| TimeSpanEdit | DxTimeEdit<T> |
Messages, Notifications, and Dialogs
| Windows Forms Component | Blazor Component |
|---|---|
| XtraMessageBox | DxMessageBox |
| XtraInputBox | DxMessageBox |
| XtraDialog | DxPopup |
| XtraOpenFileDialog, XtraSaveFileDialog | DxFileInput, DxUpload |
| XtraFolderBrowserDialog | — |
| FlyoutDialog | DxPopup |
| FlyoutPanel | DxFlyout |
| AlertControl | DxToast |
| Tooltips | Use DxFlyout or CSS tooltip. |
Editors Without Textboxes
| Windows Forms Component | Blazor Component |
|---|---|
| CalendarControl | DxCalendar<T> |
| CheckEdit | DxCheckBox<T> |
| SvgImageBox | Use the <img> tag[1]. |
| RatingControl | — |
| ProgressBarControl | DxProgressBar |
| StepProgressBar | — |
| ProgressPanel | DxWaitIndicator |
| RadioGroup | DxRadioGroup<TData, TValue> |
| PictureEdit | Use the <img> tag[1] to display images (see Example). Editing operations are unavailable. |
| Splash Screens | DxLoadingPanel, DxWaitIndicator |
| TrackBarControl | Consider integrating DevExtreme Slider. |
| RangeControl | DxRangeSelector |
| RangeTrackBarControl | DxRangeSelector |
| ZoomTrackBarControl | Consider integrating DevExtreme Slider. |
| SparklineEdit | DxSparkline |
| ToggleSwitch | Use DxCheckBox<T> in switch mode. |
Utility Controls
| Windows Forms Component | Blazor Component |
|---|---|
| BarCodeControl | Generate bar codes using Office File API[2] and display them within the <img> tag. |
| DataNavigator | Use DxPager. If you need to scroll to a specific data record, use DxButtonGroup along with Grid/TreeList APIs. |
| FilterControl, FilterEditorControl | DxFilterBuilder |
| ImageSlider | DxCarousel |
| GalleryControl | — |
| CameraControl | — |
| SearchControl | DxSearchBox |
Office-Inspired Controls
| Windows Forms Component | Blazor Component |
|---|---|
| RichEditControl | DxRichEdit |
| SchedulerControl | DxScheduler |
| SpreadsheetControl | — |
| SpellChecker | — |
| Office File API | Use the same APIs[2]. |
Reporting and Analytics
| Windows Forms Component | Blazor Component |
|---|---|
| PdfViewer | DxPdfViewer |
| PivotGridControl | DxPivotTable |
| Report Viewer | DxReportViewer |
| End-User Report Designer | DxReportDesigner |
| Dashboard Viewer, Dashboard Designer | Blazor Dashboard (includes both Designer and Viewer) |
Data Visualization
| Windows Forms Component | Blazor Component |
|---|---|
| ChartControl | DxChart<T>, DxPieChart<T>, DxPolarChart<T> |
| DiagramControl | Possible to integrate DevExtreme Diagram. |
| GaugeControl | DxBarGauge. Consider integrating DevExtreme Circular Bar Gauge (see Example). |
| MapControl | DxMap |
| TreeMapControl | Consider integrating DevExtreme TreeMap. |
| SunburstControl | Possible to implement using DxPieChart<T> (see Demo). |
| SankeyDiagramControl | DxSankey |
| HeatmapControl | — |
UI Templates
You can replace the following WinForms UI templates with a single component in Blazor:
| Windows Forms UI Template | Blazor Component |
|---|---|
| Button Groups | DxButtonGroup |
| Buttons | DxButton |
| DateRangePicker | DxDateRangePicker<T> |
Concepts
| Windows Forms Concept | Blazor Concept |
|---|---|
| DXErrorProvider | Possible to display validation icons and colored outlines. |
| DXValidationProvider | Use standard Blazor validation mechanisms. |
| Application Skins | Styling and Themes. |
Inplace Editors
Windows Forms grid-like controls allow you to automatically generate a data editor based on the data field type. The editor is used to display and edit cells in a specific column.
Blazor Grid and TreeList use a similar column editor architecture, albeit with a smaller number of built-in editor types. However, you can also specify custom cell templates, which allow you to display components or custom HTML markup in cells. Refer to the following topics for additional information:
- Blazor Grid - Cell Editors
- Blazor Grid - Templates
- Blazor TreeList - Cell Editors
- Blazor TreeList - Templates
Windows Forms Bar Manager and Ribbon Control allow you to embed data editors with a specially designed bar item type - BarEditItem. In Blazor, the technique depends on the bar-like control. Use the following links 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.