.NET MAUI DataForm Custom Layout Definition
The DataFormCustomLayout definition allows you to arrange the items using a custom layout.
To build the custom layout you have to use the LayoutTemplate (DataTemplate) property.
Here is the DataForm XAML definition with CustomLayout applied using a RadWrapLayout:
<Grid>
<telerik:RadDataForm x:Name="dataForm">
<telerik:RadDataForm.LayoutDefinition>
<telerik:DataFormCustomLayout>
<telerik:DataFormCustomLayout.LayoutTemplate>
<DataTemplate>
<telerik:RadWrapLayout/>
</DataTemplate>
</telerik:DataFormCustomLayout.LayoutTemplate>
</telerik:DataFormCustomLayout>
</telerik:RadDataForm.LayoutDefinition>
<telerik:RadDataForm.BindingContext>
<local:EditorsViewModel/>
</telerik:RadDataForm.BindingContext>
</telerik:RadDataForm>
</Grid>
Note that local in the snippet above points to the namespace where the EditorsViewModel is defined.
Define the ViewModel for the DataForm BindingContext:
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);
}
}