Bunifu CheckBox
Tristate support: Checked, unchecked, and indeterminate states; Flexible UI customization for checked and unchecked states.

Overview

Bunifu Checkbox is a .NET control used for selecting one or more options from a list of predefined choices. With Bunifu CheckBox you can design way good-looking checkboxes that will guarantee a great user experience. It supports an indeterminate state, different sizes, custom labels and positions, and UI customization
Bunifu CheckBox works like the standard CheckBox and is used by the user for selecting options. Below is an illustration whereby Bunifu Checkbox has been used in creating a predefined user choice list of settings.

Getting started

Adding Bunifu CheckBox in design time

It's easy to add Bunifu Checkbox control at design time. Start by locating Bunifu Checkbox 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 article.
Let's continue with an example and begin by creating a simple application that tracks a list of to-do items in a day.
Step one: Create a new form and set its layout as shown below:
Step two: Set the FlowLayoutPanel to a flow direction of Top-down. Then drop a Panel inside the FlowLayoutPanel and resize it to a width of 174 and a height of 48. Also, set its background color to 235, 245, 255
Step three: Inside the panel, drop a Bunifu Checkbox control and Bunifu Label, then position them as illustrated below:
Step four: Access the properties of the checkbox and look out for the BindingControl property and set the label beside it as the binding control. Then replicate the panel within the FlowLayoutPanel. And as you duplicate the panels ensure you change the label text.
Step five: Write the following code in the form load event. Here we'll loop through the controls in the FlowLayoutPanel , get the checkboxes and assign a CheckStateChanged event to each of them through code:
C#
VB.NET
1
private void Form1_Load(object sender, EventArgs e)
2
{
3
//Loop the panels in the FlowLayoutPanel
4
foreach (Panel panel in flowLayoutPanel1.Controls)
5
{
6
//Loop each control in the panel
7
foreach (var ctrl in panel.Controls)
8
{
9
/*check whether a control is a Bunifu Checkbox and assign
10
* each with a CheckStateChanged event
11
*/
12
if (ctrl is BunifuCheckBox)
13
{
14
/*get the control and explicity convert it to a BunifuCheckbox type
15
* by casting it
16
*/
17
BunifuCheckBox bunifuCheckbox = (BunifuCheckBox)ctrl;
18
//assign Bunifu checkbox a `CheckStateChanged` event
19
bunifuCheckbox.CheckStateChanged += BunifuCheckbox_CheckStateChanged;
20
}
21
22
}
23
24
}
25
}
26
private void BunifuCheckbox_CheckStateChanged(object sender, BunifuCheckBox.CheckedChangedEventArgs e)
27
{
28
throw new NotImplementedException();
29
}
30
Copied!
1
Option Infer On
2
3
Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
4
'Loop the panels in the FlowLayoutPanel
5
For Each panel As Panel In flowLayoutPanel1.Controls
6
'Loop each control in the panel
7
For Each ctrl In panel.Controls
8
' check whether a control is a Bunifu Checkbox and assign
9
' * each with a CheckStateChanged event
10
'
11
If TypeOf ctrl Is BunifuCheckBox Then
12
' get the control and explicity convert it to a BunifuCheckbox type
13
' * by casting it
14
'
15
Dim bunifuCheckbox As BunifuCheckBox = CType(ctrl, BunifuCheckBox)
16
'assign Bunifu checkbox a `CheckStateChanged` event
17
18
bunifuCheckbox.CheckStateChanged += BunifuCheckbox_CheckStateChanged
19
End If
20
21
Next ctrl
22
23
Next panel
24
End Sub
25
26
Private Sub BunifuCheckbox_CheckStateChanged(ByVal sender As Object, ByVal e As BunifuCheckBox.CheckedChangedEventArgs)
27
Throw New NotImplementedException()
28
End Sub
29
30
Copied!
Step 6: In the CheckStateChanged event handler method write the following code. We'll retrieve the selected Bunifu Checkbox and add a condition to determine if it is checked or unchecked.
C#
VB.NET
1
private void BunifuCheckbox_CheckStateChanged(object sender, BunifuCheckBox.CheckedChangedEventArgs e)
2
{
3
try
4
{
5
//reference the Bunifu Checkbox object that has raised this event
6
BunifuCheckBox c = (BunifuCheckBox)sender;
7
//check the status of the checkbox
8
if (e.CheckState == BunifuCheckBox.CheckStates.Checked)
9
{
10
/*add one value to Bunifu ProgressBar and display the checked task
11
* in a Bunifu Snackbar
12
*/
13
bunifuProgressBar1.Value+=1;
14
//the second parameter in the Show method gets the text associated with the selected checkbox
15
bunifuSnackbar1.Show(this, String.Format("Task '{0}' is now checked",c.BindingControl.Text), BunifuSnackbar.MessageTypes.Success, 2100,null,BunifuSnackbar.Positions.BottomCenter);
16
tasksBunifuLabel.Text = String.Format("{0} out of 7 tasks are complete...", bunifuProgressBar1.Value);
17
}
18
else
19
{
20
/*subtract one value to Bunifu ProgressBar and display the unchecked task
21
* in a Bunifu Snackbar
22
*/
23
bunifuProgressBar1.Value-=1;
24
tasksBunifuLabel.Text = String.Format("{0} out of 7 tasks are complete...", bunifuProgressBar1.Value);
25
//the second parameter in the Show method gets the text associated with the selected checkbox
26
bunifuSnackbar1.Show(this, String.Format("Task '{0}' is now unchecked", c.BindingControl.Text), BunifuSnackbar.MessageTypes.Success, 2100, null, BunifuSnackbar.Positions.BottomCenter);
27
}
28
29
}
30
catch (Exception exception)
31
{
32
Console.WriteLine(exception.Message);
33
}
34
35
}
36
Copied!
1
Private Sub BunifuCheckbox_CheckStateChanged(ByVal sender As Object, ByVal e As BunifuCheckBox.CheckedChangedEventArgs)
2
Try
3
'reference the Bunifu Checkbox object that has raised this event
4
Dim c As BunifuCheckBox = DirectCast(sender, BunifuCheckBox)
5
'check the status of the checkbox
6
If e.CheckState = BunifuCheckBox.CheckStates.Checked Then
7
' add one value to Bunifu ProgressBar and display the checked task
8
' * in a Bunifu Snackbar
9
'
10
bunifuProgressBar1.Value+=1
11
'the second parameter in the Show method gets the text associated with the selected checkbox
12
bunifuSnackbar1.Show(Me, String.Format("Task '{0}' is now checked",c.BindingControl.Text), BunifuSnackbar.MessageTypes.Success, 2100,Nothing,BunifuSnackbar.Positions.BottomCenter)
13
tasksBunifuLabel.Text = String.Format("{0} out of 7 tasks are complete...", bunifuProgressBar1.Value)
14
Else
15
' subtract one value to Bunifu ProgressBar and display the unchecked task
16
' * in a Bunifu Snackbar
17
'
18
bunifuProgressBar1.Value-=1
19
tasksBunifuLabel.Text = String.Format("{0} out of 7 tasks are complete...", bunifuProgressBar1.Value)
20
'the second parameter in the Show method gets the text associated with the selected checkbox
21
bunifuSnackbar1.Show(Me, String.Format("Task '{0}' is now unchecked", c.BindingControl.Text), BunifuSnackbar.MessageTypes.Success, 2100, Nothing, BunifuSnackbar.Positions.BottomCenter)
22
End If
23
24
Catch exception As Exception
25
Console.WriteLine(exception.Message)
26
End Try
27
28
End Sub
29
Copied!
The following output will be displayed as a result of the preceding code:

