Editors in Xamarin DataForm (SfDataForm)

14 Sep 202324 minutes to read

The data form supports several built-in editors as follows:

Editor name	Editor class	Supported Data Type/Attribute	Input control loaded
Text	DataFormTextEditor	The String type property and any other type apart from the below specified cases.	Entry
MultilineText	DataFormMultiLineTextEditor	The String type property with multi line text. [DataType(DataType.MultilineText)]	Editor
Numeric	DataFormNumericEditor	The property of Int, Double, Float, Decimal, Long types and also its nullable property.	SfNumericTextBox
Percent	DataFormNumericEditor	The property of Int, Double, Float, Decimal, Long types and also its nullable property with [DataType(“Percent”)] attribute.	SfNumericTextBox
Currency	DataFormNumericEditor	The property of Int, Double, Float, Decimal, Long types and also its nullable property with [DataType(DataType.Currency)] attribute.	SfNumericTextBox
Date	DataFormDateEditor	DateTime type property and the property with [DataType(DataType.Date)] and [DataType(DataType.DateTime)] attributes.	DatePicker
Time	DataFormTimeEditor	The property with [DataType(DataType.Time)] attribute.	TimePicker
NumericUpDown	DataFormNumericUpDownEditor	Int or Double type property.	SfNumericUpDown
Segment	DataFormSegmentedEditor	Enum type property.	SfSegmentedControl
Bool	DataFormCheckBoxEditor	Bool type property.	SfCheckBox
Switch	DataFormSwitchEditor	Bool type property.	Switch
Picker	DataFormPickerEditor	Enum and List type property. [EnumDataTypeAttribute]	Picker
DropDown	DataFormDropDownEditor	Enum and List type property. [EnumDataTypeAttribute]	SfComboBox
Password	DataFormPasswordEditor	The String type property and property with [DataType(DataType.Password)] attribute.	Entry
RadioGroup	DataFormRadioGroupEditor	Enum and List type property. [EnumDataTypeAttribute]	SfRadioGroup
MaskedEditText	DataFormMaskedEditTextEditor	The property with [DataType(DataType.PhoneNumber)] attribute.	SfMaskedEdit
AutoComplete	DataFormAutoCompleteEditor	Enum and List type property. [EnumDataTypeAttribute]	SfAutoComplete

Text editor

In the text editor, the Entry is loaded.

See also

How to change the text color of the editor in Xamarin.Forms DataForm (SfDataForm)
How to programmatically set focus to editor in Xamarin.Forms DataForm (SfDataForm)

Multiline Text editor

In the MultilineText editor, the Editor is loaded.

And MultilineText editor height will auto expand/reduce based on the line wraps in editor , which allowing text to be readable without scrolling the editor.

C#

[DataType(DataType.MultilineText)]
public String Address { get; set; }

Numeric editor

In the numeric editor, the SfNumericTextBox is loaded.

Change maximum NumberDecimalDigits in the numeric editor

In the SfNumericTextBox, two decimal digits will be displayed by default. You can change the number of decimal digits being displayed by setting the MaximumNumberDecimalDigits property in the DataFormNumericItem.

C#

dataForm.AutoGeneratingDataFormItem += DataForm_AutoGeneratingDataFormItem;
private void DataForm_AutoGeneratingDataFormItem(object sender, AutoGeneratingDataFormItemEventArgs e)
{
    if (e.DataFormItem != null && e.DataFormItem.Name == "Amount")
    {
        (e.DataFormItem as DataFormNumericItem).MaximumNumberDecimalDigits = 3;
    }
}

See also

How to remove a thousand separators in the numeric text field in Xamarin.Forms DataForm (SfDataForm)
How to resolve missing decimal point issue on Samsung Devices (S6, S8) numeric keyboard in DataForm ?

Date editor

In the date editor, the DatePicker will be loaded.

Setting null value in date editor

In DatePicker, the default date value (1/01/0001) is displayed by default. You can also set the null value by adding nullable DateTime data type for the date picker property in data form, which allows you to set the null value and display the empty value in date editor.

C#

[DataType(DataType.Date)]
[Display(Name ="Birth Date")]
public DateTime? BirthDate { get; set; }

Customizing format in date editor

In the DatePicker, short date will be shown by default. You can change the applied format by setting the Format property in DataFormDateItem.

C#

dataForm.AutoGeneratingDataFormItem += DataForm_AutoGeneratingDataFormItem;

private void DataForm_AutoGeneratingDataFormItem(object sender, AutoGeneratingDataFormItemEventArgs e)
{   

    if (e.DataFormItem != null && e.DataFormItem.Name == "Date")
    {
        (e.DataFormItem as DataFormDateItem).Format = "ddd, MMM d, yyyy";
    }
}

Setting title for date editor

You can set title to the date editor by handling the Title property in DataFormDateItem. The default value of the property is Choose Date.

C#

dataForm.AutoGeneratingDataFormItem += DataForm_AutoGeneratingDataFormItem;

private void DataForm_AutoGeneratingDataFormItem(object sender, AutoGeneratingDataFormItemEventArgs e)
{   

    if (e.DataFormItem != null && e.DataFormItem.Name == "BirthDate")
    {       
         if(Device.RuntimePlatform == Device.UWP)
        {
            (e.DataFormItem as DataFormDateItem).Title = "Select a date";
        }
    }
}

N Title property is applicable only for XForms UWP platform.

Setting MaximumDate and MinimumDate in date editor

You can customize the maximum and minimum allowable dates in the DatePicker by setting MaximumDate and MinimumDate in the DataFormDateItem respectively.

C#

dataForm.AutoGeneratingDataFormItem += DataForm_AutoGeneratingDataFormItem;

private void DataForm_AutoGeneratingDataFormItem(object sender, AutoGeneratingDataFormItemEventArgs e)
{
    if (e.DataFormItem != null && e.DataFormItem.Name == "Date")
    {
        (e.DataFormItem as DataFormDateItem).MinimumDate = new DateTime(2017, 5, 5);
        (e.DataFormItem as DataFormDateItem).MaximumDate = new DateTime(2017, 9, 2);
    }
}

Time editor

In the time editor, the TimePicker will be loaded.

Setting null value in time editor

In TimePicker, the default time value (12:00 AM) is displayed by default. You can also set the null value by adding nullable DateTime data type for the time picker property in data form, which allows you to set the null value and display the empty value in time editor.

C#

[DataType(DataType.Time)]
[Display(Name = "Birth Time")]
public DateTime? BirthTime { get; set; }

Customizing format in time editor

In the TimePicker, short time will be shown by default. You can change the applied format by setting the Format property in DataFormTimeItem.

C#

dataForm.AutoGeneratingDataFormItem += DataForm_AutoGeneratingDataFormItem;

