Comment on page
Bunifu CheckBox
Tristate support: Checked, unchecked, and indeterminate states; Flexible UI customization for checked and unchecked states.
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.
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
private void Form1_Load(object sender, EventArgs e)
{
//Loop the panels in the FlowLayoutPanel
foreach (Panel panel in flowLayoutPanel1.Controls)
{
//Loop each control in the panel
foreach (var ctrl in panel.Controls)
{
/*check whether a control is a Bunifu Checkbox and assign
* each with a CheckStateChanged event
*/
if (ctrl is BunifuCheckBox)
{
/*get the control and explicity convert it to a BunifuCheckbox type
* by casting it
*/
BunifuCheckBox bunifuCheckbox = (BunifuCheckBox)ctrl;
//assign Bunifu checkbox a `CheckStateChanged` event
bunifuCheckbox.CheckStateChanged += BunifuCheckbox_CheckStateChanged;
}
}
}
}
private void BunifuCheckbox_CheckStateChanged(object sender, BunifuCheckBox.CheckedChangedEventArgs e)
{
throw new NotImplementedException();
}
Option Infer On
Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
'Loop the panels in the FlowLayoutPanel
For Each panel As Panel In flowLayoutPanel1.Controls
'Loop each control in the panel
For Each ctrl In panel.Controls
' check whether a control is a Bunifu Checkbox and assign
' * each with a CheckStateChanged event
'
If TypeOf ctrl Is BunifuCheckBox Then
' get the control and explicity convert it to a BunifuCheckbox type
' * by casting it
'
Dim bunifuCheckbox As BunifuCheckBox = CType(ctrl, BunifuCheckBox)
'assign Bunifu checkbox a `CheckStateChanged` event
bunifuCheckbox.CheckStateChanged += BunifuCheckbox_CheckStateChanged
End If
Next ctrl
Next panel
End Sub
Private Sub BunifuCheckbox_CheckStateChanged(ByVal sender As Object, ByVal e As BunifuCheckBox.CheckedChangedEventArgs)
Throw New NotImplementedException()
End Sub
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
private void BunifuCheckbox_CheckStateChanged(object sender, BunifuCheckBox.CheckedChangedEventArgs e)
{
try
{
//reference the Bunifu Checkbox object that has raised this event
BunifuCheckBox c = (BunifuCheckBox)sender;
//check the status of the checkbox
if (e.CheckState == BunifuCheckBox.CheckStates.Checked)
{
/*add one value to Bunifu ProgressBar and display the checked task
* in a Bunifu Snackbar
*/
bunifuProgressBar1.Value+=1;
//the second parameter in the Show method gets the text associated with the selected checkbox
bunifuSnackbar1.Show(this, String.Format("Task '{0}' is now checked",c.BindingControl.Text), BunifuSnackbar.MessageTypes.Success, 2100,null,BunifuSnackbar.Positions.BottomCenter);
tasksBunifuLabel.Text = String.Format("{0} out of 7 tasks are complete...", bunifuProgressBar1.Value);
}
else
{
/*subtract one value to Bunifu ProgressBar and display the unchecked task
* in a Bunifu Snackbar
*/
bunifuProgressBar1.Value-=1;
tasksBunifuLabel.Text = String.Format("{0} out of 7 tasks are complete...", bunifuProgressBar1.Value);
//the second parameter in the Show method gets the text associated with the selected checkbox
bunifuSnackbar1.Show(this, String.Format("Task '{0}' is now unchecked", c.BindingControl.Text), BunifuSnackbar.MessageTypes.Success, 2100, null, BunifuSnackbar.Positions.BottomCenter);
}
}
catch (Exception exception)
{
Console.WriteLine(exception.Message);
}
}
Private Sub BunifuCheckbox_CheckStateChanged(ByVal sender As Object, ByVal e As BunifuCheckBox.CheckedChangedEventArgs)
Try
'reference the Bunifu Checkbox object that has raised this event
Dim c As BunifuCheckBox = DirectCast(sender, BunifuCheckBox)
'check the status of the checkbox
If e.CheckState = BunifuCheckBox.CheckStates.Checked Then
' add one value to Bunifu ProgressBar and display the checked task
' * in a Bunifu Snackbar
'
bunifuProgressBar1.Value+=1
'the second parameter in the Show method gets the text associated with the selected checkbox
bunifuSnackbar1.Show(Me, String.Format("Task '{0}' is now checked",c.BindingControl.Text), BunifuSnackbar.MessageTypes.Success, 2100,Nothing,BunifuSnackbar.Positions.BottomCenter)
tasksBunifuLabel.Text = String.Format("{0} out of 7 tasks are complete...", bunifuProgressBar1.Value)
Else
' subtract one value to Bunifu ProgressBar and display the unchecked task
' * in a Bunifu Snackbar
'
bunifuProgressBar1.Value-=1
tasksBunifuLabel.Text = String.Format("{0} out of 7 tasks are complete...", bunifuProgressBar1.Value)
'the second parameter in the Show method gets the text associated with the selected checkbox
bunifuSnackbar1.Show(Me, String.Format("Task '{0}' is now unchecked", c.BindingControl.Text), BunifuSnackbar.MessageTypes.Success, 2100, Nothing, BunifuSnackbar.Positions.BottomCenter)
End If
Catch exception As Exception
Console.WriteLine(exception.Message)
End Try
End Sub
The following output will be displayed as a result of the preceding code:
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
using Bunifu.UI.WinForms;
private void Form4_Load(object sender, EventArgs e)
{
//Create Bunifu Checkboxes
BunifuCheckBox bunifuCheckbox1 = new BunifuCheckBox();
BunifuCheckBox bunifuCheckbox2 = new BunifuCheckBox();
BunifuCheckBox bunifuCheckbox3 = new BunifuCheckBox();
//Create the labels
BunifuLabel bunifuLabels1 = new BunifuLabel();
BunifuLabel bunifuLabels2 = new BunifuLabel();
BunifuLabel bunifuLabels3 = new BunifuLabel();
//Bind the labels with the checkboxes
bunifuCheckbox1.BindingControl = bunifuLabels1;
bunifuCheckbox2.BindingControl = bunifuLabels2;
bunifuCheckbox3.BindingControl = bunifuLabels3;
//label the checkboxes
bunifuCheckbox1.BindingControl.Text = "one";
bunifuCheckbox2.BindingControl.Text = "two";
bunifuCheckbox3.BindingControl.Text = "three";
//Add Bunifu Checkboxes and Bunifu Labels to the layout panel
FlowLayoutPanel flowLayoutPanel = new FlowLayoutPanel();
flowLayoutPanel.Controls.AddRange(new Control[]
{
bunifuCheckbox1,
bunifuLabels1,
bunifuCheckbox2,
bunifuLabels2,
bunifuCheckbox3,
bunifuLabels3
});
flowLayoutPanel.FlowDirection = FlowDirection.LeftToRight;
flowLayoutPanel.Location = new Point(250, 100);
this.Controls.Add(flowLayoutPanel);
}
Imports Bunifu.UI.WinForms
Private Sub Form4_Load(ByVal sender As Object, ByVal e As EventArgs)
'Create Bunifu Checkboxes
Dim bunifuCheckbox1 As New BunifuCheckBox()
Dim bunifuCheckbox2 As New BunifuCheckBox()
Dim bunifuCheckbox3 As New BunifuCheckBox()
'Create the labels
Dim bunifuLabels1 As New BunifuLabel()
Dim bunifuLabels2 As New BunifuLabel()
Dim bunifuLabels3 As New BunifuLabel()
'Bind the labels with the checkboxes
bunifuCheckbox1.BindingControl = bunifuLabels1
bunifuCheckbox2.BindingControl = bunifuLabels2
bunifuCheckbox3.BindingControl = bunifuLabels3
'label the checkboxes
bunifuCheckbox1.BindingControl.Text = "one"
bunifuCheckbox2.BindingControl.Text = "two"
bunifuCheckbox3.BindingControl.Text = "three"
'Add Bunifu Checkboxes and Bunifu Labels to the layout panel
Dim flowLayoutPanel As New FlowLayoutPanel()
flowLayoutPanel.Controls.AddRange(New Control() { bunifuCheckbox1, bunifuLabels1, bunifuCheckbox2, bunifuLabels2, bunifuCheckbox3, bunifuLabels3 })
flowLayoutPanel.FlowDirection = FlowDirection.LeftToRight
flowLayoutPanel.Location = New Point(250, 100)
Me.Controls.Add(flowLayoutPanel)
End Sub
Let's take a deep dive and get insights into the properties that are available on Bunifu Checkbox.
With Bunifu CheckBox you can apply a number of properties to your checkbox when the checkbox state is checked.
This property allows you to get or set the checkbox border color. It supports the use of HEX, RGB, and ARGB color formats.
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.
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.
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.
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.
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.
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.You can customize Bunifu CheckBox when its state is unchecked:
Here is a discussion of the applicable properties:
This property allows you to get or set the checkbox border color. It supports the use of HEX, RGB, and ARGB color formats.
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.
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.
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.
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:
This property allows you to get or set the checkbox border color. It supports the use of HEX, RGB, and ARGB color formats.
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.
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.
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.
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.
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.
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.Similarly, you can customize further the appearance of Bunifu CheckBox when it is hovered and the checkbox state is unchecked. Below are available properties:
This property allows you to get or set the checkbox border color. It supports the use of HEX, RGB, and ARGB color formats.
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.
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.
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.
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.
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.
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.This property allows you to get or set tooltip text that will be displayed when the checkbox is hovered.
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.
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.
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 the
OnCheck state event.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.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.
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.
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
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).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
private void bunifuCheckBox1_CheckedChanged(object sender, BunifuCheckBox.CheckedChangedEventArgs e)
{
if (e.Checked)
{
MessageBox.Show("Changed to a Checked state");
}
else
{
MessageBox.Show("Changed to an UnChecked state");
}
}
Private Sub bunifuCheckBox1_CheckedChanged(ByVal sender As Object, ByVal e As BunifuCheckBox.CheckedChangedEventArgs)
If e.Checked Then
MessageBox.Show("Changed to a Checked state")
Else
MessageBox.Show("Changed to an UnChecked state")
End If
End Sub
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
private void bunifuCheckBox1_CheckStateChanged(object sender, BunifuCheckBox.CheckedChangedEventArgs e)
{
if (e.CheckState == BunifuCheckBox.CheckStates.Checked)
{
MessageBox.Show("Check state changed to Checked");
}
else if (e.CheckState == BunifuCheckBox.CheckStates.Unchecked)
{
MessageBox.Show("Check state changed to Unchecked");
}
else
{
MessageBox.Show(" Check state is indeterminate");
}
}
Private Sub bunifuCheckBox1_CheckStateChanged(ByVal sender As Object, ByVal e As BunifuCheckBox.CheckedChangedEventArgs)
If e.CheckState = BunifuCheckBox.CheckStates.Checked Then
MessageBox.Show("Check state changed to Checked")
ElseIf e.CheckState = BunifuCheckBox.CheckStates.Unchecked Then
MessageBox.Show("Check state changed to Unchecked")
Else
MessageBox.Show(" Check state is indeterminate")
End If
End Sub
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
private void bunifuCheckBox1_BindingControlPositionChanged(object sender, BunifuCheckBox.PositionChangedEventArgs e)
{
if (e.BindingControlPosition == BunifuCheckBox.BindingControlPositions.Left)
{
MessageBox.Show("binding position is set to the left position");
}
else
{
MessageBox.Show("binding position is set to the right position");
}
}
Private Sub bunifuCheckBox1_BindingControlPositionChanged(ByVal sender As Object, ByVal e As BunifuCheckBox.PositionChangedEventArgs)
If e.BindingControlPosition = BunifuCheckBox.BindingControlPositions.Left Then
MessageBox.Show("binding position is set to the left position")
Else
MessageBox.Show("binding position is set to the right position")
End If
End Sub
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
private void bunifuCheckBox1_BindingControlChanged(object sender, BunifuCheckBox.BindingControlChangedEventArgs e)
{
MessageBox.Show("Bound control has changed");
}
Private Sub bunifuCheckBox1_BindingControlChanged(ByVal sender As Object, ByVal e As BunifuCheckBox.BindingControlChangedEventArgs)
MessageBox.Show("Bound control has changed")
End Sub
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
private void bunifuCheckBox1_StatePropertiesChanged(object sender, BunifuCheckBox.StatePropertiesChangedEventArgs e)
{
//get the checkbox color when the checkbox is unchecked
if (bunifuCheckBox1.CheckState == BunifuCheckBox.CheckStates.Unchecked)
{
MessageBox.Show(e.CurrentState.CheckBoxColor.Name);
}
}
Private Sub bunifuCheckBox1_StatePropertiesChanged(ByVal sender As Object, ByVal e As BunifuCheckBox.StatePropertiesChangedEventArgs)
'get the checkbox color when the checkbox is unchecked
If bunifuCheckBox1.CheckState = BunifuCheckBox.CheckStates.Unchecked Then
MessageBox.Show(e.CurrentState.CheckBoxColor.Name)
End If
End Sub
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.
Last modified 2yr ago