New to Telerik UI for WinForms? Download free 30-day trial

How to Create a Circular ProgressBar

Environment

Product Version Product Author
2019.3.917 RadProgressBar for WinForms Desislava Yordanova

Description

The main purpose of RadProgressBar is to indicate progress. However, it doesn't offer circular style. This tutorial aims to demonstrate a sample approach how to achieve a circular progress bar using the existing circular waiting styles for RadWaitingBar

circular-progressbar001

Solution

Create a derivative of RadWaitingBar and manipulate the InitialStartElementAngle, SweepAngle and MinSweepAngle to represent the equivalent value within the range [0-100]. A sample implementation is demonstrated in the following code snippet:


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

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

            protected override RadWaitingBarElement CreateWaitingBarElement()
            {
                RadWaitingBarElement waitingElement = base.CreateWaitingBarElement();
                waitingElement.WaitingStyle = Telerik.WinControls.Enumerations.WaitingBarStyles.FadingRing;
                FadingRingWaitingBarIndicatorElement indicator = waitingElement.ContentElement.WaitingIndicators[0] as FadingRingWaitingBarIndicatorElement;
                this._color = Color.Blue;
                waitingElement.Text = "0 %";

                indicator.InitialStartElementAngle = 90;
                indicator.SweepAngle = 360;
                indicator.MinSweepAngle = 0;

                return waitingElement;
            }

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

                set
                {
                    _value = value;
                    FadingRingWaitingBarIndicatorElement indicator = 
                        this.WaitingBarElement.ContentElement.WaitingIndicators[0] as FadingRingWaitingBarIndicatorElement;
                    this.WaitingBarElement.Text = value + "%";
                    indicator.MinSweepAngle = (int)ConvertProgressValueToAngle(value);
                    UpdateVisualStyles();
                }
            }

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

            private void UpdateVisualStyles()
            {
                FadingRingWaitingBarIndicatorElement indicator = 
                    this.WaitingBarElement.ContentElement.WaitingIndicators[0] as FadingRingWaitingBarIndicatorElement;
                indicator.ElementColor = this.ProgressColor;
                indicator.ElementColor2 = this.ProgressColor;
                indicator.GradientStyle = Telerik.WinControls.GradientStyles.Solid;
                indicator.InnerRadius = this.Width / 4 + 10;
                indicator.Radius = this.Width / 4 + 20;
            }

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

        CircularProgressBar circularProgressBar = new CircularProgressBar();

        public RadForm1()
        {
            InitializeComponent();

            circularProgressBar.Size = new Size(100, 100);
            circularProgressBar.Location = new Point(10, 10);
            this.Controls.Add(circularProgressBar);
            circularProgressBar.ProgressValue = 50;
            circularProgressBar.ProgressColor = Color.DarkRed;
            circularProgressBar.BackColor = Color.Transparent;
            circularProgressBar.WaitingBarElement.DrawBorder = false;

        }