private void DataForm_AutoGeneratingDataFormItem(object sender, AutoGeneratingDataFormItemEventArgs e)
{
    if (e.DataFormItem != null && e.DataFormItem.Name == "BirthTime")
        (e.DataFormItem as DataFormTimeItem).Format = "HH:mm";
}

Setting title for time editor

You can set title to the time editor by handling the Title property in DataFormTimeItem. The default value of this property is Choose Time.

C#

dataForm.AutoGeneratingDataFormItem += DataForm_AutoGeneratingDataFormItem;

private void DataForm_AutoGeneratingDataFormItem(object sender, AutoGeneratingDataFormItemEventArgs e)
{   

    if (e.DataFormItem != null && e.DataFormItem.Name == "BirthTime")
    {
        if(Device.RuntimePlatform == Device.UWP)
        {
            (e.DataFormItem as DataFormTimeItem).Title = "Select time of birth";
        }
    }
}

NOTE

Title property is applicable only for XForms UWP platform.

Segment editor

In segment editor, the SfSegmentedControl is loaded, and DataForm Segment editor supports to enum and List data type properties.

To add Segment editor in DataForm, register the editor as Segment for the required property using the RegisterEditor method.

Support for enum data type

By default, the ItemsSource for SfSegmentedControl is auto-generated for enum data types, if the property has been registered for Segment editor.

C#

dataForm.RegisterEditor("SaveTo", "Segment");

private Location saveTo;

[Display(Name = "Save To")]
public Location SaveTo
{
    get { return saveTo; }
    set { this.saveTo = value; }
}
public enum Location
{
    Sim,
    Phone
}

Customizing ItemsSource of SfSegmentedControl

For List data types, you can set the ItemsSource for SfSegmentedControl by using the SourceProvider or using ItemsSource property of DataFormSegmentItem.

Using SourceProvider

C#

private string saveTo;
[Display(Name ="Save To")]
public string SaveTo
{
    get { return saveTo; }
	set { this. saveTo = value; }
}

public class SourceProviderExt : SourceProvider
{
    public override IList GetSource(string sourceName)
    {
		var list = new List<string>();
		if(sourceName == "SaveTo")
		{
			list.Add("Sim");
			list.Add("Phone");
		}
		return list;
	}
}

dataForm.RegisterEditor("SaveTo", "Segment");
dataForm.SourceProvider = new SourceProviderExt();

Using ItemsSource property of DataFormSegmentItem

You can also set ItemsSource for segment editor by using the ItemsSource property in the DataFormSegmentItem.

C#

dataForm.RegisterEditor("SaveTo", "Segment");
dataForm.AutoGeneratingDataFormItem += DataForm_AutoGeneratingDataFormItem;

private void DataForm_AutoGeneratingDataFormItem(object sender, AutoGeneratingDataFormItemEventArgs e)
{
    if (e.DataFormItem != null && e.DataFormItem.Name == "SaveTo")
    {
		var list = new List<string>();
		list.Add("Sim");
		list.Add("Phone");
		(e.DataFormItem as DataFormSegmentItem).ItemsSource = list;
    }
}

CheckBox editor

In CheckBox editor, the SfCheckBox control is loaded. By default, for bool data type property, the CheckBox editor will be loaded in data form.

C#

[Display(Name = "Is Billable")]
public bool IsBillable { get; set; } = true;

[Display(Name = "Registered Member")]
public bool RegisteredMember { get; set; }

Visual states of SfCheckBox

SfCheckBox support three visual states.

• Checked
• UnChecked
• Intermediate

C#

[Display(Name = "Is Billable")]
public bool IsBillable { get; set; } = true;

[Display(Name = "Registered Member")]
public bool RegisteredMember { get; set; } = false;

[Display( Name = "Is Refundable")]
public bool? IsRefundable { get; set; } = null;

Customizing the SfCheckBox state color

You can change the  color of the checked/indeterminate state of SfCheckBox using the CheckedColor property and  change the  color of unchecked state  using the UnCheckedColor property in DataFormCheckBoxItem in the AutoGeneratingDataFormItem event of data form.

C#

dataForm.AutoGeneratingDataFormItem += DataForm_AutoGeneratingDataFormItem;

private void DataForm_AutoGeneratingDataFormItem(object sender, AutoGeneratingDataFormItemEventArgs e)
{
    if (e.DataFormItem != null)
    {
        if (e.DataFormItem.Name == "IsBillable")
        {
            (e.DataFormItem as DataFormCheckBoxItem).CheckedColor = Color.Green;
        }
        if (e.DataFormItem.Name == "RegisteredMember")
        {
            (e.DataFormItem as DataFormCheckBoxItem).UnCheckedColor = Color.Blue;
        }
    }
}

Setting SfCheckBox caption text

You can customize the appearance of display text in SfCheckBox using the Text property of the DataFormCheckBoxItem.

C#

[DisplayOptions(ShowLabel = false)]
public bool Agree { get; set; }
		
dataForm.AutoGeneratingDataFormItem += DataForm_AutoGeneratingDataFormItem;

private void DataForm_AutoGeneratingDataFormItem(object sender, AutoGeneratingDataFormItemEventArgs e)
{
    if (e.DataFormItem != null)
    {
        if (e.DataFormItem.Name.Equals("Agree"))
        {
            (e.DataFormItem as DataFormCheckBoxItem).IsThreeState = false;
            (e.DataFormItem as DataFormCheckBoxItem).Text = "I agree to the Terms & Conditions";
        }
    }
}

Switch Editor

In switch editor, Switch is loaded, and DataForm Switch editor supports bool data type property.

To add Switch editor in DataForm, register the editor as Switch for the required property using the RegisterEditor method.

C#

dataForm.RegisterEditor("CellularData", "Switch");
       dataForm.RegisterEditor("AirplaneMode", "Switch");

        [Display(Name ="Cellular Data")]
        public bool CellularData { get; set; } = true;

        [Display(Name = "Airplane Mode")]
        public bool AirplaneMode { get; set; }

Drop down editor

In the drop down editor, the SfComboBox will be loaded.

Customizing ItemsSource of SfComboBox

By default, the ItemsSource for SfComboBox is auto-generated for enum types and collection type properties. For other types, you can set the ItemsSource by using the SourceProvider.

Using SourceProvider

C#

private string _ItemName;
public string ItemName
{
    get
    {
        return _ItemName;
    }
    set
    {
        _ItemName = value;
    }
}
public class SourceProviderExt : SourceProvider
{
    public override IList GetSource(string sourceName)
    {
        var list = new List<string>();
        if (sourceName == "ItemName")
        {
            list.Add("Item1");
            list.Add("Item2");
            list.Add("Item3");
        }
        return list;
    }
}
dataForm.SourceProvider = new SourceProviderExt();
dataForm.RegisterEditor("ItemName", "DropDown");

