.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 theImageSource
of the image displayed in the error message. -
ErrorImageStyle
(of typeStyle
with target typeImage
)—Defines the error image style. -
ErrorLabelStyle
(of typeStyle
with target typeLabel
)—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"