Back to Devexpress

Create Your First App with DevExpress Mobile UI for .NET MAUI (Visual Studio for Windows)

maui-404023-get-started-build-your-first-app-visual-studio.md

latest13.4 KB
Original Source

Create Your First App with DevExpress Mobile UI for .NET MAUI (Visual Studio for Windows)

  • Dec 12, 2025
  • 6 minutes to read

DevExpress Template Kit ships with project templates that are based on DevExpress .NET MAUI components, and Visual Studio toolbox. Use the link below to download and install the DevExpress Template Kit extension to Visual Studio:

Download

You can also use the standard project template to create a .NET MAUI project and manually integrate DevExpress components into an existing project. For more information, refer to the following section: Use Standard Project Templates / Add DevExpress MAUI Components to an Existing Project.

Prerequisites

  • Visual Studio 2022 17.12 or higher
  • .NET 9
  • .NET MAUI workload

Install DevExpress Project Templates and Create a Project

DevExpress project templates are distributed in two ways: as a .vsix file or a NuGet package (CLI project templates). VSIX templates allow you to create an empty, tabbed, or flyout DevExpress .NET MAUI application in Visual Studio for Windows.

The project created based on DevExpress templates will include references to corresponding DevExpress NuGet packages and register all required handlers. The predefined pages will also declare XAML namespaces for DevExpress controls.

Install Templates

In Visual Studio, select ExtensionsManage Extensions… to run Extension Manager. Type DevExpress Template Kit for Visual Studio and click Install :

You can also use the following link to download and install DevExpress Template Kit for Visual Studio:

Download

Create a Project and Configure it in the Wizard

To run the Project Wizard, follow the steps below:

In Visual Studio, select FileNewProject.

In the Create a new project window, select DevExpress v25.2 Template Kit and click Next :

Specify the project name and location, and click Create to run the unified DevExpress Project Wizard:

Once the Project Wizard appears, select .NET MAUI to proceed:

The Project Wizard will guide your through three project creation stages:

  1. Select navigation type

Select the project navigation type and target platform.

  1. Select modules

Select modules to add to the app. Each independent module contains a predefined solution to implement one of popular usage scenario.

  1. Add views to the application

Add one or multiple predefined views to the app and click CREATE PROJECT to finish the project creation.

Use Toolbox to Add Components to Page

The DevExpress Template Kit for Visual Studio ships with a toolbox that lists all the components you can add to a page. In addition to standalone controls in the Components tab, the toolbox allows you to add compound UI elements listed in the Blocks tab.

To invoke the DevExpress .NET MAUI Toolbox window, run the command in Visual Studio: ExtensionsDevExpress.NET MAUIShow toolbox.

Drag an item from the list to the markup to add it to the page.

You can add items from the toolbox only when a XAML document is opened.

Use Standard Project Templates / Add DevExpress MAUI Components to an Existing Project

In Visual Studio, select FileNewProject. In the Create a new project window, find the .NET MAUI App template and click Next.

For more information, refer to the following help topic: Build your first app.

If you use standard templates, you should install DevExpress NuGet packages, register handlers, and declare XAML namespaces. We also recommend that you remove unsupported platforms such as Windows and Mac Catalyst in the project file (.csproj).

xml
...
<!--Default target frameworks-->
<!-- <PropertyGroup>
        <TargetFrameworks>net9.0-android;net9.0-ios;net9.0-maccatalyst</TargetFrameworks>
        <TargetFrameworks Condition="$([MSBuild]::IsOSPlatform('windows'))">$(TargetFrameworks);net9.0-windows10.0.19041.0</TargetFrameworks>
</PropertyGroup> -->

<!--Supported target frameworks-->
<PropertyGroup>
    <TargetFrameworks>net9.0-android;net9.0-ios</TargetFrameworks>
</PropertyGroup>
...

Refer to the following help section for more information: Supported Platforms.

Install DevExpress NuGet Packages

Tip

Before you install DevExpress NuGet Packages, make certain to register the DevExpress NuGet gallery.

Topic: Register DevExpress NuGet Gallery to Access Mobile UI for .NET MAUI.

Follow the steps below to install NuGet packages using the NuGet Package Manager:

  1. In the Solution Explorer window, right-click Dependencies and select Manage NuGet Packages.

  2. In the NuGet Package Manager window, select the DevExpress package source, activate the Browse tab, find the required DevExpress.Maui.~ package, and click Install.

