Lesson 2: Define Editors

  • 3 minutes to read

This lesson explains how a data form generates editors, lists supported editor types, and demonstrates how to assign a specific editor to the property of a data form’s underlying data object.

Editors - Overview

DataFormView stores its editors in the Items collection. An individual editor is a DataFormItem class descendant.

When you assign a data object to the DataFormView.DataObject property, the data form generates editors for all object properties and populates the Items collection with objects that correspond to property types.

Property Value Type

Data Form Item

Editor

String, Char

DataFormTextItem

TextEdit

Numeric*

DataFormNumericItem

NumericEdit

Bool

DataFormSwitchItem

Switch

DateTime

DataFormDateItem

DateEdit

TimeSpan

DataFormTimeItem

TimeEdit

Enum

DataFormComboBoxItem

ComboBoxEdit

Numeric* - Byte, Decimal, Double, Int16, Int32, Int64, SByte, Single, UInt16, UInt32, UInt64.

To explicitly specify the data form editor for a data object’s property, use one of the approaches below:

The following table lists supported attributes and data form items used to define data form editors.

Attribute

Data Form Item

Editor

DataFormTextEditorAttribute
DataFormMaskedEditorAttribute

DataFormTextItem
DataFormMaskedItem

TextEdit

DataFormNumericEditorAttribute

DataFormNumericItem

NumericEdit

DataFormMultilineEditorAttribute

DataFormMultilineItem

MultilineEdit

DataFormPasswordEditorAttribute

DataFormPasswordItem

PasswordEdit

DataFormCheckBoxEditorAttribute

DataFormCheckBoxItem

CheckEdit

DataFormSwitchEditorAttribute

DataFormSwitchItem

Switch

DataFormDateEditorAttribute

DataFormDateItem

DateEdit

DataFormTimeEditorAttribute

DataFormTimeItem

TimeEdit

DataFormComboBoxEditorAttribute

DataFormComboBoxItem

ComboBoxEdit

-

DataFormCustomItem

Any editor that you specify

Each attribute and data form item object has properties to specify editor-specific settings. For example:

Classes

Properties

Descriptions

Descendants:
DataFormTextEditorAttributeBase
DataFormTextItemBase

InplaceLabelText
Placeholder
Prefix/Suffix
Keyboard

Input prompt strings, prefix and suffix, and the keyboard type for a text editor.

DataFormMultilineEditorAttribute
DataFormMultilineItem

MinLineCount
MaxLineCount

The minimum and maximum number of lines in the MultilineEdit editor.

DataFormMaskedEditorAttribute
DataFormMaskedItem

Mask

The input mask for the TextEdit editor.

DataFormDateEditorAttribute
DataFormDateItem

MinDate
MaxDate

The earliest and latest date that can be selected in the DateEdit editor.

Example

Open the solution created in Lesson 1 and assign the following editors to PersonalInfo object properties:

  • PasswordEdit - to the Password property.
  • TextEdit with a specified input mask and Telephone keyboard - to the Phone property.

Before

After

Apply attributes to the PersonalInfo class properties in C# code, or set up data form item objects in XAML markup.

Use Attributes

  1. Place the DataFormPasswordEditorAttribute attribute before the Password property declaration.
  2. Place the DataFormMaskedEditorAttribute attribute with the specified Mask and Keyboard parameters before the Phone property declaration.
using DevExpress.XamarinForms.DataForm;
// ... 

namespace DataFormExample {
    public class PersonalInfo {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public DateTime BirthDate { get; set; }
        public virtual Gender Gender { get; set; }

        [DataFormPasswordEditor]
        public string Password { get; set; }

        public string Email { get; set; }

        [DataFormMaskedEditor(Mask = "(000) 000-0000", Keyboard = "Telephone")]
        public string Phone { get; set; }
    }
    public enum Gender { Female, Male, RatherNotSay }
}

Set Up Data Form Items

Add the following items to the data form’s Items collection:

<dxdf:DataFormView x:Name="dataForm">
    <dxdf:DataFormPasswordItem FieldName="Password"/>
    <dxdf:DataFormMaskedItem FieldName="Phone" Mask="(000) 000-0000" Keyboard="Telephone"/>
</dxdf:DataFormView>

When you add data form items to the Items collection, specify the RowOrder property for these items to set their position. Otherwise, corresponding editors are located at the top of the data form. The next lesson explains how to arrange editors.