Adding Bunifu Checkbox at run time

You can add a Bunifu Checkbox control during runtime. Simply navigate to your Form's Load event and add the following code snippet:
C#
VB.NET
1
using Bunifu.UI.WinForms;
2
private void Form4_Load(object sender, EventArgs e)
3
{
4
//Create Bunifu Checkboxes
5
BunifuCheckBox bunifuCheckbox1 = new BunifuCheckBox();
6
BunifuCheckBox bunifuCheckbox2 = new BunifuCheckBox();
7
BunifuCheckBox bunifuCheckbox3 = new BunifuCheckBox();
8
//Create the labels
9
BunifuLabel bunifuLabels1 = new BunifuLabel();
10
BunifuLabel bunifuLabels2 = new BunifuLabel();
11
BunifuLabel bunifuLabels3 = new BunifuLabel();
12
//Bind the labels with the checkboxes
13
bunifuCheckbox1.BindingControl = bunifuLabels1;
14
bunifuCheckbox2.BindingControl = bunifuLabels2;
15
bunifuCheckbox3.BindingControl = bunifuLabels3;
16
//label the checkboxes
17
bunifuCheckbox1.BindingControl.Text = "one";
18
bunifuCheckbox2.BindingControl.Text = "two";
19
bunifuCheckbox3.BindingControl.Text = "three";
20
21
//Add Bunifu Checkboxes and Bunifu Labels to the layout panel
22
FlowLayoutPanel flowLayoutPanel = new FlowLayoutPanel();
23
flowLayoutPanel.Controls.AddRange(new Control[]
24
{
25
bunifuCheckbox1,
26
bunifuLabels1,
27
bunifuCheckbox2,
28
bunifuLabels2,
29
bunifuCheckbox3,
30
bunifuLabels3
31
});
32
flowLayoutPanel.FlowDirection = FlowDirection.LeftToRight;
33
flowLayoutPanel.Location = new Point(250, 100);
34
35
this.Controls.Add(flowLayoutPanel);
36
37
38
}
Copied!
1
Imports Bunifu.UI.WinForms
2
Private Sub Form4_Load(ByVal sender As Object, ByVal e As EventArgs)
3
'Create Bunifu Checkboxes
4
Dim bunifuCheckbox1 As New BunifuCheckBox()
5
Dim bunifuCheckbox2 As New BunifuCheckBox()
6
Dim bunifuCheckbox3 As New BunifuCheckBox()
7
'Create the labels
8
Dim bunifuLabels1 As New BunifuLabel()
9
Dim bunifuLabels2 As New BunifuLabel()
10
Dim bunifuLabels3 As New BunifuLabel()
11
'Bind the labels with the checkboxes
12
bunifuCheckbox1.BindingControl = bunifuLabels1
13
bunifuCheckbox2.BindingControl = bunifuLabels2
14
bunifuCheckbox3.BindingControl = bunifuLabels3
15
'label the checkboxes
16
bunifuCheckbox1.BindingControl.Text = "one"
17
bunifuCheckbox2.BindingControl.Text = "two"
18
bunifuCheckbox3.BindingControl.Text = "three"
19
20
'Add Bunifu Checkboxes and Bunifu Labels to the layout panel
21
Dim flowLayoutPanel As New FlowLayoutPanel()
22
flowLayoutPanel.Controls.AddRange(New Control() { bunifuCheckbox1, bunifuLabels1, bunifuCheckbox2, bunifuLabels2, bunifuCheckbox3, bunifuLabels3 })
23
flowLayoutPanel.FlowDirection = FlowDirection.LeftToRight
24
flowLayoutPanel.Location = New Point(250, 100)
25
26
Me.Controls.Add(flowLayoutPanel)
27
28
29
End Sub
30
Copied!
Let's take a deep dive and get insights into the properties that are available on Bunifu Checkbox.