Using ItemsSource property

You can also set the ItemsSource for drop down editor by using the ItemsSource property in the DataFormDropDownItem.

C#

dataForm.AutoGeneratingDataFormItem += DataForm_AutoGeneratingDataFormItem;

private void DataForm_AutoGeneratingDataFormItem(object sender, AutoGeneratingDataFormItemEventArgs e)
{
    if (e.DataFormItem != null && e.DataFormItem.Name == "Name")
    {
        var list = new List<string>();
        list.Add("Home");
        list.Add("Food");
        list.Add("Utilities");
        list.Add("Education");
        (e.DataFormItem as DataFormDropDownItem).ItemsSource = list;
    }
}

Changing ItemsSource of SfComboBox at run time

You can also change the ItemsSource at runtime.

C#

private void Button_Click(object sender, EventArgs e)
{
    var dataFormItem = dataForm.ItemManager.DataFormItems["Name"];
    if (dataFormItem.Name == "Name")
    {
        var list = new List<string>();
        list.Add("Home");
        list.Add("Food");
        list.Add("Utilities");
        list.Add("Education");
        (dataFormItem as DataFormDropDownItem).ItemsSource = list;
    }
}

Loading complex type property values in drop down editor

You can display the complex type property values in drop down editor by using the GetSource override method of SourceProvider class, which is used to get source list as complex property values for drop down editor and set it to SourceProvider property of SfDataForm. You need to use AutoGeneratingDataFormItem event to set DisplayMemberPath and SelectedValuePath property value of DataFormDropDownItem for complex type property.

NOTE

Class cannot be directly set as data type for drop down editor in this complex type scenario.

C#

dataForm.SourceProvider = new SourceProviderExt();
dataForm.DataObject = new ContactInfo();
dataForm.AutoGeneratingDataFormItem += DataForm_AutoGeneratingDataFormItem;
dataForm.RegisterEditor("City", "DropDown");
 
private void DataForm_AutoGeneratingDataFormItem(object sender, AutoGeneratingDataFormItemEventArgs e)
{
    if (e.DataFormItem != null && e.DataFormItem.Name == "City")
    {
        if (Device.RuntimePlatform != Device.UWP)
        {
            (e.DataFormItem as DataFormDropDownItem).DisplayMemberPath = "City";
            (e.DataFormItem as DataFormDropDownItem).SelectedValuePath = "PostalCode";
        }
    }
} 
 
public class SourceProviderExt : SourceProvider
{
    public override IList GetSource(string sourceName)
    {
        if (sourceName == "City")
        {
            List<Address> details = new List<Address>();
            details.Add(new Address() { City = "Chennai", PostalCode = 1 });
            details.Add(new Address() { City = "Paris", PostalCode = 2 });
            details.Add(new Address() { City = "Vatican", PostalCode = 3 });

            return details;
        }
       return new List<string>();
    }
}

public class ContactInfo
{
    [Display(Name ="First Name")]
    public String FirstName { get; set; } 
    public string City { get; set; }
}

public class Address
{
    public int PostalCode { get; set; }
    public string City { get; set; }
}

Enable the multi-selection mode in dropdown editor

By default, the SfComboBox of drop down editor supports single selection in data form; however, you can enable the multi-selection by using the MultiSelectMode property of the SfComboBox when adding a custom editor.

By using the OnInitializeView override method, you can change the MultiSelectMode property to Token.
For the DropDown editor, this property is of type string or int, but because MultiSelection allows us to select more items from a list of items, these items cannot be stored in a single string property. To overcome this, commit and data validation can be handled manually by using the OnCommitValue, OnUpdateValue, and OnValidateValue override methods of DataFormDropDownEditor.

C#

public class MultiSelectDropDownEditor : DataFormDropDownEditor
{
    private ContactInfo contactInfo;
    public MultiSelectDropDownEditor(SfDataForm dataForm) : base(dataForm)
    {
        this.contactInfo = this.DataForm.DataObject as ContactInfo;
    }
    protected override void OnInitializeView(DataFormItem dataFormItem, SfComboBox view)
    {
        base.OnInitializeView(dataFormItem, view);
        view.MultiSelectMode = MultiSelectMode.Token;
        view.TokensWrapMode = TokensWrapMode.Wrap;
    }

    protected override void OnCommitValue(SfComboBox view)
    {
        if (view.MultiSelectMode == MultiSelectMode.None)
        {
            // Use existing method for single selection. 
            base.OnCommitValue(view);
        }
        else
        {
            // Multi Selection needs to be updated with all selected items. 
            if (view != null && view.SelectedItem != null && view.SelectedItem is IList)
            {
                string country = string.Empty;
                foreach (Address address in (IList)view.SelectedItem)
                {
                    if (country.Contains(address.City))
                    {
                        continue;
                    }

                    country = string.IsNullOrEmpty(country) ? address.City : country + "," + address.City;
                }

                this.contactInfo.Country = country;
            }
        }
    }

    protected override void OnUpdateValue(DataFormItem dataFormItem, SfComboBox view)
    {
        if (view.MultiSelectMode == MultiSelectMode.None)
        {
            base.OnUpdateValue(dataFormItem, view);
        }
        else
        {
            var list = (dataFormItem as DataFormDropDownItem).ItemsSource;
            if (list != null)
            {
                view.DataSource = list.OfType<object>().ToList();
            }
            else
            {
                view.DataSource = null;
            }
        }
    }

    protected override bool OnValidateValue(SfComboBox view)
    {
        if (view.MultiSelectMode == MultiSelectMode.None)
        {
            return base.OnValidateValue(view);
        }
        else
        {
            this.OnCommitValue(view);

            // Here country is multi selection property. 
            if (string.IsNullOrEmpty(this.contactInfo.Country))
            {
                return false;
            }

            return true;
        }
    }
}

NOTE

View sample in GitHub.

See also

How to make editable drop down in Xamarin.Forms DataForm (SfDataForm)
How to add entered text to the dropdown collection in Xamarin.Forms DataForm (SfDataForm)

Picker editor

In the picker editor, the Picker will be loaded.

Changing title in the Picker

You can show some text in the Picker popup by using the Title property in the DataFormPickerItem.

C#

dataForm.AutoGeneratingDataFormItem += DataForm_AutoGeneratingDataFormItem;

private void DataForm_AutoGeneratingDataFormItem(object sender, AutoGeneratingDataFormItemEventArgs e)
{
    if (e.DataFormItem != null && e.DataFormItem.Name == "Name")
    {
        (e.DataFormItem as DataFormPickerItem).Title = "Expense Category";
    }
}

Customizing ItemsSource of Picker

By default, the ItemsSource for picker is auto-generated for enum type and collection type properties. For other types, you can set the ItemsSource by using SourceProvider.

Using SourceProvider

C#

