Data Binding in .NET MAUI DataForm
One way to set data form source is to use a class and decorate its properties with data annotations. These data annotations are used to build metadata for each property used by the data form to customize its UI.
The Editors and Groups are automatically generated by default. If you want to prevent this set the DataForm AutoGenerateItems property to False.
DataForm gets the data from the BindingContext set.
Auto-generated items
Use the following business model
public class GettingStartedModel : NotifyPropertyChangedBase
{
private string firstName;
private string lastName;
private DateTime? startDate;
private TimeSpan? startTime;
private double? people = 1;
private bool visited;
private TimeSpan? duration;
private EnumValue accommodation = EnumValue.Apartment;
public enum EnumValue
{
SingleRoom,
Apartment,
House
}
[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.firstName;
set => this.UpdateValue(ref this.firstName, value);
}
[Required]
[Display(Name = "Last Name")]
public string LastName
{
get => this.lastName;
set => this.UpdateValue(ref this.lastName, value);
}
[Display(Name = "Star date")]
public DateTime? StartDate
{
get => this.startDate;
set => this.UpdateValue(ref this.startDate, value);
}
[Display(Name = "Time")]
public TimeSpan? EndDate
{
get => this.startTime;
set => this.UpdateValue(ref this.startTime, value);
}
[Display(Name = "Number of People")]
public double? People
{
get => this.people;
set => this.UpdateValue(ref this.people, value);
}
[Required]
[Display(Name = "Visited before")]
public bool Visited
{
get => this.visited;
set => this.UpdateValue(ref this.visited, value);
}
[Required]
[Display(Name = "Duration")]
public TimeSpan? Duration
{
get => this.duration;
set => this.UpdateValue(ref this.duration, value);
}
}
DataForm definition with BindingContext set:
<telerik:RadDataForm x:Name="dataForm" AutomationId="dataForm"/>
Manually generated items
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);
}
}
RadDataForm definition with BindingContext set and AutoGenerateItems="False":
<telerik:RadDataForm x:Name="dataForm" AutoGenerateItems="False">
<telerik:RadDataForm.BindingContext>
<local:EditorsViewModel/>
</telerik:RadDataForm.BindingContext>
<telerik:DataFormRadEntryEditor PropertyName="FirstName" HeaderText="Name"/>
<telerik:DataFormRadNumericEditor PropertyName="People" HeaderText="People" Minimum="1"/>
<telerik:DataFormRadComboBoxEditor PropertyName="Accommodation" HeaderText="Accomodation options"/>
<telerik:DataFormRadDatePickerEditor PropertyName="StartDate" HeaderText="From:"/>
<telerik:DataFormRadDatePickerEditor PropertyName="EndDate" HeaderText="To:"/>
<telerik:DataFormRadTimeSpanPickerEditor PropertyName="Duration" HeaderText="Duration"/>
<telerik:DataFormRadCheckBoxEditor PropertyName="Visited" HeaderText="Visited before"/>
</telerik:RadDataForm>
