.NET MAUI DataForm Error Message Styling

The DatePicker control for .NET MAUI provides styling options for customizing the apperance of the error message that appears when the entered data is invalid.

The style of the error message can be set individually for each editor or directly to the DataForm control using the following styling properties:

• ErrorImageSource(ImageSource)—Specifies the ImageSource of the image displayed in the error message.
• ErrorImageStyle(of type Style with target type Image)—Defines the error image style.
• ErrorLabelStyle(of type Style with target type Label)—Defines the error label style.

Defining two different ErrorLabelStyle:

<Style x:Key="ErrorLabelStyle" TargetType="Label">
    <Setter Property="TextColor" Value="Orange" />
    <Setter Property="VerticalTextAlignment" Value="Center" />
    <Setter Property="HorizontalTextAlignment" Value="Center" />
</Style>

<Style x:Key="ErrorLabelStyleAlt" TargetType="Label">
    <Setter Property="TextColor" Value="DarkGray" />
    <Setter Property="VerticalTextAlignment" Value="Center" />
    <Setter Property="HorizontalTextAlignment" Value="Center" />
</Style>

Apply common ErrorLabelStyle for all editors

<telerik:RadDataForm x:Name="dataFormCommonErrorStyle" 
                     Grid.Row="1" 
                     ErrorLabelStyle="{StaticResource ErrorLabelStyle}"
                     ValidationMode="LostFocus">
    <telerik:RadDataForm.BindingContext>
        <local:DataTypeEditorsModel />
    </telerik:RadDataForm.BindingContext>
</telerik:RadDataForm>

Apply ErrorLabelStyle per editor

<telerik:RadDataForm x:Name="dataFormIndividualErrorStyle" 
                     AutoGenerateItems="False" 
                     Grid.Row="3"  
                     ValidationMode="LostFocus">
    <telerik:DataFormRadEntryEditor PropertyName="FirstName" 
                                HeaderText="Name" 
                                ErrorLabelStyle="{StaticResource ErrorLabelStyle}" />
    <telerik:DataFormRadNumericEditor PropertyName="Email" 
                                      HeaderText="Email address" 
                                      Minimum="1" 
                                      ErrorLabelStyle="{StaticResource ErrorLabelStyleAlt}" />
    <telerik:RadDataForm.BindingContext>
        <local:DataTypeEditorsModel />
    </telerik:RadDataForm.BindingContext>
</telerik:RadDataForm>

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:

See Also

• Editors Styling
• Groups Styling
• Validation Styling
• Header Styling