SfDataForm

The SfDataForm control helps editing the data fields of any data object. It can be used to develop various forms such as login, reservation, data entry, etc. Key features includes the following:

  • Layout and grouping: Supports to linear and grid layout with grouping support. Supports customizing the layout with different heights for each item.
  • Caption customization: Supports loading the image as caption for the editor.
  • Editors: Built-in support for text, numeric, numeric up-down, picker, date picker, time picker, switch, and checkbox editors.
  • Custom editor: Supports loading the custom editors.
  • Validation: Built-in support to validate the data based on the IDataErrorInfo, INotifyDataErrorInfo, and data annotations. It also programmatically supports validation handling.

Getting started with Xamarin.Android DataForm(SfDataForm)

30 Oct 202010 minutes to read

This section explains the quick overview to use the SfDataForm for Xamarin.Android in your application.

Assembly deployment

After installing Essential Studio for Xamarin, you can find all the required assemblies in the installation folders, {Syncfusion Essential Studio Installed location} \Essential Studio\15.x.x.x\Xamarin\lib

Eg: C:\Program Files (x86) \Syncfusion\Essential Studio\15.3.0.26\Xamarin\lib

NOTE

Assemblies can be found in unzipped package location in Mac.

Adding SfDataForm Reference

Syncfusion Xamarin components are available in nuget.org. To add SfDataForm to your project, open the NuGet package manager in Visual Studio, and search for Syncfusion.Xamarin.SfDataForm, and then install it.

![Adding data form nuget reference in Xamarin.Android DataForm]](SfDataForm_images/SfDataForm_NuGet_Android.png)

To know more about obtaining our components, refer to this link. Also, if you prefer to manually refer the assemblies instead of NuGet, refer the list of assemblies mentioned in the table below.

Project Required assemblies
Xamarin.Android Syncfusion.SfNumericUpDown.Android.dll
Syncfusion.SfNumericTextBox.Android.dll
Syncfusion.SfDataForm.Android.dll

Important
Starting with v16.2.0.x, if you reference Syncfusion assemblies from trial setup or from the NuGet feed, you also have to include a license key in your projects. Please refer to this link to know about registering Syncfusion license key in your Xamarin application to use our components.

Creating the data form

In this section, you will create Xamarin.Android application with SfDataForm. The control should be configured entirely in C# code.

  • Creating the project.
  • Adding data form in Xamarin.Android.
  • Creating data object.
  • Setting data object.

Creating the project

Create a new Android application in Xamarin Studio or Visual Studio for Xamarin.Android.

Adding data form in Xamarin.Android

To add the data form to your application, follow the steps:

  1. Add required assemblies as discussed in assembly deployment section.
  2. Import the SfDataForm namespace Syncfusion.Android.DataForm.
  3. Create an instance of data form control and add as a view to the linear layout.
using Syncfusion.Android.DataForm;

[Activity(Label = "GettingStarted", MainLauncher = true, Icon = "@drawable/icon")]
public class MainActivity : Activity
{        
    protected override void OnCreate(Bundle bundle)
    {
        base.OnCreate(bundle);
            
        var dataForm = new SfDataForm(this);
        SetContentView(dataForm);
    }
}

Creating data object

The SfDataForm is a data edit control so, create a data object to edit the data object.

Here, the data object named ContactsInfo created with some properties.

public class ContactsInfo
{
    private string firstName;
    private string middleName;
    private string lastName;
    private string contactNo;
    private string email;
    private string address;
    private DateTime? birthDate;
    private string groupName;

    public ContactsInfo()
    {

    }

    public string FirstName
    {
        get { return this.firstName; }
        set
        {
            this.firstName = value;
        }
    }

    public string MiddleName
    {
        get { return this.middleName; }
        set
        {
            this.middleName = value;
        }
    }
    public string LastName
    {
        get { return this.lastName; }
        set
        {
            this.lastName = value;
        }
    }

    public string ContactNumber
    {
        get { return contactNo; }
        set
        {
            this.contactNo = value;
        }
    }

    public string Email
    {
        get { return email; }
        set
        {
            email = value;
        }
    }

    public string Address
    {
        get { return address; }
        set
        {
            address = value;
        }
    }

    public DateTime? BirthDate
    {
        get { return birthDate; }
        set
        {
            birthDate = value;
        }
    }