private string _ItemName;
public string ItemName
{
    get
    {
        return _ItemName;
    }
    set
    {
        _ItemName = value;
    }
}
public class SourceProviderExt : SourceProvider
{
    public override IList GetSource(string sourceName)
    {
        var list = new List<string>();
        if (sourceName == "ItemName")
        {
            list.Add("Item1");
            list.Add("Item2");
            list.Add("Item3");
        }
        return list;
    }
}
dataForm.SourceProvider = new SourceProviderExt();
dataForm.RegisterEditor("ItemName", "Picker");

Using event

You can also set ItemsSource for picker editor by using the ItemsSource property in the DataFormPickerItem.

C#

dataForm.AutoGeneratingDataFormItem += DataForm_AutoGeneratingDataFormItem;

private void DataForm_AutoGeneratingDataFormItem(object sender, AutoGeneratingDataFormItemEventArgs e)
{
    if (e.DataFormItem != null && e.DataFormItem.Name == "Name")
    {
        var list = new List<string>();
        list.Add("Home");
        list.Add("Food");
        list.Add("Utilities");
        list.Add("Education");
        (e.DataFormItem as DataFormPickerItem).ItemsSource = list;
    }
}

Changing ItemsSource of picker at run time

You can also change the ItemsSource at runtime.

C#

private void Button_Click(object sender, EventArgs e)
{
    var dataFormItem = dataForm.ItemManager.DataFormItems["Name"];
    if (dataFormItem.Name == "Name")
    {
        var list = new List<string>();
        list.Add("Home");
        list.Add("Food");
        list.Add("Utilities");
        list.Add("Education");
        (dataFormItem as DataFormPickerItem).ItemsSource = list;
    }
}

Loading complex type property values in picker

You can display the complex type property values in picker editor by using the GetSource override method of SourceProvider class, which is used to get source list as complex property values for picker editor and set it to SourceProvider property of SfDataForm. You need to use AutoGeneratingDataFormItem event to set DisplayMemberPath and ValueMemberPath property value DataFormPickerItem for complex type property.

NOTE

Class cannot be directly set as data type for picker editor in this complex type scenario.

C#

dataForm.SourceProvider = new SourceProviderExt();
dataForm.RegisterEditor("City", "Picker");
dataForm.DataObject = new ContactInfo();
dataForm.AutoGeneratingDataFormItem += DataForm_AutoGeneratingDataFormItem;
 
private void DataForm_AutoGeneratingDataFormItem(object sender, AutoGeneratingDataFormItemEventArgs e)
{
    if (e.DataFormItem != null && e.DataFormItem.Name == "City")
    {
        if (Device.RuntimePlatform != Device.UWP)
        {
            (e.DataFormItem as DataFormPickerItem).DisplayMemberPath = "City";
            (e.DataFormItem as DataFormPickerItem).ValueMemberPath = "PostalCode";
        }
    }
} 
 
public class SourceProviderExt : SourceProvider
{
    public override IList GetSource(string sourceName)
    {
        if (sourceName == "City")
        {
            List<Address> details = new List<Address>();
            details.Add(new Address() { City = "Chennai", PostalCode = 1 });
            details.Add(new Address() { City = "Paris", PostalCode = 2 });
            details.Add(new Address() { City = "Vatican", PostalCode = 3 });

            return details;
        }
       return new List<string>();
    }
}

public class ContactInfo
{
    public String FirstName { get; set; } 
    public string City { get; set; }
}

public class Address
{
    public int PostalCode { get; set; }
    public string City { get; set; }
}

You can download the entire source code of this demo for Xamarin.Forms from here DataFormPickerEditor

NOTE

PickerEditor not supported in Xamarin.Forms.UWP.

See also

How to load the picker editor ItemsSource asynchronously in Xamarin DataForm ?
How to load the picker editor ItemsSource from SQLite offline database in Xamarin.Forms DataForm?
How to add SfDatePicker to Xamarin.Forms DataForm (SfDataForm)
How to set a blank value to a picker editor in Xamarin.Forms DataForm
How to add custom picker editor using SfPicker in Xamarin.Forms DataForm?

NumericUpDown editor

In the numeric editor, the SfNumericUpDown will be loaded.

Changing SpinButtonAlignment in NumericUpDown

By default, up down button will be displayed in right side. You can change its alignment by using the SpinButtonAlignment property in the DataFormNumericUpDownItem.

C#

dataForm.AutoGeneratingDataFormItem += DataForm_AutoGeneratingDataFormItem;
private void DataForm_AutoGeneratingDataFormItem(object sender, AutoGeneratingDataFormItemEventArgs e)
{
    if (e.DataFormItem != null && e.DataFormItem.Name == "Quantity")
        (e.DataFormItem as DataFormNumericUpDownItem).SpinButtonAlignment = SpinButtonAlignment.Both;
}

Changing step value in numeric up down

You can change the next increment and decrement values by using the StepValue property in the DataFormNumericUpDownItem. The default value of step value is 1.

C#

dataForm.AutoGeneratingDataFormItem += DataForm_AutoGeneratingDataFormItem;

private void DataForm_AutoGeneratingDataFormItem(object sender, AutoGeneratingDataFormItemEventArgs e)
{
    if (e.DataFormItem != null && e.DataFormItem.Name == "Quantity")
        (e.DataFormItem as DataFormNumericUpDownItem).StepValue = 2;
}

NOTE

StepValue property not supported in Xamarin.FormsUWP.

Setting Maximum and Minimum value in numeric up down

You can set minimum and maximum values for numeric up down by using Minimum and Maximum properties values respectively.

C#

dataForm.AutoGeneratingDataFormItem += DataForm_AutoGeneratingDataFormItem;

private void DataForm_AutoGeneratingDataFormItem(object sender, AutoGeneratingDataFormItemEventArgs e)
{
    if (e.DataFormItem != null && e.DataFormItem.Name == "Quantity")
    {
        (e.DataFormItem as DataFormNumericUpDownItem).Maximum = 100;
        (e.DataFormItem as DataFormNumericUpDownItem).Minimum = 0;
    }
}

Enabling auto reverse in numeric up down

In the SfNumericUpDown, once maximum and minimum values reached, the value will be unchanged. You can enable the cyclic behavior by setting the AutoReverse to true in the DataFormNumericUpDownItem.

C#

dataForm.AutoGeneratingDataFormItem += DataForm_AutoGeneratingDataFormItem;

private void DataForm_AutoGeneratingDataFormItem(object sender, AutoGeneratingDataFormItemEventArgs e)
{
    if (e.DataFormItem != null && e.DataFormItem.Name == "Quantity")
    {
        (e.DataFormItem as DataFormNumericUpDownItem).AutoReverse = true;
    }
}

Changing CultureInfo in numeric up down and numeric text box

