Getting Started with .NET MAUI DataForm (SfDataForm)

21 Mar 202410 minutes to read

This section provides a quick overview of how to get started with the .NET MAUI DataForm(SfDataForm) for .NET MAUI and a walk-through to configure the .NET MAUI DataForm control in a real-time scenario.

Creating an application using the .NET MAUI DataForm

  1. Create a new .NET MAUI application in Visual Studio.

  2. Syncfusion .NET MAUI components are available in nuget.org. To add the SfDataForm to your project, open the NuGet package manager in Visual Studio, search for Syncfusion.Maui.DataForm, then install it.

  3. To initialize the control, import the control namespace Syncfusion.Maui.DataForm in XAML or C# code.

  4. Initialize SfDataForm.

<ContentPage   
            
        xmlns:dataForm="clr-namespace:Syncfusion.Maui.DataForm;assembly=Syncfusion.Maui.DataForm">

        <dataForm:SfDataForm />
</ContentPage>
using Syncfusion.Maui.DataForm;
. . .

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        SfDataForm dataForm = new SfDataForm();
        this.Content = dataForm;
    }
}

Register the handler

The Syncfusion.Maui.Core NuGet is a dependent package for all Syncfusion controls of .NET MAUI. In the MauiProgram.cs file, register the handler for Syncfusion core.

using Syncfusion.Maui.Core.Hosting;
    public static class MauiProgram
    {
	    public static MauiApp CreateMauiApp()
	    {
	        var builder = MauiApp.CreateBuilder();
		    builder
			    .ConfigureSyncfusionCore()
			    .UseMauiApp<App>()
			    .ConfigureFonts(fonts =>
			    {
				    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
				    fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
			    });

		    return builder.Build();
	    }
    }

Creating data object

The SfDataForm is a data edit control, so create a data object with details to create a data form based on your business requirement.

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

public class ContactsInfo
{
    public string FirstName { get; set; }
    
    public string MiddleName { get; set; }
    
    public string LastName { get; set; }
    
    public string ContactNumber { get; set; }
    
    public string Email { get; set; }
   
    public string Address { get; set; }

    public DateTime? BirthDate { get; set; }
    
    public string GroupName { get; set; }
}

Initialize the data object in view model class to bind in the DataObject property of SfDataForm.

public class DataFormViewModel
{
    public ContactsInfo ContactsInfo {get; set;}
        
    public DataFormViewModel()
    {
        this.ContactsInfo = new ContactsInfo();
    }
}

Set data object to data form

By default, the data form auto-generates the editors based on the primitive data type in the DataObject property. Please refer the following code to set the DataObject property.

<ContentPage 
    . . .
            xmlns:dataForm="clr-namespace:Syncfusion.Maui.DataForm;assembly=Syncfusion.Maui.DataForm"
                x:Class="GettingStarted.MainPage">

            <ContentPage.BindingContext>
                <local:DataFormViewModel/>
            </ContentPage.BindingContext>

            <dataForm:SfDataForm x:Name="dataForm" 
            DataObject="{Binding ContactsInfo}"/>    
</ContentPage>
this.BindingContext = new DataFormViewModel();
SfDataForm dataForm = new SfDataForm()
{
    DataObject = new ContactsInfo()
};
this.Content = dataForm;

NOTE

View sample in GitHub

DataForm inside stack layout

Vertical StackLayout

When the data form is placed inside a vertical stack layout, you must define the required MinimumHeightRequest value. By default, this MinimumHeightRequest is set to 300.

<ContentPage 
    . . .
            xmlns:dataForm="clr-namespace:Syncfusion.Maui.DataForm;assembly=Syncfusion.Maui.DataForm"
                x:Class="GettingStarted.MainPage">

            <ContentPage.BindingContext>
                <local:DataFormViewModel/>
            </ContentPage.BindingContext>

            <dataForm:SfDataForm x:Name="dataForm" 
            MinimumHeightRequest="400"
            DataObject="{Binding ContactsInfo}"/>    
