Font Size and Text Color for Rad controls

[Josh]

Hello,

I have several controls I want to change the font size and text color for (RadNumericInput, RadTimePicker, and RadTimeSpanPicker). The pop-ups are fine out of the box but the control itself (before being tapped on) has fairly small font and the font is black which doesn't work in Dark Mode. I would like to make the font larger for each of these 3 controls and bind the Text Color to a Color in my Theme so the text color updates based on the theme being Dark vs Light. I'm assuming I would do these changes for all the controls in a similar way, but I am fairly new to Telerik UI. I just don't seem to find a TextColor or FontSize exposed as either an attribute, property, etc. for any of the Rad controls. I must be missing something simple, as every basic control has ability to change text color and size.  

I would appreciate any help somebody could provide. Thank you.

p.s. - Bonus points if you can tell me how to do it in C# rather than XAML, but OK if not. I can adapt it as needed. :)

[Lance | Senior Manager Technical Support]

Hello Josh,

Thank you for reaching out! as you've discovered, there isn't a top-level fontSize-like property that you might be used to in WPF (or similar XAML). Rather, this is closer to Xamarin.Forms flavor where there's a "LabelStyle"-like property that you set (of type Style with a target type of Label). 

This is a powerful approach because it lets you set all the properties of Label that you want, instead of only a single color, or font size.

Moving Forward

To begin, you should know where to find the Styling documentation for each of the components you mentioned: If you go to the top-level documentation, look for an expandable subtopic titled "Styling". Expand that Styling section and you see the control's individual styling articles.

For example, TimePicker's article is https://docs.telerik.com/devtools/maui/controls/timepicker/styling/styling 

Taking Action

To answer your fundamental question about how to change the font properties, you use the DisplayLabelStyle (or ToggleButtonStyle for the button, or PlaceholderLabelStyle for the placeholder, etc.).

Through those styles, is the avenue to modify text appearance, for example here's a Style that sets the TextColor to Red (you can also set FontSize there, too).

<Style TargetType="Label" x:Key="MyRedDisplayLabelStyle">
    <Setter Property="TextColor" Value="Red"/>
    ....
</Style>

or in C#:

var myRedLabelStyle = new Style(typeof(Label));
myRedLabelStyle.Setters.Add(new Setter(){Property = Label.TextColorProperty, Value = Colors.Red});

Usage

Now you'd use that Style on any property that accepts a Style with a target type Label, for exampel, the RadTimePicker's DisplayLabelStyle and PlaceholderLabelStyle properties:

<telerik:RadTimeSpanPicker DisplayLabelStyle="{StaticResource MyRedDisplayLabelStyle}" PlaceholderLabelStyle="{StaticResource MyRedDisplayLabelStyle}"/>

Or in C#, it would look like this (assuming MyRedDisplayLabelStyle is in the current page's Resources):

var tp = new RadTimePicker();
tp.DisplayLabelStyle = myRedLabelStyle;
tp.PlaceholderLabelStyle = myRedLabelStyle;

 

Important Note: If your resources are defined a ResourceDictionary, you use the StatciResource key, like this

var tp = new RadTimePicker();
tp.DisplayLabelStyle = this.Resources["MyRedDisplayLabelStyle"] as Style;
tp.PlaceholderLabelStyle = this.Resources["MyRedDisplayLabelStyle"] as Style;

Understanding the Broader Scope

Now that you've seen how a single instance is handled, let's take a step back so I can empower you to finish everything you need.

If you navigated to the documentation link I shared above, you'd see that there are a few top-level 'style properties' that you can directly set with a Label style

Everything you need to know is in those articles and that list of styling properties. IF you do not see what you need at the top level, it is usually because there's a more powerful way to handle it and you go in through that door.

For example, if you wanted to change the TextColor of the Clear button, you'd have a Style targeting Button and used for ClearButtonStyle. This lets you access all of the other properties of the button (instead of only the text color).

Reusability

Finally, you can re-use any style that you've defined in as many places as you need to. For example, use the same Label style for the timeSpanPicker https://docs.telerik.com/devtools/maui/controls/timespanpicker/styling/styling 

Wrapping Up

I hope this helps point you in the right direction! I have a couple finishing comments for you.

Priority Technical Support

If you have any questions that require individual/private attention and high-priority response, you can open a Support Ticket instead of a Forum post. Using the forums is fine because you get to share the information with the community, but it is public, and our responses may take more than 24 hours depending on the current support load (priority support tickets are answered first).

C# Only Resources

