Create Your First App with DevExpress Mobile UI for .NET MAUI (Visual Studio for Windows)
- 5 minutes to read
You can use the DevExpress template (recommended) or standard project template to create a new .NET MAUI application.
The following video guides you through creating your first .NET MAUI project based on DevExpress components in Visual Studio for Windows:
Prerequisites
- Visual Studio 2022 17.8 or higher
- .NET 8
.NET MAUI workload
Use the command below in a terminal to install the .NET MAUI workload:
dotnet workload install mauiAlso, you can use the Visual Studio Installer to install .NET and the .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
Do any of the following to install VSIX DevExpress project templates for .NET MAUI:
- In the Visual Studio Marketplace, navigate to DevExpress .NET MAUI Project Templates for Visual Studio 2022. Download and install the extension.
In Visual Studio, navigate to Extensions > Manage Extensions. In the opened window, go to Online > Visual Studio Marketplace. Find DevExpress .NET MAUI Project Templates and click Download. Restart Visual Studio.
Tip
The DevExpress .NET MAUI Project Templates reference the latest version of DevExpress components. We recommend that you always use the latest version. If you do not wish to update, disable automatic template updates to use previous versions of DevExpress components. To do this, navigate to Installed, select the extension, and disable the Automatically update this extension option.
Create a DevExpress .NET MAUI Project
In Visual Studio, invoke File > New > Project. In the Create a new project window, find the DevExpress v23.2 Mobile App (.NET MAUI) template and click Next.
Configure the Project
In the Configure your new project window, specify the required fields and click Create.
In the invoked New mobile app window, select the main page type:
If a non-blank template is selected, the project also contains the Sign Up, Log In, About, and other auxiliary pages that you can configure.
You can also select the target platforms and controls that you plan to use. The wizard creates the corresponding projects in the solution and installs NuGet packages.
Use Standard Project Templates / Add DevExpress MAUI Components to an Existing Project
In Visual Studio, select File > New > Project. 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).
...
<!--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
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:
In the Solution Explorer window, right-click Dependencies and select Manage NuGet Packages.
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.Core- Contains classes, interfaces, and enums that implement the basic functionality of DevExpress components for MAUI.
DevExpress.Maui.Grid- Contains the DataGridView component.
DevExpress.Maui.Editors- Contains DataFormView, Chip, ChoiceChipGroup and other chip groups, TextEdit, and other data editors.
DevExpress.Maui.CollectionView- Contains the DXCollectionView component.
DevExpress.Maui.Charts- Contains the ChartView and PieChartView components.
DevExpress.Maui.Scheduler- Contains the MonthView, WeekView, and other scheduler views.
DevExpress.Maui.Controls- Contains the TabView, DXPopup, BottomSheet, and ShimmerView controls.
DevExpress.Maui.HtmlEditor*- Contains classes that implement the HtmlEdit functionality.
DevExpress.Maui.Gauges- Contains classes and interfaces that implement the RadialGauge and RadialProgressBar functionality.
DevExpress.Maui.Pdf*- Contains classes that implement the PdfViewer functionality.
* This control requires a license to our Universal Subscription. Without a valid license, you cannot use the control within your .NET MAUI application.
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>