Get Started with DevExpress Data Editors for .NET MAUI

• Nov 04, 2024
• 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

Watch Video: Adding Data Editors to Your .NET MAUI App

Prerequisites

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

• Microsoft .NET Multi-platform App UI documentation
• .NET MAUI and DevExpress Mobile UI Supported Platforms
• Requirements for .NET MAUI and DevExpress Mobile UI
• Get Started with DevExpress Controls for .NET Multi-platform App UI (.NET MAUI)

Create a New Project

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

• DevExpress v24.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.

Note

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 and required UseDevExpress* methods to initialize our components.

C#

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();
        builder
            .UseDevExpress(useLocalization: false)
            .UseDevExpressControls()
            .UseDevExpressCollectionView()
            .UseMauiApp<App>()
            //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.

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.

XAML

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:dx="http://schemas.devexpress.com/maui"
             xmlns:local="clr-namespace:EditorsGetStarted"
             x:Class="EditorsGetStarted.MainPage"
             BackgroundColor="{DynamicResource SecondaryColor}">
    <ScrollView>
        <StackLayout Padding="5">
            <dx:TextEdit
                Text="{Binding Login, Mode=TwoWay}"
                HasError="{Binding LoginHasError}"
                LabelText="Login"
                HelpText="*Required"
                ErrorText="Login is required"
                PlaceholderText="Enter login"/>
            <dx:PasswordEdit
                Text="{Binding Password, Mode=TwoWay}"
                HasError="{Binding PasswordHasError}"
                LabelText="Password"
                HelpText="*Required"
                ErrorText="The password should contain more than 5 characters, 
                    have at least one uppercase and one lowercase letter, and one number."
                PlaceholderText="Enter password"/>
            <dx:DateEdit
                Date="{Binding BirthDate, Mode=TwoWay}"
                LabelText="Birth date"
                TextHorizontalAlignment="End"
                IsDateIconVisible="False"
                ClearIconVisibility="Auto"
                DisplayFormat="d"
                PlaceholderText="Enter birth date"/>
            <dx:TextEdit
                Text="{Binding Phone, Mode=TwoWay}"
                LabelText="Phone"
                Mask="[phone]"
                ErrorText="Incorrect phone number"
                HelpText="Do not include a country code"
                Keyboard="Telephone"
                PlaceholderText="Enter phone number"/>
            <dx:MultilineEdit
                Text="{Binding Notes, Mode=TwoWay}"
                MinLineCount="2"
                MaxLineCount="4"
                LabelText="Notes"
                MaxCharacterCount="100"
                CharacterCounterVisibility="Auto"/>
            <dx:DXButton Content="SUBMIT" Clicked="OnSubmitClicked" FontAttributes="Bold" />
        </StackLayout>
    </ScrollView>
</ContentPage>

C#

using System.ComponentModel;
using System.Text.RegularExpressions;

namespace EditorsGetStarted;

public partial class MainPage : ContentPage {
    MainViewModel viewModel;
    public MainPage() {
        InitializeComponent();
        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;
    }
}