DevExpress Data Form for .NET MAUI

• Jul 03, 2024
• 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.

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:

XAML

<ContentPage ...
             xmlns:dx="http://schemas.devexpress.com/maui">
    <dx:DataFormView x:Name="dataform"/>
</ContentPage>

C#

public MainPage() {
    InitializeComponent();
    dataform.DataObject = new PersonalInfo();
}

Show data object implementation

C#

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 [phone]", 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.

Related Scenarios

Contact Edit Form

CRUD Operations