The DevExpress NuGet Gallery includes the following packages and components:

DevExpress.Maui.CoreContains classes, interfaces, and enums that implement the basic functionality of DevExpress components for MAUI. This package also includes such components as DXButton, SlideView, DXScrollView, DXStackLayout, DXWrapLayout, and DXDockLayout.DevExpress.Maui.GridContains the DataGridView component.DevExpress.Maui.EditorsContains DataFormView, Chip, ChoiceChipGroup and other chip groups, TextEdit, and other data editors.DevExpress.Maui.CollectionViewContains the DXCollectionView component.DevExpress.Maui.TreeViewContains the DXTreeView component.DevExpress.Maui.ChartsContains the ChartView and PieChartView components.DevExpress.Maui.SchedulerContains the MonthView, WeekView, and other scheduler views.DevExpress.Maui.ControlsContains the TabView, DXPopup, BottomSheet, and ShimmerView controls.DevExpress.Maui.HtmlEditor*Contains classes that implement the HtmlEdit functionality.DevExpress.Maui.GaugesContains classes and interfaces that implement the RadialGauge and RadialProgressBar functionality.DevExpress.Maui.Pdf*Contains classes that implement the PdfViewer functionality.

Register Handlers for DevExpress Components

Use any of the DevExpress.Maui.MauiAppBuilderExtensions_* methods to register the assembly. The following table lists methods and assemblies that they register:

MethodAssembly
UseDevExpress(MauiAppBuilder, Boolean)DevExpress.Maui.Core.dll
UseDevExpressCharts(MauiAppBuilder)DevExpress.Maui.Charts.dll
UseDevExpressCollectionView(MauiAppBuilder)DevExpress.Maui.CollectionView.dll
UseDevExpressControls(MauiAppBuilder)DevExpress.Maui.Controls.dll
UseDevExpressDataGrid(MauiAppBuilder)DevExpress.Maui.DataGrid.dll
UseDevExpressDataGridExport(MauiAppBuilder)DevExpress.Maui.DataGrid.Export.dll
UseDevExpressEditors(MauiAppBuilder)DevExpress.Maui.Editors.dll
UseDevExpressGauges(MauiAppBuilder)DevExpress.Maui.Gauges.dll
UseDevExpressHtmlEditor(MauiAppBuilder)DevExpress.Maui.HtmlEditor.dll
UseDevExpressPdf(MauiAppBuilder)DevExpress.Maui.Pdf.dll
UseDevExpressScheduler(MauiAppBuilder)DevExpress.Maui.Scheduler.dll
UseDevExpressTreeView(MauiAppBuilder)DevExpress.Maui.TreeView.dll

When you reference a DevExpress .NET MAUI control, you need to register it in your application’s MauiAppBuilder (MauiProgram.cs file). For example, if your project references a DevExpress.Maui.DataGrid.dll, you should register this assembly and all assemblies that are referenced by the DataGrid:

csharp
using DevExpress.Maui;

namespace DXMauiApp1 {
    public static class MauiProgram {
        public static MauiApp CreateMauiApp() {
            var builder = MauiApp.CreateBuilder();
            builder
                .UseMauiApp<App>()
                .UseDevExpress(useLocalization: false)
                .UseDevExpressCollectionView()
                .UseDevExpressControls()
                .UseDevExpressEditors()
                .UseDevExpressDataGrid()
                .ConfigureFonts(fonts => {
                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                    fonts.AddFont("univia-pro-regular.ttf", "Univia-Pro");
                    fonts.AddFont("roboto-bold.ttf", "Roboto-Bold");
                    fonts.AddFont("roboto-regular.ttf", "Roboto");
                });

            return builder.Build();
        }
    }
}

You can use our code analyzer to reference all required assemblies.

Declare XAML Namespaces

You can declare the xmlns:dx="http://schemas.devexpress.com/maui" XAML namespace and then use it to access any of DevExpress .NET MAUI control:

xaml
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:dx="http://schemas.devexpress.com/maui"
             xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls"
             ios:Page.UseSafeArea="true"
             x:Class="DXMauiApp1.MainPage">

    <dx:DataGridView/>
    <dx:TextEdit/> 
    <dx:PdfViewer/> 
    <dx:HtmlEdit/>
</ContentPage>

See Also

CLI Project Templates

Register DevExpress NuGet Gallery to Access Mobile UI for .NET MAUI

Create Your First App with DevExpress Mobile UI for .NET MAUI (VS Code)