    public string GroupName
    {
        get { return groupName; }
        set
        {
            groupName = value;
        }
    }
}

Setting data object

To populate the labels and editors in the data form, set the DataObject property.

dataForm.DataObject = new ContactsInfo();

Now, run the application to render the data form to edit the data object as in the following screenshot:

Setting data object to data form in Xamarin.Android DataForm

You can download the entire source code of this demo for Xamarin.Android from here DataFormGettingStarted.

Defining editors

The data form control automatically generates DataFormItems (which has UI settings of data field) when the data object set to the SfDataForm.DataObject property. The DataFormItem encapsulates the layout and editor setting for the data field appearing in the data form. When the DataFormItems are generated, you can handle the SfDataForm.AutoGeneratingDataFormItem event to customize or cancel the DataFormItem.

The type of input editor generated for the data field depends on the type and attribute settings of the property. The following table lists the DataFormItem and its constraints for generation:

Generated DataFormItem Type Data Type / Attribute

DataFormTextItem

Default DataFormItem generated for the String type and the properties with [DataType(DataType.Text)], [DataType(DataType.MultilineText)] and [DataType(DataType.Password)] attributes.

DataFormNumericItem

Generated for the Int or Double type property. [DataType(DataType.Currency)]. [DataType("Percent")]

DataFormDateItem

Generated for the DateTime type property. [DataType(DataType.Date)]. [DataType(DataType.DateTime)].

DataFormTimeItem

Generated for the DataTime type property. [DataType(DataType.Time)].

DataFormPickerItem

Generated for the Enum type property. [EnumDataTypeAttribute]

The following list of editors are supported:

Editor Data Type/Attribute Input control loaded
Text The String type property and any other type apart from the following specified cases.

EditText

MultilineText The String type property with multi line text. [DataType(DataType.Multiline)]

EditText

Numeric Int or Double type property.

SfNumericTextBox

Percent The Int or Double type Property with percent value. [DataType("Percent")]].

SfNumericTextBox

Currency The Int or Double type property with currency value. [DataType(DataType.Currency)].

SfNumericTextBox

Date The DateTime type property with date value. [DataType(DataType.Date)] [DataType(DataType.DateTime)]

SfDatePicker

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

SfTimePicker

NumericUpDown Int or Double type property.

SfNumericUpDown

Segment Enum type property.

RadioGroup

Bool Bool type property.

CheckBox

Switch Bool type property.

Switch

Picker Enum and List type property. [EnumDataTypeAttribute]

SfPicker

DropDown Enum and List type property. [EnumDataTypeAttribute]

Spinner

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

EditText

Layout options

Label position

By default, the data form arranges the label at left side and input control at the right side. You can change the label position by setting the SfDataForm.LabelPosition property. You can position the label from left to top of the input control by setting the LabelPosition as Top.

dataForm.LabelPosition = LabelPosition.Top;

Setting label position to data form item in Xamarin.Android DataForm

Grid layout

By default, the data form arranges one data field per row. It is possible to have more than one date field per row by setting the ColumnCount property which provides grid like layout for the data form.

dataForm.ColumnCount = 2;

Setting column count to data form in Xamarin.Android DataForm

Loading DataForm with customized height and width

The DataForm can be loaded with specific height and width inside different layouts by specifying the height and width of the DataForm when adding it as a child to its parent.

dataForm = new SfDataForm(this);
linearLayout = new LinearLayout(this);
dataForm.DataObject = new ContactInfo();
//To place SfDataForm at center position, padding has been set.
linearLayout.SetPadding(100, 550, 0, 0);
linearLayout.AddView(dataForm,800,800);
SetContentView(linearLayout);

Loading data form with customized height and width Xamarin.Android DataForm

Editing

By default, the data form enables editing of the data field. You can disable editing by setting the IsReadOnly property of the data form. You can enable or disable editing for a particular data field by setting the IsReadOnly property of DataFormItem in the AutoGeneratingDataFormItem event. The data field editing behavior can also be defined by using EditableAttribute.

Additional Help Resources

The Xamarin.Android SfDataForm Knowledge Base section contains responses to some of the most common questions that other customers have asked us before. So this will be a good place to search for topics that are not covered in the user guide.

Similar to the Knowledge Base, the forum section also contains responses to questions that other customers have asked us in the past.