New to Telerik UI for .NET MAUI? Start a free 30-day trial

.NET MAUI DataForm Editors Styling

The DataForm control for .NET MAUI provides styling options for customizing the appearance of its editors. You have to apply a style to each editor individually.

Each editor provides the following properties:

  • BackgroundColor—Defines the background color of the editor.
  • BorderColor—Defines the border color of the editor.
  • BorderThickness—Specifies the border thickness of the editor.
  • EditorStyle (Style with TargetType depending on the input control which the editor uses). For example, the target type of the RadCheckBoxEditor is RadCheckBox.


The following example shows how to style the DataForm:

1. Define the RadDataForm and the editors:

<telerik:RadDataForm x:Name="dataForm" AutoGenerateItems="False">
    <telerik:DataFormRadEntryEditor PropertyName="FirstName" 
                                BackgroundColor="#8AAAFF" />
    <telerik:DataFormRadNumericEditor PropertyName="People" 
                                   BorderThickness="2" />
    <telerik:DataFormRadTimeSpanPickerEditor PropertyName="Duration" 
                                          BorderThickness="2" />
    <telerik:DataFormRadCheckBoxEditor PropertyName="Visited" 
                                    HeaderText="Visited before"  
                                    EditorStyle="{StaticResource CheckBoxStyle}" />

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

2. Define the CheckBoxStyle for the DataFormRadCheckBoxEditor:

<Style x:Key="CheckBoxStyle" TargetType="telerik:RadCheckBox">
    <Setter Property="CheckedColor" Value="DarkSeaGreen" />
    <Setter Property="UncheckedColor" Value="Orange" />

3. Add the following namespace:


4. Define the ViewModel used as a BindingContext for the RadDataForm:

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

    [Display(Name = "Select accomodation")]
    public EnumValue Accommodation
            return this.accommodation;
            if (this.accommodation != value)
                this.accommodation = value;

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

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

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

    [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);

The following image shows what the DataForm control looks like when the styles described above are applied:

.NET MAUI DataForm Editor Styling

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

See Also

In this article