Editors

SfDataForm provides support for several built-in editors. Below are the supported editors.

Editor name Editor class Supported Data Type/Attribute Input control loaded
Text

DataFormTextEditor

Property of type string and any other type apart from below specified cases.

UITextField

MultilineText

DataFormMultiLineTextEditor

Property of string type with Multiline text. [DataType(DataType.Multiline)]

UITextView

Numeric

DataFormNumericEditor

Property of type int, double, float, decimal, long types and its nullable also properties with below attributes.

SfNumericTextBox

Percent

DataFormNumericEditor

Property of type int, double, float, decimal, long types and its nullable also properties with below attributes. [DataType(“Percent”)].

SfNumericTextBox

Currency

DataFormNumericEditor

Property of type int, double, float, decimal, long types and its nullable also properties with below attributes. [DataType(DataType.Currency)].

SfNumericTextBox

Date

DataFormDateEditor

Property of type DateTime and Property with below attribute [DataType(DataType.Date)]. [DataType(DataType.DateTime)]

SfDatePicker

Time

DataFormTimeEditor

Property with below attribute. [DataType(DataType.Time)].

SfTimePicker

NumericUpDown

DataFormNumericUpDownEditor

Property of type Int or Double.

SfNumericUpDown

Segment

DataFormSegmentedEditor

Property of type enum.

UISegmentedControl

Bool

DataFormSwitchEditor

Property of type bool

UISwitch

Picker

DataFormPickerEditor

Property of type enum and list. [EnumDataTypeAttribute]

SfPicker

Password

DataFormPasswordEditor

The String type property and property with [DataType(DataType.Password)] attribute.

UITextField

Text Editor

In Text editor, UITextField is loaded.

Loading upper case keyboard in UITextField

You can load upper case letters in keyboard by setting InputType as TextFlagCapCharacters.

dataForm.AutoGeneratingDataFormItem += DataForm_AutoGeneratingDataFormItem;
private void DataForm_AutoGeneratingDataFormItem(object sender, AutoGeneratingDataFormItemEventArgs e)
{    
    if (e.DataFormItem != null && e.DataFormItem.Name == "FirstName")
    {
         (e.DataFormItem as DataFormTextItem).AutocapitalizationType =   UITextAutocapitalizationType.AllCharacters;
    }
}

Multiline Text editor

In the MultilineText editor, the UITextView 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.

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

Loading multi line text editor in Xamarin.iOS DataForm

Numeric Editor

In numeric editor, SfNumericTextBox is loaded.

Change maximum NumberDecimalDigits in Numeric editor

In SfNumericTextBox, two decimal digits will be displayed by default. You can change it by using MaximumNumberDecimalDigits property in DataFormNumericItem.

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;
    }
}

Date Editor

In Date editor, SfDatePicker will be loaded.

Setting null value in date editor

In SfDatePicker, 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.

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

Setting nullable date to data form date item in Xamarin.iOS DataForm

Customizing format in date editor

In SfDatePicker, Short date will be shown by default. You can the customize format to be applied by using Format property in DataFormDateItem.

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 DateFormat to data form date item in Xamarin.iOS DataForm

Setting MaximumDate and MinimumDate in Date editor

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

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 SfTimePicker will be loaded.

Setting null value in time editor

In SfTimePicker, 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.

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

Setting nullable time to data form item in Xamarin.iOS DataForm

Customizing format in time editor

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

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 time format to data form time item in Xamarin.iOS DataForm

Switch Editor

In switch editor, UISwitch is loaded. By default, for bool data type property, the Switch editor will be loaded in data form.

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

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

Setting switch editor in Xamarin.iOS DataForm

Picker Editor

In picker editor, SfPicker will be loaded.

Customizing ItemsSource of SfPicker

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

Using SourceProvider

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 the ItemsSource for picker editor by using ItemsSource property in DataFormPickerItem.

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.

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.

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")
    {
        (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

Loading complex type property values in picker in Xamarin.iOS DataForm

NumericUpDown Editor

In numeric editor, [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 setting SpinButtonAlignment property in DataFormNumericUpDownItem.

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

Changing spin button alignment for data form item in Xamarin.iOS DataForm

Changing step value in NumericUpDown

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

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;
}

Setting Maximum and Minimum value in NumericUpDown

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

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 SfNumericUpDown, once maximum and minimum value reached, value will be unchanged. You can enable cyclic behavior by setting AutoReverse as true in DataFormNumericUpDownItem.

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 NumericUpDown and NumericTextBox

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

SfNumericTextBox

private double _budget = 10000;
        
[DataType(DataType.Currency)]
public double Budget
{
    get
    {
        return _ budget;
    }
    set
    {
        _ budget = value;
        RaisePropertyChanged("Budget");
    }
}
dataForm.AutoGeneratingDataFormItem += DataForm_AutoGeneratingDataFormItem;

private void DataForm_AutoGeneratingDataFormItem(object sender, AutoGeneratingDataFormItemEventArgs e)
{
    if (e.DataFormItem != null && e.DataFormItem.Name == "Budget")
    {
        (e.DataFormItem as DataFormNumericItem).CultureInfo = new Foundation.NSLocale("fr_FR");    }
}

Setting CultureInfo to data form numeric item in Xamarin.iOS DataForm

SfNumericUpDown

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 Foundation.NSLocale("fr_FR");
    }
}

Setting CultureInfo to data form numeric up down item in Xamarin.iOS DataForm

Password editor

In the password editor, the UITextField is loaded.

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");
    }
}

Loading password editor in Xamarin.iOS DataForm