It would represent a circular ring and show % (percent) inside.
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
Hi,
Thanks for this. Really appreciate.
Can you add in the demo few more things:
Regards
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
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