Unplanned
Last Updated: 28 Oct 2019 14:09 by ADMIN
Alok Tibrewal
Created on: 22 Oct 2019 12:43
Category: ProgressBar
Type: Feature Request
3
RadProgressBar: add circular style for the progress bar

It would represent a circular ring and show % (percent) inside.

4 comments
ADMIN
Dess | Tech Support Engineer, Principal
Posted on: 28 Oct 2019 14:09

Hello, Alok,        

I am glad that the suggested solution was helpful for you. 

If you need to have two parts - one that indicates the completed part of the progress and another one for the remaining part, you can use the WaitingBarStyles.RotatingRings. Thus, you can benefit the two rings that it offers. I have modified the previous solution as follows in order to obtain this design:

        CircularProgressBar circularProgressBar = new CircularProgressBar();

        public RadForm1()
        {
            InitializeComponent();
            new RadControlSpyForm().Show();
            ThemeResolutionService.ApplicationThemeName = "Fluent";
           
            circularProgressBar.Size = new Size(100, 100);
            circularProgressBar.Location = new Point(10, 10);
            circularProgressBar.Anchor = AnchorStyles.Bottom | AnchorStyles.Left | AnchorStyles.Right | AnchorStyles.Top;
            this.Controls.Add(circularProgressBar);
         
            circularProgressBar.ProgressColor = Color.Lime;
            circularProgressBar.ProgressColor2 = Color.Red;  
            circularProgressBar.ProgressValue = 50;
        }

        public class CircularProgressBar : RadWaitingBar
        {
            private decimal _value;
            private Color _color;
            private Color _color2;

            public Color ProgressColor2
            {
                get
                {
                    return this._color2;
                }
                set
                {
                    this._color2 = value;
                }
            }

            public override string ThemeClassName
            {
                get
                {
                    return typeof(RadWaitingBar).FullName;
                }
            }

            protected override RadWaitingBarElement CreateWaitingBarElement()
            {
                RadWaitingBarElement waitingElement = base.CreateWaitingBarElement();
                waitingElement.WaitingStyle = Telerik.WinControls.Enumerations.WaitingBarStyles.RotatingRings;
                RotatingRingsWaitingBarIndicatorElement indicator = waitingElement.ContentElement.WaitingIndicators[0] as RotatingRingsWaitingBarIndicatorElement;
                this._color = Color.Blue;
                waitingElement.Text = "0 %";
            
                indicator.InitialStartElementAngle = 90;
                indicator.InnerRingSweepAngle = 360;
                indicator.InnerRingStartAngle = 0;

                return waitingElement;
            }

            public decimal ProgressValue
            {
                get
                {
                    return this._value;
                }

                set
                {
                    _value = value;
                    RotatingRingsWaitingBarIndicatorElement indicator =
                        this.WaitingBarElement.ContentElement.WaitingIndicators[0] as RotatingRingsWaitingBarIndicatorElement;
                    this.WaitingBarElement.Text = value + "%";
                    indicator.InnerRingStartAngle = 0;
                    indicator.InnerRingSweepAngle = (int)ConvertProgressValueToAngle(value);
                    indicator.OuterRingSweepAngle = 360;
                    UpdateVisualStyles();
                }
            }

            public Color ProgressColor
            {
                get
                {
                    return _color;
                }
                set
                {
                    this._color = value;
                    RotatingRingsWaitingBarIndicatorElement indicator =
                        this.WaitingBarElement.ContentElement.WaitingIndicators[0] as RotatingRingsWaitingBarIndicatorElement;
                    indicator.ElementColor = this.ProgressColor;
                    indicator.ElementColor2 = this.ProgressColor;
                }
            }

            private void UpdateVisualStyles()
            {
                RotatingRingsWaitingBarIndicatorElement indicator =
                    this.WaitingBarElement.ContentElement.WaitingIndicators[0] as RotatingRingsWaitingBarIndicatorElement;
                indicator.ElementColor = this.ProgressColor;
                indicator.InnerRingBackgroundColor = this.ProgressColor2;
                indicator.ElementNumberOfColors = 1;
                indicator.GradientStyle = Telerik.WinControls.GradientStyles.Solid;
                indicator.InnerRadius = this.Width / 4 + 10;
                indicator.Radius = this.Width / 4 + 10;
                indicator.InnerRingWidth = 5;
                indicator.OuterRingWidth = 5;
            }

            private decimal ConvertProgressValueToAngle(decimal value)
            {
                decimal angleValue = 0;
                angleValue = value * 360 / 100;
                return angleValue;
            }
        }

Note that this is just a sample approach and it may not cover all possible cases. Feel free to modify and extend in a way which suits your requirements best. As to the opacity, feel free to specify the two colors using the Color.FromArgb method passing the alpha value for transparency.

I hope this information helps.

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Alok Tibrewal
Posted on: 25 Oct 2019 07:48

Hi,

Thanks for this. Really appreciate.

 

Can you add in the demo few more things:

 

  1. Circular Box to complete and not look half cut moon.
    1. Percent complete - one color
    2. Percent not complete - another color.
  2. Manage opacity of circular box background so that it blend with the list view background color we use.

Regards

 

 

ADMIN
Dess | Tech Support Engineer, Principal
Posted on: 24 Oct 2019 10:14

Hello, Alok,       

We have introduced a new knowledge base article demonstrating a sample approach how you can implement a circular progress bar: https://docs.telerik.com/devtools/winforms/knowledge-base/circular-progressbar

Feel free to share any feedback about the features that you would expect to see in the new control. Thus, we will be able to consider them when implementing the functionality.

If you need any further assistance please don't hesitate to contact me. 

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Alok Tibrewal
Posted on: 23 Oct 2019 06:54

Hi All,

If this feature is there then we can easily demonstrate progress of task, job etc in ListView and Panorama Controls making our designs looks good.

if any of you are using list view to show summary of task based on some group, or similar activity this will be good feature for all of us.

Thanks for supporting this request.

 

Regards