This is a migrated thread and some comments may be shown as answers.

Progressbar with gradient

3 Answers 303 Views
ProgressBar
This is a migrated thread and some comments may be shown as answers.
Andreas Haeusler
Top achievements
Rank 2
Andreas Haeusler asked on 12 Nov 2015, 11:07 AM

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

3 Answers, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 13 Nov 2015, 02:18 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Andreas Haeusler
Top achievements
Rank 2
answered on 16 Nov 2015, 12:48 PM

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!

0
Dimitar
Telerik team
answered on 16 Nov 2015, 01:09 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
ProgressBar
Asked by
Andreas Haeusler
Top achievements
Rank 2
Answers by
Dimitar
Telerik team
Andreas Haeusler
Top achievements
Rank 2
Share this question
or