You can change the culture in SfNumericTextBox and SfNumericUpDown by using the CultureInfo property in the DataFormNumericItemBase.

SfNumericTextBox

C#

private double _discount = 10;
        
[DataType(DataType.Currency)]
public double Discount
{
    get
    {
        return _discount;
    }
    set
    {
        _discount = value;
        RaisePropertyChanged("Discount");
    }
}
dataForm.AutoGeneratingDataFormItem += DataForm_AutoGeneratingDataFormItem;

private void DataForm_AutoGeneratingDataFormItem(object sender, AutoGeneratingDataFormItemEventArgs e)
{
    if (e.DataFormItem != null && e.DataFormItem.Name == "Discount")
    {
        (e.DataFormItem as DataFormNumericUpDownItem).CultureInfo = new System.Globalization.CultureInfo("fr-FR");
    }
}

SfNumericUpDown

C#

dataForm.RegisterEditor("Discount", "NumericUpDown");
dataForm.AutoGeneratingDataFormItem += DataForm_AutoGeneratingDataFormItem;
private void DataForm_AutoGeneratingDataFormItem(object sender, AutoGeneratingDataFormItemEventArgs e)
{
    if (e.DataFormItem != null && e.DataFormItem.Name == "Discount")
    {
        (e.DataFormItem as DataFormNumericUpDownItem).FormatString = "c";
        (e.DataFormItem as DataFormNumericUpDownItem).CultureInfo = new System.Globalization.CultureInfo("fr-FR");
    }
}

Password editor

In the password editor, the Entry is loaded.

C#

private string password;

[Display(ShortName = "Transaction password", Prompt = "Enter password")]
[DataType(DataType.Password)]
public string Password
{
    get { return this.password; }
    set
    {
        this.password = value;
        RaisePropertyChanged("Password");
        this.RaiseErrorChanged("Password");
    }
}

See also

How to add custom Password editor in SfDataForm?

RadioGroup editor

In the RadioGroup editor, the SfRadioGroup control is loaded.

The items for SfRadioGroup is generated for enum and List data type properties. In order to add RadioGroup editor in the DataForm, you need to register editor as RadioGroup for the required property by using the RegisterEditor method.

Support for enum data type

For enum data type property, SfRadioGroup items will be added based on specified property enum values.

C#

dataForm.RegisterEditor("Phone", "RadioGroup");

private Numbers phone;
public Numbers Phone
{
	get { return phone; }
	set { this.phone = value; }
}

public enum Numbers
{
	Home,
	Work,
	Other
}

Support for List data type

For List data type property, you have to set the ItemsSource by using the SourceProvider, based on that SfRadioGroup items will be added.

C#

dataForm.RegisterEditor("Phone", "RadioGroup");
dataForm.SourceProvider = new SourceProviderExt();

private string phone;
public string Phone
{
    get { return phone; }
    set { this.phone = value; }
}

public class SourceProviderExt : SourceProvider
{
    public override IList GetSource(string sourceName)
    {
		var list = new List<string>();
		if(sourceName == "Phone")
		{
			list.Add("Home");
			list.Add("Work");
			list.Add("Other");
		}
		return list;
    }
}

MaskedEditText editor

In the MaskedEditText editor, the SfMaskedEdit control is loaded.

C#

[Display(Name = "Contact Number")] 
[DataType(DataType.PhoneNumber)] 
public string ContactNumber { get; set; }

Setting the masked editor as int and double type

By default, the SfMaskedEdit includes prompt and literals along with your input value. The special characters are not allowed in int and double type, so you need to exclude prompt and literals using the ValueMaskFormat property in DataFormMaskedEditTextItem.

C#

dataForm.AutoGeneratingDataFormItem += DataForm_AutoGeneratingDataFormItem; 
…  

private void DataForm_AutoGeneratingDataFormItem(object sender, AutoGeneratingDataFormItemEventArgs e) 
{ 
    if (e.DataFormItem != null && e.DataFormItem.Name == "ContactNumber") 
    { 
        (e.DataFormItem as DataFormMaskedEditTextItem).ValueMaskFormat = Syncfusion.XForms.MaskedEdit.MaskFormat.ExcludePromptAndLiterals; 
        } 
}

Localizing special characters

The special symbols such as currency, date separator, decimal separator, and other symbols can be localized using the CultureInfo property of DataFormMaskedEditTextItem.

C#

(e.DataFormItem as DataFormMaskedEditTextItem).CultureInfo = new CultureInfo("fr-FR");

Customizing the clipboard text

By default, when you perform cut or copy operation, the clipboard text will be included with prompt and literals along with your input value. You can modify this and allow the clipboard to hold the value with or without prompt and literals by setting the CutCopyMaskFormat property of the DataFormMaskedEditTextItem.

C#

(e.DataFormItem as DataFormMaskedEditTextItem).CutCopyMaskFormat = Syncfusion.XForms.MaskedEdit.MaskFormat.ExcludePromptAndLiterals;

Mask and mask types

The mask and mask type of input can be customized using the Mask and MaskType properties of DataFormMaskedEditTextItem. Refer to this link to know more about the mask characters and mask types available in the masked editor.

C#

(e.DataFormItem as DataFormMaskedEditTextItem).Mask = @"+1\(\d{3}\)\d{6}"; 
(e.DataFormItem as DataFormMaskedEditTextItem).MaskType = Syncfusion.XForms.MaskedEdit.MaskType.RegEx;

Customizing prompt character

The custom prompt character can be set using the PromptChar property of DataFormMaskedEditTextItem.

C#

(e.DataFormItem as DataFormMaskedEditTextItem).PromptChar = '#';

Show password character

The MaskedTextEditor supports to work as a password text box when setting a character to the PasswordChar property of DataFormMaskedEditTextItem.

C#

(e.DataFormItem as DataFormMaskedEditTextItem).PasswordChar = '*';

Password Delay

When providing password character, you can show the typed character with some delay using the EnablePasswordDelay property in DataFormMaskedEditTextItem. When enabling the EnablePasswordDelay property, the typed character will be displayed for a few seconds before it is converted to the password character.

C#

(e.DataFormItem as DataFormMaskedEditTextItem).PasswordChar = '*'; 
(e.DataFormItem as DataFormMaskedEditTextItem).EnablePasswordDelay = true;

Password delay duration

When PasswordDelay is enabled, you can handle the duration of the displaying typed character using the PasswordDelayDuration property in DataFormMaskedEditTextItem.

C#

(e.DataFormItem as DataFormMaskedEditTextItem).PasswordChar = '*'; 
(e.DataFormItem as DataFormMaskedEditTextItem).EnablePasswordDelay = true; 
(e.DataFormItem as DataFormMaskedEditTextItem).PasswordDelayDuration  = 2;

See also

How to mask credit card number in Xamarin.Forms DataForm (SfDataForm)

