Bunifu Circle Progress

Provide elegance in representing progression with custom content support; Visualize multiple ranges; Customize the circle progress appearance with flexibility.

Overview

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:

Getting Started

Adding BunifuCircleProgress during design time

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.

Adding Bunifu Circle Progress at run time

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 .

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:

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.

Circle Properties

`1. CircleMargin`

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.

`2. LineThickness (Track Line Thickness)`

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.

Progress Properties

`1. LineProgressThickness`

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.

`2. ProgressBackColor( the track color)`

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.

`3. ProgressColor (the line indicator)`

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.

`4. ProgressEndCap`

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.

`5. ProgressStartCap`

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.

`6. ProgressFillStyle`

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.

Animation Properties

`1. Animated`

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.

`2. AnimationSpeed`

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.

`3. AnimationInterval`

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.

Text, Value & Font Properties

`1. Value`

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.

`2. Font`

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.

`3. SuperScriptText`

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.

`4. SubScriptText`

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.

`5. SecondaryFont`

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.

`6. SubScriptColor`

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.

`7. SuperScriptColor`

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.

`8. SuperScriptMargin`

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.

`9. ValueMargin`

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.

Bunifu Circle Progress Events

`1. ProgressValueChanged`

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.

Take Away

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.

PreviousBunifu CheckBox NextBunifu Datagrid View

Last updated 3 years ago

Was this helpful?