Skip to content

Latest commit

 

History

History

EditFormExample

Readme.md

DataFormView for .NET MAUI - Edit a Contact’s Data

This example demonstrates how to use the DataFormView control to implement a contact edit form. To edit the user avatar, you can use the ImageEdit control.

DevExpress Data Form for iOS DevExpress Data Form for Android

Implementation Details

  • Specify the DataFormView.DataObject property to bind a DataFormView to an object.

  • Use a DataFormView editor's FieldName property to bind the editor to a view model's property:

    <dxdf:DataFormTextItem FieldName="FirstName" .../>

  • Call the DataFormView.Commit method to validate input values and send changes to the data source.

  • DataFormView supports validation events and attributes. The following code uses a validation event for Email values:

    private void ValidateCustomerProperties(object sender, DevExpress.Maui.DataForm.DataFormPropertyValidationEventArgs e) {
    if (e.PropertyName == "Email" && e.NewValue != null) {
        MailAddress res;
        if (!MailAddress.TryCreate((string)e.NewValue, out res)) {
            e.HasError = true;
            e.ErrorText = "Invalid email";
        }
    }
}

    The following code snippet defines validation attributes for FirstName and LastName properties:

    public class Customer {

[Required(ErrorMessage = "First Name cannot be empty")]
public string FirstName 
    //...
[Required(ErrorMessage = "Last Name cannot be empty")]
public string LastName 
    //...
}

  • DataFormView automatically aligns its editors. You can customize the color and width of editor labels:

    <dxdf:DataFormView EditorLabelColor="{StaticResource Primary}" EditorLabelWidth="40">

  • Embedded DataFormView's editors contain customization options such as LabelIcon, InplaceLabelText, LabelText, and IsInplaceLabelFloating.

  • You can use the LabelIcon property to divide editors into visual groups.

    <dxdf:DataFormView ...>
    <dxdf:DataFormTextItem FieldName="FirstName" LabelIcon="editorsname" .../>
    <dxdf:DataFormTextItem FieldName="LastName" .../>
</dxdf:DataFormView>

  • If an editor's LabelIcon property is not specified, DataFormView displays the bound property's name in the editor's label area. You can set the editor's LabelIcon property to an empty string to hide this text.

    <dxdf:DataFormTextItem FieldName="LastName" LabelText="" InplaceLabelText="Last Name" .../>

  • DataFormView items support masks. Specify the DataFormMaskedItem.Mask property to define a mask.

    <dxdf:DataFormMaskedItem Mask="+1 (000) 000-0000" />

  • Specify a DataFormItem's Keyboard property to define a type of keyboard used to input text.

Files to Look At

Documentation

More Examples