Bunifu Circle Progress
Provide elegance in representing progression with custom content support; Visualize multiple ranges; Customize the circle progress appearance with flexibility.
Bunifu Circle Progress is a .NET control curated beautifully to visualize progress information of activities within your application. It gives you the flexibility to have an elegant appearance by presenting you with great properties that will provide visually compelling ways to showcase a single statistic. Here's an illustration whereby Bunifu Circle Progress has been used into showing statistics of weather temperature changes at different times of the day:
It's easy to add Bunifu Circle Progress control at design time. Start by locating Bunifu Circle Progress from your toolbox and simply drag it to your form as shown below then customize it to your desired look and feel using properties that will be elaborated on later in this documentation.
Bunifu Circle Progress works for both C# and VB.NET. We will use the Form’s Load event to write our sample code that will create and add the circle progress control with a value to our Form .
C#
VB.NET
using Bunifu.UI.WinForms;
using System;
using System.Drawing;
using System.Windows.Forms;
namespace Example
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
private void Form1_Load(object sender, EventArgs e)
{
BunifuCircleProgress bunifuCircleProgress = new BunifuCircleProgress();
//set the value for the progress circle control
bunifuCircleProgress.ValueByTransition = 26;
//set the value to be displayed as a percentage
bunifuCircleProgress.IsPercentage = true;
//set the animation to false unless it is in an indeterminate state
bunifuCircleProgress.Animated =false;
//set the control's location in the form
bunifuCircleProgress.Location = new Point(300, 100);
this.Controls.Add(bunifuCircleProgress);
}
}
}
Imports Bunifu.UI.WinForms
Imports System
Imports System.Drawing
Imports System.Windows.Forms
Namespace Example
Partial Public Class Form1
Inherits Form
Public Sub New()
InitializeComponent()
End Sub
Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
Dim bunifuCircleProgress As New BunifuCircleProgress()
'set the value for the progress circle control
bunifuCircleProgress.ValueByTransition = 26
'set the value to be displayed as a percentage
bunifuCircleProgress.IsPercentage = True
'set the animation to false unless it is in an indeterminate state
bunifuCircleProgress.Animated =False
'set the control's location in the form
bunifuCircleProgress.Location = New Point(300, 100)
Me.Controls.Add(bunifuCircleProgress)
End Sub
End Class
End Namespace
Using the timer component you can adjust the value dynamically in order to display the real-time value of the progress. Here's how to do it:
C#
VB.NET
using Bunifu.UI.WinForms;
using System;
using System.Drawing;
using System.Windows.Forms;
namespace Bunifu_Circle
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
BunifuCircleProgress bunifuCircleProgress = new BunifuCircleProgress();
Timer timer = new Timer();
int progress_value = 0;
private void Form1_Load(object sender, EventArgs e)
{
bunifuCircleProgress.IsPercentage = true;
bunifuCircleProgress.Animated =false;
bunifuCircleProgress.ValueByTransition = 0;
bunifuCircleProgress.Location = new Point(300, 100);
//set the timer properties and its timer tick event
timer.Enabled = true;
timer.Interval = 100;
timer.Tick += Timer_Tick;
this.Controls.Add(bunifuCircleProgress);
this.components.Add(timer);
}
private void Timer_Tick(object sender, EventArgs e)
{
if (progress_value < 57)
{
bunifuCircleProgress.ValueByTransition = progress_value;
progress_value += 1;
}
else
{
timer.Enabled = false;
}
}
Imports Bunifu.UI.WinForms
Imports System
Imports System.Drawing
Imports System.Windows.Forms
Namespace Bunifu_Circle
Partial Public Class Form1
Inherits Form
Public Sub New()
InitializeComponent()
End Sub
Private bunifuCircleProgress As New BunifuCircleProgress()
Private timer As New Timer()
Private progress_value As Integer = 0
Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
bunifuCircleProgress.IsPercentage = True
bunifuCircleProgress.Animated =False
bunifuCircleProgress.ValueByTransition = 0
bunifuCircleProgress.Location = New Point(300, 100)
'set the timer properties and its timer tick event
timer.Enabled = True
timer.Interval = 100
AddHandler timer.Tick, AddressOf Timer_Tick
Me.Controls.Add(bunifuCircleProgress)
Me.components.Add(timer)
End Sub
Private Sub Timer_Tick(ByVal sender As Object, ByVal e As EventArgs)
If progress_value < 57 Then
bunifuCircleProgress.ValueByTransition = progress_value
progress_value += 1
Else
timer.Enabled = False
End If
End Sub
Let's take a deep dive and get insights into the properties that are available on Bunifu Circle Progress.
This property allows you to get the property's integer value or set an integer value that will define the control's radius(i.e. the distance from the center of the circle to its circular boundary). When an integer value is increased, the radius is decreased, whereas when the integer value is decreased, the radius is increased.
This property allows you to get the property's integer value or set an integer value that will define the width of the circle's boundary line. By increasing the integer value, the track becomes thicker; by decreasing the integer value, the track becomes narrower.
This property allows you to get the property's integer value or set an integer value that defines the width of the progress line indicator. The line becomes thicker as the integer value increases; the line becomes narrower as the integer value decreases.
This property allows you to get the property's color value or set a color value for the progress track. It supports use of both HEX and RGB colors.
This property allows you to get the property's color value or set the progress line indicator's color value. It supports the use of both HEX and RGB colors.
This property allows you to get the property's end cap style or set a frame style for the line indicator's endpoint. There are four enumerated values:
Flat, Arrow, Round, and Triangle, with the Round style being the default.This property allows you to get the property's start cap style or set a frame style for the line indicator's start point. There are four enumerated values:
Flat, Arrow, Round, and Triangle, with the Round style being the default.
This property allows you to get the property's fill style or set the fill style of the progress color. There are two enumerated values available:
Solid and Gradient with the default value set to Solid.Gradient shows the change in intensity of the colors during the progress. To apply a gradient color to the progress line, ensure you have set
ProgressFillStyle prop to gradient and set both the ProgressColor andProgressColor2 properties with your preferred color values. 
This property allows you to get the property's bool value or set a boolean value, which when set to true, causes the progress line to revolve around the circle track. Its speed is completely adjustable.
This can be used to depict the circle's progress in an ambiguous manner when progress cannot be approximated or quantified. It can be used in conjunction with a determinate mode to notify users that the app is estimating progress prior to initiating actual progress.
This property allows you to get the property's elapsed time in milliseconds or set time milliseconds determines the duration that the line indicator will take to transition to the next interval (step) of progress.
Increase the milliseconds to decelerate the speed of transitioning between intervals; decrease the milliseconds to accelerate the speed of transitioning between intervals.
This is a nifty property that allows you to get the property's integer value(i.e the interval step) or set an integer value which will determine the steps that the line indicator will take to transition within a circle track.
A value of 0 causes the animation to halt because the line indicator will not take any steps during the transition. Increase the integer value to make fewer steps, which accelerates the revolving pace; reduce it to create more steps, which slows the revolving speed.
This property allows you to get the property's integer value or set an integer value that will define the progress information.
If you want to set the value programmatically use the
ValueByTransition property to set the value of progress.This property allows you to get the property's font settings or set font settings that will be applied on the progress value text displayed at the center of the control.
This property allows you to get the property's string value or set a string value that indicates a numerical unit or the notation for the progress value.
The property can be set to null (programmatically) or left blank (in design view) if there isn't any relevance in displaying the numerical unit of progress value displayed.
This property allows you to get the property's subscript text or set a text value such as number or letter values that can show an extension of information about the progress value.
For instance, if the progress value contains decimals, you can convert it to a string and then use the Substring method to extract the decimal portion of the number. The resultant string can then be assigned to the SubScriptText.
This property allows you to get the property's font settings or set font settings that will be applied on both the subscript and superscript text values.
This property allows you to get the property's subscript text color, or set a color value for the subscript text. It can support the use of both HEX and RGB color values.
This property allows you to get the property's subscript text color, or set a color value for the superscript text. It can support the use of both HEX and RGB color values.
This property allows you to get the property's margin integer value or set a marginal integer value that will determine the space around the superscript text within the control.
This property allows you to get the property's margin integer value or set a marginal integer value that will define the location and spacing of the progress value within the bounds of the control.
This event is raised whenever the
Value property set to a value that is different than the current value, which may have reduced or increased.Bunifu Circle Progress is a staple of WinForms app development. It’s one of those little minor details that can immensely impact a user’s experience and flow. We hope you will enjoy Bunifu Circle Progress and that it will help you create a better user experience for your users. Should you have feedback or suggestions please send us via chat on the bottom right corner of the screen.
Last modified 2yr ago