Text Forecolor in RadProgressBar

1 Answer 10 Views
ProgressBar
Hell
Top achievements
Rank 1
Iron
Iron
Iron
Hell asked on 24 Jul 2025, 12:41 PM | edited on 24 Jul 2025, 09:35 PM
How to invert the text color as the progress bar fills so that the text is visible on different colors of the progress bar? For example, on a green background, the text color is yellow, and on a light gray background, the text color is black or another visible color. Like here 

1 Answer, 1 is accepted

Sort by
0
Dinko | Tech Support Engineer
Telerik team
answered on 25 Jul 2025, 12:19 PM

Hello Hell Hellov,

Thank you for contacting us.

The RadProgressBar does not automatically adjust the text color based on the background. This behavior is not supported by the control. However, this could be achieved with custom code. One idea is to subscribe to the Paint event of the RadProgressBar control. In the event handler, you can create custom logic that draws a string above the control. The custom logic will need to calculate when the progress bar fill element reaches a character in the text. Also, to color different characters from the string, you can try to draw each character in a different color. 

To get you started, I have created a very simple code that draws a string above the control. At the moment when the fill area reaches a specific value, the text is drawn in a different color. Now I understand that this code is far from what your requirement is, but I think that you could use it as a starting point.

public Form1()
{
    InitializeComponent();
    radProgressBar1.Text = "";
    this.radProgressBar1.Paint += (s, e) =>
    {
        var progressBar = this.radProgressBar1;
        var g = e.Graphics;
        var rect = progressBar.ClientRectangle;

        // Calculate the width of the filled area
        int filledWidth = (int)(rect.Width * ((double)(progressBar.Value1 - progressBar.Minimum) / (progressBar.Maximum - progressBar.Minimum)));

        // Decide text color based on fill amount (customize as needed)
        Color textColor = filledWidth > rect.Width / 2 ? Color.Yellow : Color.Black;

        // Draw the text centered
        string text = "radProgressBar1";
        using (Brush textBrush = new SolidBrush(textColor))
        {
            SizeF textSize = g.MeasureString(text, progressBar.Font);
            PointF textLocation = new PointF(
                (rect.Width - textSize.Width) / 2,
                (rect.Height - textSize.Height) / 2
            );
            g.DrawString(text, progressBar.Font, textBrush, textLocation);
        }
    };
}

Regards,
Dinko | Tech Support Engineer
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.

Hell
Top achievements
Rank 1
Iron
Iron
Iron
commented on 25 Jul 2025, 02:51 PM

Now I understand that this code is far from what your requirement is, but I think that you could use it as a starting point.

This is exactly what I thought before I even finished reading your message. This is what I needed to get started. Thank you and have a nice day!

Tags
ProgressBar
Asked by
Hell
Top achievements
Rank 1
Iron
Iron
Iron
Answers by
Dinko | Tech Support Engineer
Telerik team
Share this question
or