How to change color of FontImageSource programmatically?

1 Answer 164 Views
Button
Rolf
Top achievements
Rank 1
Iron
Iron
Iron
Rolf asked on 13 Jun 2023, 02:18 PM

How to change the color of the following icon in a RadButton in code behind:

<telerik:RadButton Clicked="DoSomething"
                               ClassId="PhonePortrait"
                               x:Name="PhonePortrait"
                               BorderThickness="0"
                               BackgroundColor="Transparent"
                               HorizontalOptions="Center"
                               VerticalOptions="Center"
                               Margin="12,0,0,0"
                               WidthRequest="32"
                               HeightRequest="32">
                <telerik:RadButton.ImageSource>
                    <FontImageSource FontFamily="IonIcons" Glyph="&#xf24e;" Color="#999999" Size="28"/>
                </telerik:RadButton.ImageSource>
</telerik:RadButton>

1 Answer, 1 is accepted

Sort by
0
Lance | Manager Technical Support
Telerik team
answered on 13 Jun 2023, 05:55 PM

Hello Rolf,

That element is not part of the Telerik APIs, a FontImageSource is a .NET MAUI object. In fact, this approach is identical to a plain MAUI Button because the RadButton inherits this functionality from MAUI.

Here's an explanatory walkthrough with a standard Button for your consideration. 

public partial class MainPage : ContentPage
{
 private Button PhonePortrait;

public MainPage()
 {
        PhonePortrait = new Button();
        PhonePortrait.ImageSource = new FontImageSource
        {
            FontFamily = "IonIcons",
 Glyph = "\uf24e",
 Color = Color.FromArgb("#999999"),
 Size = 28
 };
        
	InitializeComponent();
        this.Content = PhonePortrait;
    }

    protected override void OnAppearing()
 {
        base.OnAppearing();

 // Option 1 - try to access the original value (WARNING: This only works if the Color property has property changed notifications)
 // According to Microsoft's MAUI source code, it is NOT observable https://github.com/dotnet/maui/blob/c096b3a03b4d56a0b56660298559db4791a8d489/src/Core/src/ImageSources/IFontImageSource.cs#L6 
 (PhonePortrait.ImageSource as FontImageSource).Color = Color.FromArgb("#FF0000");

 // Option 2 - This is really your only option, set a new value
 PhonePortrait.ImageSource = new FontImageSource
        {
            FontFamily = "IonIcons",
 Glyph = "\uf24e",
 Color = Color.FromArgb("#FF0000"),
 Size = 28
 };
    }
}

I imagine you will come to the same conclusion that I did where Option 2 is the only path forward.

If you want to be efficient about it... just write an extension method for the Button type (or RadButton) with some default values... but each of them can be set if needed:

public static class Extensions
{
    public static void UpdateIcon(
        this RadButton btn,
        string fontFamily = "IonIcons",
        string glyph = "\uf24e",
        double size = 28,
        Color color = null)
    {
        if (color == null)
            throw new ArgumentNullException("Whoops, forgot to set the Color value");

        btn.ImageSource = new FontImageSource
        {
            FontFamily = fontFamily,
            Glyph = glyph,
            Color = color,
            Size = size
        };
    }
}

With that you can now use your own extension method on any instance of that type. For example, this one will use all the predetermined default values, except for Color:

PhonePortrait.UpdateIcon(color: Color.FromArgb("#FF0000"));


If you have any trouble with this, or would like additional assistance with FontImageSource, Microsoft will be able to help you further in this forum => .NET MAUI - Microsoft Q&A.

Regards,
Lance | Manager Technical Support
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Button
Asked by
Rolf
Top achievements
Rank 1
Iron
Iron
Iron
Answers by
Lance | Manager Technical Support
Telerik team
Share this question
or