The OnCheck state properties

With Bunifu CheckBox you can apply a number of properties to your checkbox when the checkbox state is checked.

1. BorderColor

This property allows you to get or set the checkbox border color. It supports the use of HEX, RGB, and ARGB color formats.

2. BorderRadius

This property allows you to get the radius's integer value or set an integer value that makes a curve on the checkbox edges. By increasing the integer value, the checkbox edges become more curved.

3. BorderThickness

This property allows you to get the thickness's integer value or set an integer value that sets width to the checkbox borders. The checkbox borders get increasingly thicker as you set a larger integer value.

4. CheckBoxColor

This property allows you to get the inner color value or set the checkbox's inner fill color. It supports the use of HEX, RGB, and ARGB color formats.

5. CheckmarkColor

This property allows you to get the color value of the tick or define the checkbox's tick icon. It supports the use of HEX, RGB, and ARGB color formats.

6. CheckmarkThickness

This property allows you to get the thickness integer value of the checkbox tick set an integer value that determines the thickness of the tick icon in the checkbox control.

7. UseBorderThicknessForCheckmark

This property allows you to get the property's boolean value or set a bool value(i.e. true or false), which when set to true, will apply the value specified in the BorderThickness property to be applied to both the checkbox border its tick icon concurrently.

OnUncheck state property

