.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.

Example

The example shows how to style the DataForm

Define the RadDataForm and the editors.

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

Define the CheckBoxStyle for the RadCheckBox editor

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

Add the following namespace:

xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"

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