Change font size in the data form editors

[Nate]

I am trying to change the font size in my data form by creating a style in the styles.xml file. I was able to set the font size in a DataFormDatePickerEditor and DataFormRadEntryEditor, but not for the DataFormRadNumericEntry. I've tried targeting a label, a RadNumericInput, RadNumericEntry, Entry, RadEntry, and DataFormRadNumericEntryEditor for my style, but to no success. I would also like to set the font size for the validation message from the data annotations. I have attached below screenshots to clarify. Am I targeting the wrong type? Or is there a workaround to change the font sizing?

Thanks, 

Nate

[Maria]

Hello Nate,

Thank you for the images.

You can easily style the editors of the DataForm control. You can additionally style each editor by applying a style with the same target type as the underlying control. I am sending you an example below: 

 
<Style x:Key="RadNumericMaskedEditorStyle" TargetType="telerik:RadNumericMaskedEntry">
        <Setter Property="FontSize"
                Value="15" />
    </Style>
 

For more information on how to style the DataForm Masked Editors, you could check our documentation article: .NET MAUI DataForm Masked Editors.

For the validation message, you can set the ErrorLabelStyle property which defines the error label style. Here is a code snippet below:

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

For additional information, you could check our styling article about the DataForm error message. Here is the link: .NET MAUI DataForm Error Message Styling.

I hope this information helps. Let me know if you need further assistance.

Regards,
Maria
Progress Telerik

[Nate]

Thank you for the help with the Error message! However, I am still unable to set the font size in a Data Form Rad Numeric Editor. I tried switching it to a numeric masked entry but that didn't work either. I've attached screen shots of my style and its implementation to help. 

Thanks,

Nate

[Maria]

Hello Nate,

When adding a style through the Styles .xaml file you can have an undesired behavior. The reason is that when adding an implicit style, they are applied too early before initializing the control. There is a logged bug report in the .NET Maui repo. I am sending you a link to the item: Implicit styles in App.xaml are applied too early, before the class's constructor. You could check it.

Try to set the style in the resource dictionary in the MainPage .xaml file. I am sending you a code snippet:

 <ContentPage.Resources>
        <ResourceDictionary>
            <Style x:Key="RadNumericMaskedEditorStyle" TargetType="telerik:RadNumericMaskedEntry">
                <Setter Property="FontSize"
                Value="50" />
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>

And the editor's definition.

  <telerik:DataFormRadNumericMaskedEditor x:Name="maskedEditor"
                                                    EditorStyle="{StaticResource RadNumericMaskedEditorStyle}"
                                                    HeaderText="entry">
            </telerik:DataFormRadNumericMaskedEditor>

I hope this information helps. 

Regards,
Maria
Progress Telerik

[Nate]

Hi Maria,

Thank you for your help thus far! However, I am using the DataFormRadNumericEditor control, not the DataFormRadNumericMaskedEditor. I tried styling as you mentioned by switching to the masked editor control, but with no luck. A better question for me to ask may be what properties are available to set for the rad numeric editor control. 

Thanks, 

Nate

[Maria]

Hello Nate,

The properties you could set initially for the DataFormRadNumericEditor are Minimum, Maximum, and StringFormat properties.

About properties you could set through the styles, you could check our ControlTemplate article for the NumericInput control. I am sending you a link: NumericInput Control Template. You could use it because the DataFormRadNumericEditor is from the target type RadNumericInput. You could check the table in our DataForm Editors overview article with the editors and their input control.

I hope this information is useful.