You can customize Bunifu CheckBox when its state is unchecked:
Here is a discussion of the applicable properties:

1. BorderColor

This property allows you to get or set the checkbox border color. It supports the use of HEX, RGB, and ARGB color formats.

2. BorderRadius

This property allows you to get the radius's integer value or set an integer value that makes a curve on the checkbox edges. By increasing the integer value, the checkbox edges become more curved.

3. BorderThickness

This property allows you to get the thickness's integer value or set an integer value that sets width to the checkbox borders. The checkbox borders get increasingly thicker as you set a larger integer value.

4. CheckBoxColor

This property allows you to get the inner color value or set the checkbox's inner fill color. It supports the use of HEX, RGB, and ARGB color formats.

OnDisable state property

The disabled state properties of Bunifu Checkbox can be easily accessed on the OnDisable category in the properties pane.
Below is a description of the properties in an OnDisable state:

1. BorderColor

This property allows you to get or set the checkbox border color. It supports the use of HEX, RGB, and ARGB color formats.

2. BorderRadius

This property allows you to get the radius's integer value or set an integer value that makes a curve on the checkbox edges. By increasing the integer value, the checkbox edges become more curved.

3. BorderThickness

This property allows you to get the thickness's integer value or set an integer value that sets width to the checkbox borders. The checkbox borders get increasingly thicker as you set a larger integer value.

4. CheckBoxColor

This property allows you to get the inner color value or set the checkbox's inner fill color. It supports the use of HEX, RGB, and ARGB color formats.

5. CheckmarkColor

This property allows you to get the color value of the tick or define the checkbox's tick icon. It supports the use of HEX, RGB, and ARGB color formats.

6. CheckmarkThickness

This property allows you to get the thickness integer value of the checkbox tick set an integer value that determines the thickness of the tick icon in the checkbox control.

7. UseBorderThicknessForCheckmark

This property allows you to get the property's boolean value or set a bool value(i.e. true or false), which when set to true, will apply the value specified in the BorderThickness property to be applied to both the checkbox border its tick icon concurrently.

OnHoverUncheckedstate property

Similarly, you can customize further the appearance of Bunifu CheckBox when it is hovered and the checkbox state is unchecked. Below are available properties:

1. BorderColor

This property allows you to get or set the checkbox border color. It supports the use of HEX, RGB, and ARGB color formats.

2. BorderRadius

This property allows you to get the radius's integer value or set an integer value that makes a curve on the checkbox edges. By increasing the integer value, the checkbox edges become more curved.

3. BorderThickness

This property allows you to get the thickness's integer value or set an integer value that sets width to the checkbox borders. The checkbox borders get increasingly thicker as you set a larger integer value.

