Skip to main content

Get Started with DevExpress Data Editors for .NET MAUI

  • 4 minutes to read

This topic explains how to integrate our data editors into a .NET MAUI cross-platform solution. You can find the complete example on GitHub.

View Example: Get Started with DevExpress Editors for .NET MAUI


Refer to the following pages before you proceed with this Getting Started lesson:

Create a New Project

Create a new .NET MAUI project in Visual Studio 2022. You can use the following project templates to create a new application:

  • DevExpress v22.2 Mobile App (.NET MAUI)—project templates that are pre-configured to use our components.
  • .NET MAUI App—the standard .NET MAUI project templates that require manual configuration.

DevExpress Template - New .NET MAUI Project


The Mobile development with .NET workload is required to create a .NET MAUI project in Visual Studio 2022. See the following Microsoft help topic for more information: .NET MAUI Installation.

DevExpress Project Templates

If you use the DevExpress templates, the project is already pre-configured: required NuGet packages are installed, components are initialized, and XAML namespaces for our components are declared on predefined pages. You can immediately start creating the main page of the application (see below).

Standard Project Templates

If you use the standard .NET MAUI project templates, you should first install the DevExpress.Maui.Editors NuGet package from the DevExpress NuGet Gallery. See the following topic for more information: Register DevExpress NuGet Gallery to Access Mobile UI for .NET MAUI.

Then, in the MauiProgram.cs file, call the DevExpress.Maui.UseDevExpress method to initialize our components.

using DevExpress.Maui;
using Microsoft.Maui.Controls.Hosting;
using Microsoft.Maui.Hosting;

namespace EditorsExample;

public static class MauiProgram {
    public static MauiApp CreateMauiApp() {
        var builder = MauiApp.CreateBuilder();
            //This method adds handlers for all DevExpress components.
            .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();

Add Editors to the Main Page

The sample below shows how to create an account form—a user can enter a login, password, birth date, phone number, and notes.

.NET MAUI Editor Controls in a Login Form

Open the MainPage.xaml file, and remove the default content in the markup and code-behind. Copy and paste the markup below to this page. Note that the view model is defined and bound to the page’s binding context in code-behind.

<ContentPage xmlns=""
             BackgroundColor="{DynamicResource SecondaryColor}">
        <StackLayout Padding="5">
                Text="{Binding Login, Mode=TwoWay}"
                HasError="{Binding LoginHasError}"
                ErrorText="Login is required"
                PlaceholderText="Enter login"/>
                Text="{Binding Password, Mode=TwoWay}"
                HasError="{Binding PasswordHasError}"
                ErrorText="The password should contain more than 5 characters, 
                    have at least one uppercase and one lowercase letter, and one number."
                PlaceholderText="Enter password"/>
                Date="{Binding BirthDate, Mode=TwoWay}"
                LabelText="Birth date"
                PlaceholderText="Enter birth date"/>
                Text="{Binding Phone, Mode=TwoWay}"
                Mask="(000) 000-0000"
                ErrorText="Incorrect phone number"
                HelpText="Do not include a country code"
                PlaceholderText="Enter phone number"/>
                Text="{Binding Notes, Mode=TwoWay}"
            <dxco:SimpleButton Text="SUBMIT" Clicked="OnSubmitClicked" FontAttributes="Bold" />
using System.ComponentModel;
using System.Text.RegularExpressions;

namespace EditorsGetStarted;

public partial class MainPage : ContentPage {
    MainViewModel viewModel;
    public MainPage() {
        viewModel = new MainViewModel();
        BindingContext = viewModel;

    void OnSubmitClicked(Object sender, EventArgs e) {
        if (viewModel.Validate())
            DisplayAlert("Success", "Your account has been created successfully", "OK");

public class MainViewModel : INotifyPropertyChanged {
    string notes = "";
    public string Notes {
        get { return notes; }
        set { notes = value; OnPropertyChanged("Notes"); }

    DateTime? birthDate;
    public DateTime? BirthDate {
        get { return birthDate; }
        set { birthDate = value; OnPropertyChanged("BirthDate"); }

    string phone;
    public string Phone {
        get { return phone; }
        set { phone = value; OnPropertyChanged("Phone"); }

    string login = "";
    public string Login {
        get { return login; }
        set { login = value; OnPropertyChanged("Login"); }

    bool loginHasError = false;
    public bool LoginHasError {
        get { return loginHasError; }
        set { loginHasError = value; OnPropertyChanged("LoginHasError"); }

    string password = "";
    public string Password {
        get { return password; }
        set { password = value; OnPropertyChanged("Password"); }

    bool passwordHasError = false;
    public bool PasswordHasError {
        get { return passwordHasError; }
        set { passwordHasError = value; OnPropertyChanged("PasswordHasError"); }
    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged(string propertyName = "") {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));

    public bool Validate() {
        PasswordHasError = !Regex.IsMatch(password, @"^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{5,}$");
        LoginHasError = String.IsNullOrEmpty(login);
        return !PasswordHasError && !LoginHasError;