Progressbar with gradient

[Andreas Haeusler]

Hello,

 

is there a way to have the RadProgressbarElement show a gradient that only uses part of the defined color range depending on the actual progress (eg. at 50% only BackColor1->BackColor2, at 75% BackColor1->BackColor3, at 100% BackColor1->BackColor4)?

 

 

Kind regards,

Andreas

[Dimitar]

Hi Andreas,

Thank you for writing.

You can simulate this behavior by changing the ProgressOrientation and setting the progress bar background:

public partial class RadForm1 : Telerik.WinControls.UI.RadForm
{
    System.Windows.Forms.Timer timer = new System.Windows.Forms.Timer();

    public RadForm1()
    {
        InitializeComponent();

        radProgressBar1.Value1 = 100;
        radProgressBar1.ProgressBarElement.IndicatorElement1.GradientStyle = Telerik.WinControls.GradientStyles.Solid;
        radProgressBar1.ProgressBarElement.ProgressOrientation = Telerik.WinControls.ProgressOrientation.Right;

        radProgressBar1.ProgressBarElement.GradientAngle = 0;
        radProgressBar1.ProgressBarElement.BackColor = Color.Red;
        radProgressBar1.ProgressBarElement.BackColor2 = Color.Black;
        radProgressBar1.ProgressBarElement.BackColor3 = Color.Blue;
        radProgressBar1.ProgressBarElement.BackColor3 = Color.Green;

        radProgressBar1.ProgressBarElement.Shape = null;

        timer.Interval = 300;
        timer.Tick += timer_Tick;
    }

    int ticks = 100;

    void timer_Tick(object sender, EventArgs e)
    {
        ticks--;
        radProgressBar1.Value1 = ticks;
        if (ticks == 0)
        {
            timer.Enabled = false;
        }
    }

    private void radButton1_Click(object sender, EventArgs e)
    {
        timer.Start();
    }
}

Let me know if I can assist you further.

Regards,
Dimitar
Telerik

[Andreas Haeusler]

Thank you Dimitar,

 

 

this works. Due to the "hackish" nature of this approach one has to "invert" the setter (i.e. you have to set the control to 25 if you want it to show 75) and progress indicators, but this is managable.

 

 

Thanks!

[Dimitar]

Hello Andreas,

This is necessary because the gradient is filling the entire visible part of the element and there is no other way to show only part of it. 

Do not hesitate to contact us if you have other questions.

Regards,
Dimitar
Telerik