</ContentPage>
this.BindingContext = new DataFormViewModel();
SfDataForm dataForm = new SfDataForm()
{
    DataObject = new ContactsInfo(),
    MinimumHeightRequest = 400
};
this.Content = dataForm;

Horizontal StackLayout

When the data form is placed inside a horizontal stack layout, you must define the required MinimumWidthRequest value. By default, this MinimumWidthRequest is set to 300.

<ContentPage 
    . . .
            xmlns:dataForm="clr-namespace:Syncfusion.Maui.DataForm;assembly=Syncfusion.Maui.DataForm"
                x:Class="GettingStarted.MainPage">

            <ContentPage.BindingContext>
                <local:DataFormViewModel/>
            </ContentPage.BindingContext>

            <dataForm:SfDataForm x:Name="dataForm" 
            MinimumWidthRequest="400"
            DataObject="{Binding ContactsInfo}"/>    
</ContentPage>
this.BindingContext = new DataFormViewModel();
SfDataForm dataForm = new SfDataForm()
{
    DataObject = new ContactsInfo(),
    MinimumWidthRequest = 400
};
this.Content = dataForm;

Defining editors

The data form control automatically generates the SfDataForm.Items (which has UI settings of data field) based on the data type in the SfDataForm.DataObject property. The SfDataForm.Items summarizes the layout of the label and editor setting for the data field appearing in the dataform.

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 Editor Input Control

DataFormTextItem

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

Entry

DataFormMultilineTextItem

 Generated for string type property with [DataType(DataType.MultilineText)] attribute. Multiline Text

Editor

DataFormPasswordTextItem

 Generated for string type property with [DataType(DataType.Password)] attribute. Password

Entry

DataFormNumericItem

 Generated for int, double, float type properties. Numeric

SfNumericEntry

DataFormMaskedTextItem

 Generated for string type property with [DataType(DataType.PhoneNumber)] and [DataType(DataType.CreditCard)] attribute. MaskedText

SfMaskedEntry

DataFormCheckBoxItem

 Generated for the Bool type property. CheckBox

CheckBox

DataFormSwitchItem

 Generated for the Bool type property. Switch

Switch

DataFormDateItem

 Generated for the DateTime, DateOnly, DateTimeOffset type properties and the properties with [DataType(DataType.Date)] or [DataType(DataType.DateTime)] attributes. Date

DatePicker

DataFormTimeItem

 Generated for the TimeSpan and TimeOnly type properties and the properties with [DataType(DataType.Time)] attribute. Time

TimePicker

DataFormPickerItem

 Generated for the Enum type property. Picker

Picker

DataFormAutoCompleteItem

 Generated for the Enum type property. AutoComplete

SfAutoComplete

DataFormComboBoxItem

 Generated for the Enum type property. ComboBox

SfComboBox

DataFormRadioGroupItem

 Generated for the Enum type property. RadioGroup

RadioButton

Label view customization

Customize the label view of the default layout by using the InitializeDataLabel method of the DataFormItemManager.

this.dataForm.ItemManager = new DataFormItemManagerEditorExt();

public class DataFormItemManagerEditorExt : DataFormItemManager
{
    public override void InitializeDataLabel(DataFormItem dataFormItem, Label label)
    {
        label.Background = Colors.Orange;
        label.VerticalOptions = LayoutOptions.Center;
        label.CharacterSpacing = 2;
        label.Padding = new Thickness(5, 0, 5, 0);
        label.Margin = new Thickness(0, 0, 5, 0);
        label.FontSize = 18;
        FormattedString formattedString = new FormattedString();
        formattedString.Spans.Add(new Span { Text = label.Text, TextColor = Colors.White});
        formattedString.Spans.Add(new Span { Text = " *", TextColor = Colors.Red});
        label.FormattedText = formattedString;
    }
}