Getting Started with the .NET MAUI DataForm

26 Sep 202411 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. Follow the steps below to add .NET MAUI DataForm control to your project.

Prerequisites

Before proceeding, ensure the following are setup:

  1. Install .NET 7 SDK or later is installed.
  2. Set up a .NET MAUI environment with Visual Studio 2022 (v17.3 or later) or Visual Studio Code. For Visual Studio Code users, ensure that the .NET MAUI workload is installed and configured as described here.

Step 1: Create a New .NET MAUI Project

Visual Studio

  1. Go to File > New > Project and choose the .NET MAUI App template.
  2. Name the project and choose a location. Then click Next.
  3. Select the .NET framework version and click Create.

Visual Studio Code

  1. Open the command palette by pressing Ctrl+Shift+P and type .NET:New Project and enter.
  2. Choose the .NET MAUI App template.
  3. Select the project location, type the project name and press Enter.
  4. Then choose Create project.

Step 2: Install the Syncfusion .NET MAUI DataForm NuGet Package

  1. In Solution Explorer, right-click the project and choose Manage NuGet Packages.
  2. Search for Syncfusion.Maui.DataForm and install the latest version.
  3. Ensure the necessary dependencies are installed correctly, and the project is restored.

Step 3: Register the handler

The Syncfusion.Maui.Core NuGet is a dependent package for all Syncfusion .NET MAUI controls. 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();
	    }
    }

Step 4: Add .NET MAUI DataForm control

  1. To initialize the control, import the Syncfusion.Maui.DataForm namespace into your code.
  2. 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;
    }
}

Step 5: Creating a 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();
    }
}

Step 6: Set data object to .NET MAUI DataForm

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