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/v3/index.json" />
Note
Storing credentials in a NuGet.config file (especially when saving NuGet.config to your source control) is risky because it can lead to credential leakage. If you store credentials in NuGet.config, please consider using a more secure option as described in Consuming packages from authenticated feeds and How to Protect Your Private NuGet Feed and Safely Consume the Feed From External Systems.
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
Use any of the DevExpress.Maui.MauiAppBuilderExtensions_* methods to register the assembly. The following table lists methods and assemblies that they register:
| Method | Assembly |
|---|---|
| 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:
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 than use it to access any of DevExpress .NET MAUI control:
<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">
<dx:DataGridView/>
<dx:TextEdit/>
<dx:PdfViewer/>
<dx:HtmlEdit/>
</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();