4. CheckBoxColor

This property allows you to get the inner color value or set the checkbox's inner fill color. It supports the use of HEX, RGB, and ARGB color formats.

5. CheckmarkColor

This property allows you to get the color value of the tick or define the checkbox's tick icon. It supports the use of HEX, RGB, and ARGB color formats.

6. CheckmarkThickness

This property allows you to get the thickness integer value of the checkbox tick set an integer value that determines the thickness of the tick icon in the checkbox control.

7. UseBorderThicknessForCheckmark

This property allows you to get the property's boolean value or set a bool value(i.e. true or false), which when set to true, will apply the value specified in the BorderThickness property to be applied to both the checkbox border its tick icon concurrently.

Additional properties

ToolTip

This property allows you to get or set tooltip text that will be displayed when the checkbox is hovered.

AllowOnHoverStates

This property allows you to get the property's boolean value or set a bool value (i.e. true or false), which when checked to true, allows the OnHoverChecked and OnHoverUnchecked states to be active at runtime. The default value is true.

Animation property

1. AllowCheckBoxAnimation

This property allows you to get the property's boolean value or set a boolean value that, when set to true, causes a bouncy animation to occur during runtime check-state changes.

2. AllowCheckmarkAnimation

This property enables you to get the property's boolean value or set a boolean value that, when set to true, triggers a tick animation during theOnCheck state event.

3. AllowBindingControlAnimation

This property allows you to get the property's boolean value or set a boolean value (i.e either true or false) which when set to true, causes the bound control to bouncy effect during runtime check-state changes.
AllowCheckBoxAnimation must be set to true for this property to work.

Binding properties

1. BindingControl

This property allows you to get the bound control or set the control to bind specifically with the CheckBox. Generally, it is advised that we bind a label with the checkbox.
You may bind any other acceptable control (e.g. panels, labels, picture boxes, or user controls) as long as they are not the checkbox's parent.

2. BindingControlPosition

This property allows you to get the property's value or set the bound control position (i.e left or right).
If we want to adjust the spacing between the checkbox and its bound control, we can do so by using the Margin property. If the control is bound to the left, use the left property; if it is bound to the right, use the right property.

3. AllowBindingControlLocation

This property allows you to get the property's boolean value or set a bool value that when set to true, causes the control bound to the checkbox will adjust its position automatically whenever the checkbox’s location changes

4. AllowBindingControlColorChanges

This property allows you to get the property's bool value or set a boolean value that when set to true, causes the control bound to the checkbox to be colored during the checkbox's state changes (i.e. the bound control will be colored with colors set on OnCheck, OnUncheck, OnHoverChecked, OnHoverUnchecked and onDisabled states).

Bunifu Checkbox Events

1. CheckedChanged

This event occurs whenever the Checked property is changed. The sample code below listens to the check-state changes in the CheckBox.
C#
VB.NET
1
private void bunifuCheckBox1_CheckedChanged(object sender, BunifuCheckBox.CheckedChangedEventArgs e)
2
{
3
if (e.Checked)
4
{
5
MessageBox.Show("Changed to a Checked state");
6
}
7
else
8
{
9
MessageBox.Show("Changed to an UnChecked state");
10
}
11
}
Copied!
1
Private Sub bunifuCheckBox1_CheckedChanged(ByVal sender As Object, ByVal e As BunifuCheckBox.CheckedChangedEventArgs)
2
If e.Checked Then
3
MessageBox.Show("Changed to a Checked state")
4
Else
5
MessageBox.Show("Changed to an UnChecked state")
6
End If
7
End Sub
8
Copied!

2. CheckStateChanged

