Create Your First App with DevExpress Mobile UI for .NET MAUI (Visual Studio Code)
- 4 minutes to read
You can use the DevExpress template (recommended) or standard project template to create a new .NET MAUI application.
Prerequisites
- Visual Studio Code
.NET Meteor & DotRush or standard.NET MAUI extension for Visual Studio Code
Note: Due to compatibility reasons, we recommend not to enable .NET Meteor & DotRush extensions and standard.NET MAUI extension simultaneously.
.NET MAUI workload
Use the command below in a terminal to install the .NET MAUI workload:
dotnet workload install maui
Create a Project with DevExpress .NET MAUI Controls Using .NET Meteor & DotRush Extensions
In the Explorer, click the Create New Project button:
In the invoked list, select .NET MAUI DevExpress App:
Then, specify a project name:
Select a folder to store the project and click Select.
The above steps create a boilerplate .NET MAUI project. The project file includes references to DevExpress NuGet packages, registers handlers, enables the theming mechanism (which also applies to standard controls), and declares XAML namespaces for DevExpress controls.
In the included nuget.config file, insert your NuGet authorization key in the following line:
<add key="DevExpress" value="https://nuget.devexpress.com/{Your-DevExpress-NuGet-Feed}/api" />
Select the device to run the project in the VS Code status bar. You can also use the .NET Meteor: Select Device command in the VS Code command palette to invoke a list of available devices. In the list, select a device to deploy the project.
Press F5 to run the project or click the Run button in the Run and Debug tab:
Note
You can also install DevExpress project templates and create a project with terminal commands. For more information, refer to the following help topic: CLI Templates (Windows and macOS).
Create a Project with DevExpress .NET MAUI Controls Using Standard.NET MAUI Extension
This section explains how to add DevExpress controls to the project created based on the standard .NET MAUI template. To get started, refer to the following page: Create your app.
After you create a project, 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).
...
<!--Default target frameworks-->
<!-- <PropertyGroup>
<TargetFrameworks>net8.0-android;net8.0-ios;net8.0-maccatalyst</TargetFrameworks>
<TargetFrameworks Condition="$([MSBuild]::IsOSPlatform('windows'))">$(TargetFrameworks);net8.0-windows10.0.19041.0</TargetFrameworks>
</PropertyGroup> -->
<!--Supported target frameworks-->
<PropertyGroup>
<TargetFrameworks>net8.0-android;net8.0-ios</TargetFrameworks>
</PropertyGroup>
...
See the following help section for more information: Supported Platforms.
Install DevExpress NuGet Packages
DevExpress project templates and components are distributed using NuGet packages. To obtain those packages, follow the instructions described in the following help topic: CLI Templates (Windows and macOS).
Register Handlers for DevExpress Components
The UseDevExpress method registers handlers for all DevExpress components. Call this method in the MauiProgram.cs file.
using DevExpress.Maui;
namespace DXMauiApp1 {
public static class MauiProgram {
public static MauiApp CreateMauiApp() {
var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.UseDevExpress()
.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();
}
}
}
Declare XAML Namespaces
If an application page includes DevExpress components, declare XAML namespaces that refer to corresponding CLR namespaces. Review the markup below for more information:
Declare the following DevExpress .NET MAUI XAML namespaces:
Add required components to a page. For example, add a DataGridView instance.
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:dx="clr-namespace:DevExpress.Maui.Core;assembly=DevExpress.Maui.Core"
xmlns:dxc="clr-namespace:DevExpress.Maui.Charts;assembly=DevExpress.Maui.Charts"
xmlns:dxcv="clr-namespace:DevExpress.Maui.CollectionView;assembly=DevExpress.Maui.CollectionView"
xmlns:dxsch="clr-namespace:DevExpress.Maui.Scheduler;assembly=DevExpress.Maui.Scheduler"
xmlns:dxg="clr-namespace:DevExpress.Maui.DataGrid;assembly=DevExpress.Maui.DataGrid"
xmlns:dxe="clr-namespace:DevExpress.Maui.Editors;assembly=DevExpress.Maui.Editors"
xmlns:dxdf="clr-namespace:DevExpress.Maui.DataForm;assembly=DevExpress.Maui.Editors"
xmlns:dxco="clr-namespace:DevExpress.Maui.Controls;assembly=DevExpress.Maui.Controls"
xmlns:dxga="clr-namespace:DevExpress.Maui.Gauges;assembly=DevExpress.Maui.Gauges"
xmlns:dxpdf="clr-namespace:DevExpress.Maui.Pdf;assembly=DevExpress.Maui.Pdf"
xmlns:dxhtml="clr-namespace:DevExpress.Maui.HtmlEditor;assembly=DevExpress.Maui.HtmlEditor"
xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls"
ios:Page.UseSafeArea="true"
x:Class="DXMauiApp1.MainPage">
<dxg:DataGridView/>
</ContentPage>
Enable Theming Mechanism
DevExpress components for .NET MAUI support built-in themes and different color schemes including light and dark modes. DevExpress project templates include theming support for standard controls. If you use standard templates, you should manually enable theming mechanisms for standard controls. For detailed instructions, refer to the following help topic: Apply Color Theme Colors to a Standard Control.
Additionally, you can paint the system bar according to the theme. To do this, enable the ThemeManager.ApplyThemeToSystemBars option in the MauiProgram.cs file:
public static class MauiProgram {
public static MauiApp CreateMauiApp() {
ThemeManager.ApplyThemeToSystemBars = true;
var builder = MauiApp.CreateBuilder();