Skip to main content

DevExpress v24.1 Update — Your Feedback Matters

Our What's New in v24.1 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DevExpress Data Form for .NET MAUI

  • 3 minutes to read

The DevExpress Mobile UI for .NET MAUI suite contains the DataFormView component that allows your users to review and edit business objects. The view can automatically generate data editors for each field in the bound business object, or you can manually add required data editors to the view.

Data Form

View Example Read Tutorial Watch Video

#Add a Data Form to a Page

  1. Download and install the DevExpress.Maui.Editors package from the DevExpress NuGet Gallery to obtain the DataFormView.

  2. Declare the xmlns:dx="http://schemas.devexpress.com/maui" XAML namespace in a page.

  3. Add a DataFormView instance to the page.

  4. Specify the DataFormView.DataObject property to define a data object whose property values you want to view and edit.

In the following example, a DataFormView automatically creates data editors:

<ContentPage ...
             xmlns:dx="http://schemas.devexpress.com/maui">
    <dx:DataFormView x:Name="dataform"/>
</ContentPage>
public MainPage() {
    InitializeComponent();
    dataform.DataObject = new PersonalInfo();
}
Show data object implementation
using DevExpress.Maui.DataForm;
using System.ComponentModel.DataAnnotations;
namespace DataFormGetStarted {
   public class PersonalInfo {
       [DataFormItemPosition(RowOrder = 1, ItemOrderInRow = 1)]
       [DataFormTextEditor(InplaceLabelText = "First Name")]
       [DataFormDisplayOptions(LabelIcon = "person_outline", GroupName = "Profile")]
       public string FirstName { get; set; }
       [DataFormItemPosition(RowOrder = 1, ItemOrderInRow = 2)]
       [DataFormTextEditor(InplaceLabelText = "Last Name")]
       [DataFormDisplayOptions(IsLabelVisible = false, GroupName = "Profile")]
       public string LastName { get; set; }
       [DataFormDisplayOptions(GroupName = "Profile")]
       public DateTime? BirthDate { get; set; }
       [DataFormDisplayOptions(GroupName = "Profile")]
       public virtual Gender Gender { get; set; }
       [DataFormPasswordEditor]
       [DataFormDisplayOptions(GroupName = "Profile")]
       [StringLength(64, MinimumLength = 8,
           ErrorMessage = "The password should contain at least 8 characters.")]
       [Required(ErrorMessage = "Required")]
       public string Password { get; set; }
       [DataFormDisplayOptions(GroupName = "Contact Info")]
       public string Email { get; set; }
       [DataFormMaskedEditor(Mask = "+0 (000) 000-0000", Keyboard = "Telephone")]
       [DataFormDisplayOptions(GroupName = "Contact Info")]
       [DataFormItemPosition(RowOrder = 1)]
       public string Phone { get; set; }
       [DataFormDisplayOptions(LabelText = "Subscribe to Newsletters", LabelMinWidth = 200, GroupName = "Contact Info")]
       public bool Newsletters { get; set; }
   }
   public enum Gender { Female, Male, RatherNotSay }
}

The DataFormView generates editors based on data object property types. Refer to the following help topic for more information: Editors.

For a step-by-step tutorial on how to add a DataFormView to your .NET MAUI app, refer to the following help topic: Get Started.

#Next Steps

Get Started with DataFormView
This step-by-step tutorial guides you through creating an app with a DataFormView.
Data Validation
Read this help topic to learn how to validate the user input before it is committed to the underlying data object. The DataFormView component allows you to validate data in the following ways: you can annotate data fields with attributes, handle validation events, or your data object can implement an interface that notifies you about errors. The component also supports various commit modes: on value change, editor focus change, and on demand.
Editors
This help topic describes data editors that are available in the DataFormView control. The DataFormView component generates editors based on the data type of fields in the bound business object. You can also populate a DataFormView with editors manually.
Labels
This help topic describes different types of text labels you can add to a DataFormView.
Groups
This article explains how to group DataFormView editors.
Layout and Appearance
Read this help topic to learn how to position editors in a DataFormView, and specify its appearance settings.
Examples
Lists task-based solutions that use the DataFormView control.

#Contact Edit Form

Search Bar Featured Scenario

#CRUD Operations

CRUD Operations Featured Scenario