This event is triggered whenever the check state of a Bunifu checkbox changes. The following code monitors changes in the CheckBox's check-state:
C#
VB.NET
1
private void bunifuCheckBox1_CheckStateChanged(object sender, BunifuCheckBox.CheckedChangedEventArgs e)
2
{
3
if (e.CheckState == BunifuCheckBox.CheckStates.Checked)
4
{
5
MessageBox.Show("Check state changed to Checked");
6
}
7
else if (e.CheckState == BunifuCheckBox.CheckStates.Unchecked)
8
{
9
MessageBox.Show("Check state changed to Unchecked");
10
}
11
else
12
{
13
MessageBox.Show(" Check state is indeterminate");
14
}
15
}
Copied!
1
Private Sub bunifuCheckBox1_CheckStateChanged(ByVal sender As Object, ByVal e As BunifuCheckBox.CheckedChangedEventArgs)
2
If e.CheckState = BunifuCheckBox.CheckStates.Checked Then
3
MessageBox.Show("Check state changed to Checked")
4
ElseIf e.CheckState = BunifuCheckBox.CheckStates.Unchecked Then
5
MessageBox.Show("Check state changed to Unchecked")
6
Else
7
MessageBox.Show(" Check state is indeterminate")
8
End If
9
End Sub
10
Copied!

3. BindingControlPositionChanged

This event is triggered anytime the bound control's position changes. The sample code below listens to CheckBox's bound control position changes.
C#
VB.NET
1
private void bunifuCheckBox1_BindingControlPositionChanged(object sender, BunifuCheckBox.PositionChangedEventArgs e)
2
{
3
if (e.BindingControlPosition == BunifuCheckBox.BindingControlPositions.Left)
4
{
5
MessageBox.Show("binding position is set to the left position");
6
}
7
else
8
{
9
MessageBox.Show("binding position is set to the right position");
10
}
11
}
Copied!
1
Private Sub bunifuCheckBox1_BindingControlPositionChanged(ByVal sender As Object, ByVal e As BunifuCheckBox.PositionChangedEventArgs)
2
If e.BindingControlPosition = BunifuCheckBox.BindingControlPositions.Left Then
3
MessageBox.Show("binding position is set to the left position")
4
Else
5
MessageBox.Show("binding position is set to the right position")
6
End If
7
End Sub
8
Copied!

4. BindingControlChanged

This event occurs when the checkbox is bound to a different control during runtime. The sample code below listens to the check-state changes in the CheckBox.
C#
VB.NET
1
private void bunifuCheckBox1_BindingControlChanged(object sender, BunifuCheckBox.BindingControlChangedEventArgs e)
2
{
3
MessageBox.Show("Bound control has changed");
4
}
Copied!
1
Private Sub bunifuCheckBox1_BindingControlChanged(ByVal sender As Object, ByVal e As BunifuCheckBox.BindingControlChangedEventArgs)
2
MessageBox.Show("Bound control has changed")
3
End Sub
4
Copied!

5. StatePropertiesChanged

This event is triggered whenever there is a property change in a current state of a checkbox. The following code below executes to a current state of a checkbox and listens for any property changes within that state
C#
VB.NET
1
private void bunifuCheckBox1_StatePropertiesChanged(object sender, BunifuCheckBox.StatePropertiesChangedEventArgs e)
2
{
3
//get the checkbox color when the checkbox is unchecked
4
if (bunifuCheckBox1.CheckState == BunifuCheckBox.CheckStates.Unchecked)
5
{
6
MessageBox.Show(e.CurrentState.CheckBoxColor.Name);
7
}
8
}
Copied!
1
Private Sub bunifuCheckBox1_StatePropertiesChanged(ByVal sender As Object, ByVal e As BunifuCheckBox.StatePropertiesChangedEventArgs)
2
'get the checkbox color when the checkbox is unchecked
3
If bunifuCheckBox1.CheckState = BunifuCheckBox.CheckStates.Unchecked Then
4
MessageBox.Show(e.CurrentState.CheckBoxColor.Name)
5
End If
6
End Sub
7
Copied!

Take Away

It's our hope you will enjoy Bunifu CheckBox 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.