.NET MAUI DataForm GridLayout Definition

The DataFormGridLayout definition allows you to arrange the items in a grid layout. The grid has a pre-defined number of columns(2). Starting from the top left corner, the items are arranged horizontally by columns, until the maximum number of columns is reached, then the process continues from the next row. Each item occupies only a single cell of the grid by default.

Use the following properties which the DataFormGridLayout provides:

• ColumnCount(int)—Specifies the count of the columns in the grid layout. Default value is 2.
• ColumnSpacing(double)—Specifies the spacing between the columns. Default value is 24.
• RowSpacing(bouble)—Specifies the spacing between the rows in the grid layout. Default value is 24.

For more details about the GridLayout review the official GridLayout Microsoft Documentation.

RadDataForm XAML definition with DataFormGridLayout applied:

<telerik:RadDataForm x:Name="dataForm">
    <telerik:RadDataForm.LayoutDefinition>
        <telerik:DataFormGridLayout ColumnCount="{OnIdiom Phone='2', Desktop='3', Tablet='3'}"
                                    RowSpacing="15"
                                    ColumnSpacing="5"/>
    </telerik:RadDataForm.LayoutDefinition>
    <telerik:RadDataForm.BindingContext>
        <local:EditorsViewModel/>
    </telerik:RadDataForm.BindingContext>
</telerik:RadDataForm>

Note that local in the snippet above points to the namespace where the EditorsViewModel is defined.

The ViewModel used for the DataForm editors:

public class EditorsViewModel : NotifyPropertyChangedBase
{
    private string name;
    private DateTime? startDate;
    private DateTime? endDate;
    private double? people;
    private bool? visited;
    private TimeSpan? duration;
    private EnumValue accommodation = EnumValue.Apartment;
    public enum EnumValue
    {
        SingleRoom,
        Apartment,
        House
    }

    [Required]
    [Display(Name = "Select accomodation")]
    public EnumValue Accommodation
    {
        get
        {
            return this.accommodation;
        }
        set
        {
            if (this.accommodation != value)
            {
                this.accommodation = value;
                this.OnPropertyChanged();
            }
        }
    }

    [Required]
    [Display(Name = "First Name")]
    public string FirstName
    {
        get => this.name;
        set => this.UpdateValue(ref this.name, value);
    }

    [Required]
    [Display(Name = "Start date")]
    public DateTime? StartDate
    {
        get => this.startDate;
        set => this.UpdateValue(ref this.startDate, value);
    }

    [Required]
    [Display(Name = "End Date")]
    public DateTime? EndDate
    {
        get => this.endDate;
        set => this.UpdateValue(ref this.endDate, value);
    }

    [Required]
    [Display(Name = "Number of People")]
    [Range(1, 10)]
    public double? People
    {
        get => this.people;
        set => this.UpdateValue(ref this.people, value);
    }

    [Display(Name = "Visited before")]
    public bool? Visited
    {
        get => this.visited;
        set => this.UpdateValue(ref this.visited, value);
    }

    [Display(Name = "Duration")]
    public TimeSpan? Duration
    {
        get => this.duration;
        set => this.UpdateValue(ref this.duration, value);
    }
}

For a runnable example with the DataForm GridLayout scenario, see the SDKBrowser Demo Application and go to DataForm > Layouts category.

See Also

• VerticalStack Layout
• Custom Layout