AutoComplete editor

In the autocomplete editor, the SfAutoComplete is loaded.

Customizing ItemsSource of autocomplete editor

By default, the ItemsSource for AutoComplete editor is auto-generated for enum types. For other types, you can set ItemsSource using SourceProvider.

Using SourceProvider

C#

private string country;
public string Country
{
    get
    {
        return country;
    }
    set
    {
        country = value;
    }
}
public class SourceProviderExt : SourceProvider
{
    public override IList GetSource(string sourceName)
    {
        var list = new List<string>();
        if (sourceName == "Country")
        {
                list.Add("Indonesia");
                list.Add("Italy");
                list.Add("India");
                list.Add("Iran");
                list.Add("Iraq");
                list.Add("Uganda");
                list.Add("Ukraine");
                list.Add("Canada");
                list.Add("Australia");
                list.Add("Uzbekistan");
                list.Add("France");
                list.Add("United Kingdom");
                list.Add("United States");

        }
        return list;
    }
}
dataForm.SourceProvider = new SourceProviderExt();
dataForm.RegisterEditor("Country", "AutoComplete");

Using AutoGeneratingItem event

You can also set ItemsSource for autocomplete editor by using ItemsSource property in the DataFormAutoCompleteItem.

C#

dataForm.RegisterEditor("Country", "AutoComplete");
dataForm.AutoGeneratingDataFormItem += DataForm_AutoGeneratingDataFormItem;

private void DataForm_AutoGeneratingDataFormItem(object sender, AutoGeneratingDataFormItemEventArgs e)
{
    if (e.DataFormItem != null && e.DataFormItem.Name == "Country")
    {
        var list = new List<string>();
                list.Add("Indonesia");
                list.Add("Italy");
                list.Add("India");
                list.Add("Iran");
                list.Add("Iraq");
                list.Add("Uganda");
                list.Add("Ukraine");
                list.Add("Canada");
                list.Add("Australia");
                list.Add("Uzbekistan");
                list.Add("France");
                list.Add("United Kingdom");
                list.Add("United States");
        (e.DataFormItem as DataFormAutoCompleteItem).ItemsSource = list;
    }
}

Dynamically changing the ItemsSource of autocomplete editor

You can also change the ItemsSource at runtime.

C#

private void Button_Click(object sender, EventArgs e)
{
    var dataFormItem = dataForm.ItemManager.DataFormItems["Country"];
    if (dataFormItem.Name == "Country")
    {
        var list = new List<string>();
            list.Add("Ukraine");
            list.Add("Canada");
            list.Add("Australia");
            list.Add("Uzbekistan");
            list.Add("France");
            list.Add("United Kingdom");
            list.Add("United States");
        (dataFormItem as DataFormAutoCompleteItem).ItemsSource = list;
    }
}

Loading complex type property values in autocomplete editor

You can display the complex type property values in autocomplete editor by using GetSource override method of the SourceProvider class, which is used to get source list as complex property values for autocomplete editor and set it to the SourceProvider property of SfDataForm.Use the AutoGeneratingDataFormItem event to set [DisplayMemberPath] and [SelectedValuePath] property values of AutoComplete for complex type property.

NOTE

Class cannot be directly set as data type for autocomplete editor in this complex type scenario.

C#

dataForm.SourceProvider = new SourceProviderExt();
dataForm.DataObject = new ContactInfo();
dataForm.RegisterEditor("City", "AutoComplete");
dataForm.AutoGeneratingDataFormItem += DataForm_AutoGeneratingDataFormItem;
 
private void DataForm_AutoGeneratingDataFormItem(object sender, AutoGeneratingDataFormItemEventArgs e)
{
    if (e.DataFormItem != null && e.DataFormItem.Name == "City")
    {
       (e.DataFormItem as DataFormAutoCompleteItem).DisplayMemberPath = "City";
       (e.DataFormItem as DataFormAutoCompleteItem).SelectedValuePath = "PostalCode";
    }
} 
 
public class SourceProviderExt : SourceProvider
{
    public override IList GetSource(string sourceName)
    {
        if (sourceName == "City")
        {
            List<Address> details = new List<Address>();
            details.Add(new Address() { City = "Colorado Springs", PostalCode = 1 });
            details.Add(new Address() { City = "Chicago", PostalCode = 2 });
            details.Add(new Address() { City = "Columbus", PostalCode = 3 });
            details.Add(new Address() { City = "Portland", PostalCode = 4 });
            details.Add(new Address() { City = "Paris", PostalCode = 5 });
            details.Add(new Address() { City = "Las Vegas", PostalCode = 6 });         
            details.Add(new Address() { City = "New York", PostalCode = 7 });
            details.Add(new Address() { City = "Cincinnati", PostalCode = 8 });
            details.Add(new Address() { City = "San Diego", PostalCode = 9 });

            return details;
        }
       return new List<string>();
    }
}

public class ContactInfo
{
    [Display(Name ="First Name")]
    public String FirstName { get; set; } 
    public string City { get; set; }
}

public class Address
{
    public int PostalCode { get; set; }
    public string City { get; set; }
}

Customizing the appearance of autocomplete editor

AutoComplete editor modes

The DataFormAutoCompleteEditor provides the following three different ways to display the filtered suggestions.

• Suggest - Displays suggestions in drop-down list

• Append - Appends the first suggestion to text

• SuggestAppend - Performs both suggest and append.

The AutoCompleteMode property is used to choose the suggestion display mode in the DataFormAutoCompleteItem class. The default value is Suggest.

Suggestion choices in list

The filtered suggestions are displayed in a drop-down list. Users can pick an item from the list.

C#

dataForm.DataObject = new ContactInfo();
dataForm.SourceProvider = new SourceProviderExt();
dataForm.RegisterEditor("Country", "AutoComplete");
dataForm.AutoGeneratingDataFormItem += DataForm_AutoGeneratingDataFormItem;

private void DataForm_AutoGeneratingDataFormItem(object sender, AutoGeneratingDataFormItemEventArgs e)
{
    if (e.DataFormItem != null && e.DataFormItem.Name == "Country")
    {
        var autoCompleteItem = (e.DataFormItem as DataFormAutoCompleteItem);
        autoCompleteItem.AutoCompleteMode = AutoCompleteMode.Suggest;
    }
}
public class SourceProviderExt : SourceProvider
{
    public override IList GetSource(string sourceName)
    {
        var list = new List<string>();
        if (sourceName == "Country")
        {
                list.Add("Indonesia");
                list.Add("Italy");
                list.Add("India");
                list.Add("Iran");
                list.Add("Iraq");
                list.Add("Uganda");
                list.Add("Ukraine");
                list.Add("Canada");
                list.Add("Australia");
                list.Add("Uzbekistan");
                list.Add("France");
                list.Add("United Kingdom");
                list.Add("United States");

        }
        return list;
    }
}

