Progressbar with gradient

4 posts, 0 answers
  1. Andreas Haeusler
    Andreas Haeusler avatar
    25 posts
    Member since:
    Nov 2009

    Posted 12 Nov 2015 Link to this post

    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

  2. Dimitar
    Admin
    Dimitar avatar
    1415 posts

    Posted 13 Nov 2015 Link to this post

    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
  3. UI for WinForms is Visual Studio 2017 Ready
  4. Andreas Haeusler
    Andreas Haeusler avatar
    25 posts
    Member since:
    Nov 2009

    Posted 16 Nov 2015 Link to this post

    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!

  5. Dimitar
    Admin
    Dimitar avatar
    1415 posts

    Posted 16 Nov 2015 Link to this post

    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
Back to Top