Everything you see in the documentation and demos can be converted to C#. At this time, there isn't a lot of it in the documentation because there hasn't been much demand for it. If you open a Feature Request to explicitly ask the .NET MAUI team to add a C# version of everything, the team can track the demand and implement it in a future release.

Regards,
Lance | Manager Technical Support
Progress Telerik

[Josh]

Thank you for the response Lance. On pretty much every built-in MAUI control you can do as below to easily set Font Size and Color. This binds the color to a color defined in BaseTheme:

The .Font() method above works on every MAUI control that has text in it. But not Telerik controls.

I had actually dug through all of the above resources quite a bit and already found the DisplayLabelStyle property which seemed like what I would want - but didn't mention it in my original post above because I couldn't get it to work (at least not in C#). I was able to modify the XAML in the SDK Example and change the TextColor in the example but converting it to C# didn't work. Additionally, there is no Text Size property for the DisplayLabelStyle - only Color. So assuming I figure out how to get the DisplayLabelStyle working for Color I still need to adjust the Text/Font size.

I created a TimeSpanPickerDisplaylabelStyle "Style" with target type of "Label" in my resource dictionary (see below) but when I bound the DisplayLabelStyleProperty of the RadTimeSpanPicker control to this Style it seems to have no effect. I see no compilation or runtime errors but it just doesn't work. Maybe I am converting it to C# incorrectly? I have dozens of styles in my ResourceDictionary and they are defined very similarly (and work) so I think this is correct. But maybe not.

Definition of the Style (this is the light theme version, there is a similar one for dark theme; they both override a BaseTheme 's abstract member):

I am using the MAUI Markup CommunityToolkit so binding properties is easy using extensions.

I can bind the TimeProperty to an Observable Property in my ViewModel and that works as expected. But binding the DisplayLabelStyleProperty or the BorderColorProperty for example have no effect:

So do you see anything I am doing wrong here? 

Also, if I fix the above and set the color I still need to set the font/text size. I have a hard time believing the fancy control library of Telerik UI doesn't have the ability to change a setting as simple as a font size. But again, perhaps I am missing it.

Thank you for your help! Its much appreciated.

[Lance | Senior Manager Technical Support]

Hi Josh,

I'm not really seeing the same problem when using the standard styling approach. Here's a screenshot:

At this point, since the Label style works as expected in the normal approach, I suspect an issue with the way your custom implementation and object inheritance is setup.  Normally, custom app development is outside the scope of support, but I will ask the team to make an exception if you can provide a runnable reproducible (I give you a head start with the attached project).

I am going to create a Support Ticket on your behalf in your account. When you get that email notification about the ticket, please take the following steps:

1. Open your Support Tickets page and reply to the new ticket I created
2. Download the starter project I've attached to this reply
3. Update MainPage.xaml.cs so that it reproduces the problem(s) you're seeing
4. Run it and confirmed the problem is reproduced at runtime
5. Open the project in File Explorer and delete the bin and obj folders to reduce zip size to 1-2mb (you might need to close VS2022 before they can be deleted)
6. Zip up the folder and attach the zip it to your ticket reply
7. In the body of the response, repeat a very short summary of what it is doing and steps to reproduce/what to look for.

When I get your response to the ticket with the attachment, I can escalate the case to the .NET MAUI support engineers and dev team.

[Josh]

Ugh... I found the issue. I created a runnable reproducible as you requested that clearly showed the problem and was about ready to upload the ZIP when I noticed something. My ResourceDictionary in C# was fine, the inheritance was all correct, the different theme definitions, etc. The way I defined the DisplayLabelStyleProperty in each Theme was fine. I had an example of a Label I was styling to show that the method does work on standard MAUI controls just not on Telerik controls. The standard Label styled correctly as expected but not the Label internal to the TimeSpanPicker. 

The problem was that on the controls that properly bound the Style property to the ResourceDictionary item I noticed that I hadn't actually called the .Bind() extension method - rather I called the .DynamicResource(...). extension method. For binding the Time value of the picker to a variable the .Bind() method is correct but not for binding Style properties to resources apparently. *face palm* Not sure why this doesn't throw a compilation or runtime error either one. An error would have helped me find the problem several hours sooner. I wasted half a day on this thinking it was the Telerik library not supporting Binding of properties correctly. It was just dumb user error. I was calling the wrong method. 

So instead of this:

It should have been this:

Thank you for your support, Lance. You may mark the issue in my account as closed/delete it.

Maybe somebody else can learn from my mistake: If you are using the MAUI.Markup CommunityToolkit with Telerik UI they actually do play together just fine - but use .DynamicResource() for styling not .Bind() which is only for binding control values or text to local variables.