Appending suggestion to text

The first item in the filtered suggestions is appended to autocomplete editor text. In this mode,the drop down remains closed.

C#

dataForm.DataObject = new ContactInfo();
dataForm.RegisterEditor("Country", "AutoComplete");
dataForm.AutoGeneratingDataFormItem += DataForm_AutoGeneratingDataFormItem;

private void DataForm_AutoGeneratingDataFormItem(object sender, AutoGeneratingDataFormItemEventArgs e)
{
    if (e.DataFormItem != null && e.DataFormItem.Name == "Country")
    {
        var autoCompleteItem = (e.DataFormItem as DataFormAutoCompleteItem);
        autoCompleteItem.AutoCompleteMode = AutoCompleteMode.Append;
    }
}

Suggesting choices and appending suggestions to Text

The text is appended to the first matched item in the suggestions collection, and the filtered suggestions are displayed in a drop-down list. The users can pick an item from a list directly or use the up and down keys for browsing the list.

C#

dataForm.DataObject = new ContactInfo();
dataForm.RegisterEditor("Country", "AutoComplete");
dataForm.AutoGeneratingDataFormItem += DataForm_AutoGeneratingDataFormItem;

private void DataForm_AutoGeneratingDataFormItem(object sender, AutoGeneratingDataFormItemEventArgs e)
{
    if (e.DataFormItem != null && e.DataFormItem.Name == "Country")
    {
        var autoCompleteItem = (e.DataFormItem as DataFormAutoCompleteItem);
        autoCompleteItem.AutoCompleteMode = AutoCompleteMode.SuggestAppend;
    }
}

AutoComplete editor suggestion options

The phenomenon of string comparison for filtering suggestions can be changed using the SuggestionMode property. The default filtering strategy is “StartsWith”, and it is case insensitive. The available filtering modes are,

• StartsWith

• StartsWithCaseSensitive

• Contains

• ContainsWithCaseSensitive

• Equals

• EqualsWithCaseSensitive

• EndsWith

• EndsWithCaseSensitive

Filtering words that starts with input text

Displays all the matches that start with the typed characters in items source of autocomplete editor. This strategy is case in sensitive.

C#

dataForm.DataObject = new ContactInfo();
dataForm.RegisterEditor("Country", "AutoComplete");
dataForm.AutoGeneratingDataFormItem += DataForm_AutoGeneratingDataFormItem;

private void DataForm_AutoGeneratingDataFormItem(object sender, AutoGeneratingDataFormItemEventArgs e)
{
    if (e.DataFormItem != null && e.DataFormItem.Name == "Country")
    {
        var autoCompleteItem = (e.DataFormItem as DataFormAutoCompleteItem);
        autoCompleteItem.SuggestionMode = Syncfusion.XForms.DataForm.SuggestionMode.StartsWith;
    }
}

Filtering words that starts with input text - CaseSensitive

Displays all the matches that start with the typed characters in items source of autocomplete editor. This strategy is case sensitive.

C#

dataForm.DataObject = new ContactInfo();
dataForm.RegisterEditor("Country", "AutoComplete");
dataForm.AutoGeneratingDataFormItem += DataForm_AutoGeneratingDataFormItem;

private void DataForm_AutoGeneratingDataFormItem(object sender, AutoGeneratingDataFormItemEventArgs e)
{
    if (e.DataFormItem != null && e.DataFormItem.Name == "Country")
    {
        var autoCompleteItem = (e.DataFormItem as DataFormAutoCompleteItem);
        autoCompleteItem.SuggestionMode = Syncfusion.XForms.DataForm.SuggestionMode.StartsWithCaseSensitive;
    }
}

Filtering words that contains the input text

Displays all the matches that contain the typed characters in items source of autocomplete editor. This strategy is case in-sensitive.

Filtering words that contains the input text - CaseSensitive

Displays all the matches that contain the typed characters in items source of autocomplete editor. This strategy is case sensitive.

Filtering words that equals the input text

Displays all the words that completely matches with the typed characters in items source of autocomplete editor. This strategy is case in-sensitive.

Filtering words that equal the input text - CaseSensitive

Displays all the words that completely match with the typed characters in items source of autocomplete editor. This strategy is case sensitive.

Filtering words that end with the input text

Displays all the matches that end with the typed characters in items source of autocomplete editor. This strategy is case in-sensitive.

Filtering words that end with the input text - CaseSensitive

Displays all the matches that end with the typed characters in items source of autocomplete editor. This strategy is case sensitive.

No results found text

When the entered item is not in the suggestion list, SfAutoComplete displays a text that indicates there is no search results found. You can set the desire text to be displayed for indicating no results found with the NoResultsFoundText property.

C#

dataForm.DataObject = new ContactInfo();
dataForm.RegisterEditor("Country", "AutoComplete");
dataForm.AutoGeneratingDataFormItem += DataForm_AutoGeneratingDataFormItem;

private void DataForm_AutoGeneratingDataFormItem(object sender, AutoGeneratingDataFormItemEventArgs e)
{
    if (e.DataFormItem != null && e.DataFormItem.Name == "Country")
    {
        var autoCompleteItem = (e.DataFormItem as DataFormAutoCompleteItem);
        autoCompleteItem.NoResultsFoundText = "No result found";
    }
}

NOTE

The NoResultsFoundText works by default in the UWP platform without setting any property by showing the text “No result found”.

Highlighting match text

Highlights matching characters in a suggestion list to pick an item with more clarity. The text highlight can be indicated with various customizing colors by enabling the following property.

• HighlightedTextColor - Sets the color of the highlighted text for differentiating the highlighted characters.

TextHighlightMode

There are two ways to highlight the matching text:

• First occurrence

  C#

  dataForm.DataObject = new ContactInfo();
  dataForm.RegisterEditor("Country", "AutoComplete");
  dataForm.AutoGeneratingDataFormItem += DataForm_AutoGeneratingDataFormItem;
    
  private void DataForm_AutoGeneratingDataFormItem(object sender, AutoGeneratingDataFormItemEventArgs e)
  {
      if (e.DataFormItem != null && e.DataFormItem.Name == "Country")
      {
          var autoCompleteItem = (e.DataFormItem as DataFormAutoCompleteItem);
          autoCompleteItem.SuggestionMode = SuggestionMode.StartsWith;
          autoCompleteItem.HighlightedTextColor = Color.Red;
          autoCompleteItem.TextHighlightMode = OccurrenceMode.FirstOccurrence;
          autoCompleteItem.ItemsSource = new List<string>
          {
              "Albania",
              "Algeria",
              "American Samoa",
              "Andorra"
          };
      }
  }

• Multiple occurrence

  C#

  dataForm.DataObject = new ContactInfo();
  dataForm.RegisterEditor("Country", "AutoComplete");
  dataForm.AutoGeneratingDataFormItem += DataForm_AutoGeneratingDataFormItem;
    
  private void DataForm_AutoGeneratingDataFormItem(object sender, AutoGeneratingDataFormItemEventArgs e)
  {
      if (e.DataFormItem != null && e.DataFormItem.Name == "Country")
      {
          var autoCompleteItem = (e.DataFormItem as DataFormAutoCompleteItem);
          autoCompleteItem.SuggestionMode = SuggestionMode.Contains;
          autoCompleteItem.HighlightedTextColor = Color.Red;
          autoCompleteItem.TextHighlightMode = OccurrenceMode.MultipleOccurrence;
          autoCompleteItem.ItemsSource = new List<string>
          {
              "Albania",
              "Algeria",
              "American Samoa",
              "Andorra"
          };
      }
  }

Maximum display item in dropdown column

Restrict the number of suggestions displayed and get the remaining items loaded by selecting LoadMore.You can restrict maximum suggestion to be displayed with the MaximumSuggestion property. You can set the desired text for displaying the Load more text using the LoadMoreText property.

C#

dataForm.DataObject = new ContactInfo();
dataForm.RegisterEditor("Country", "AutoComplete");
dataForm.AutoGeneratingDataFormItem += DataForm_AutoGeneratingDataFormItem;

private void DataForm_AutoGeneratingDataFormItem(object sender, AutoGeneratingDataFormItemEventArgs e)
{
    if (e.DataFormItem != null && e.DataFormItem.Name == "Country")
    {
        var autoCompleteItem = (e.DataFormItem as DataFormAutoCompleteItem);
            autoCompleteItem.MaximumSuggestion = 3;
            autoCompleteItem.LoadMoreText = "Load more";
    }
}

Minimum prefix character

Instead of displaying suggestion list on every character entry, matches can be filtered and displayed after a few character entries using the MinimumPrefixCharacters property. The default value is 1.

C#

dataForm.DataObject = new ContactInfo();
dataForm.RegisterEditor("Country", "AutoComplete");
dataForm.AutoGeneratingDataFormItem += DataForm_AutoGeneratingDataFormItem;

private void DataForm_AutoGeneratingDataFormItem(object sender, AutoGeneratingDataFormItemEventArgs e)
{
    if (e.DataFormItem != null && e.DataFormItem.Name == "Country")
    {
        var autoCompleteItem = (e.DataFormItem as DataFormAutoCompleteItem);
            autoCompleteItem.MinimumPrefixCharacters = 3;
    }
}

Diacritic sensitivity

The control does not stick with one type of keyboard, so you can populate items from a language with letters containing diacritics, and search for them with the English characters from an en-US keyboard. Users can enable or disable the diacritic sensitivity using IgnoreDiacritic property. The following code example illustrates how to enable the diacritic sensitivity, so that items in the suggestion list can be populated by entering any diacritic character of that alphabet.

C#

dataForm.DataObject = new Queries();
dataForm.RegisterEditor("RelatedQuestions", "AutoComplete");
dataForm.AutoGeneratingDataFormItem += DataForm_AutoGeneratingDataFormItem;

private void DataForm_AutoGeneratingDataFormItem(object sender, AutoGeneratingDataFormItemEventArgs e)
{
    if (e.DataFormItem != null && e.DataFormItem.Name == "RelatedQuestions")
    {
        var autoCompleteItem = (e.DataFormItem as DataFormAutoCompleteItem);
            autoCompleteItem.IgnoreDiacritic = false;
            autoCompleteItem.ItemsSource = new List<string>
                    {
                   "Hów tó gâin wéight?",
                   "Hów tó drâw ân éléphânt?",
                   "Whéré cân I buy â câmérâ?",
                   "Guidé mé âll thé wây",
                    };
    }
}
public class Queries
{
    [Display(ShortName = "Product Name")]
    public string ProductName { get; set; }
    public string Cost { get; set; }
    [Display(ShortName = "Related questions asked")]
    public string RelatedQuestions { get;set;}
}

Custom editor

The custom editor can be added to DataForm by overriding the DataFormEditor class for business models. You can create custom editor using Views and Layouts.

To add custom editor in DataForm, register the editor with custom registered type for the required property using RegisterEditor method. You can also customize editor settings by using specific override methods available in DataFormEditor.

• Creating custom editor using views.
• Creating custom editor using layouts.

Creating custom editor using views

Views such as labels, buttons, and sliders can be loaded to custom editor. Here, entry is loaded as custom editor for ContactName property.

C#

public class CustomTextEditor : DataFormEditor<Entry> 
{ 
    public CustomTextEditor(SfDataForm dataForm) : base(dataForm) 
    { 
    } 

    protected override Entry OnCreateEditorView(DataFormItem dataFormItem) 
    { 
        return new Entry(); 
    } 
} 
… 

dataForm.RegisterEditor("CustomTextEditor", new CustomTextEditor(dataForm)); 
dataForm.RegisterEditor("ContactName", "CustomTextEditor");

Creating custom editor using layouts

Layouts such as Grid, StackLayout, ContentView, and ScrollView can be added as custom editor. Here, the label and image view in Grid are loaded as custom editors for ContactName property.

XAML

<?xml version="1.0" encoding="utf-8" ?> 
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
                        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
                        x:Class="DataForm_Forms.TextEditor"> 
    <ContentPage.Content> 
        <Grid> 
            <Grid.ColumnDefinitions> 
                <ColumnDefinition Width="0.05*"/> 
                <ColumnDefinition Width="Auto"/> 
            </Grid.ColumnDefinitions> 
            <Image Source="LabelContactName.png" /> 
            <Editor Grid.Column="1"/> 
        </Grid> 
    </ContentPage.Content> 
</ContentView>

C#

public class CustomTextEditor : DataFormEditor<TextEditor> 
{ 
    public CustomTextEditor(SfDataForm dataForm) : base(dataForm) 
    { 
    } 

    protected override TextEditor OnCreateEditorView(DataFormItem dataFormItem) 
    { 
        return new TextEditor(); 
    } 
} 
… 

dataForm.RegisterEditor("CustomTextEditor", new CustomTextEditor(dataForm)); 
dataForm.RegisterEditor("ContactName", "CustomTextEditor");

You should manually commit and validate the editor value of custom DataFormItem. Refer to this link to know more about custom editor.

See also

How to commit and validate the custom editor value to corresponding DataObject property in Xamarin.Forms SfDataForm
How to add custom image editor in Xamarin.Forms DataForm
How to add floating label text editor in DataForm Xamarin.Forms
How to raise dataform editor Touch event in Xamarin.Forms SfDataForm
How to add custom text editor in Xamarin.Forms DataForm and customize the default appearance in platform renderer