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:

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.

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:

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:

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.

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`

`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`

`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`

`OnHoverUnchecked`state 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`

`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`

Additional properties

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.

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

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:

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

`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.

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

`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.

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

`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

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

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.

PreviousBunifu Cards NextBunifu Circle Progress

Last updated 3 years ago

Was this helpful?

Overview

Getting started

Adding Bunifu CheckBox in design time

Adding Bunifu Checkbox at run time

The OnCheck state properties

1. BorderColor

2. BorderRadius

3. BorderThickness

4. CheckBoxColor

5. CheckmarkColor

6. CheckmarkThickness

7. UseBorderThicknessForCheckmark

OnUncheck state property

1. BorderColor

2. BorderRadius

3. BorderThickness

4. CheckBoxColor

OnDisable state property

1. BorderColor

2. BorderRadius

3. BorderThickness

4. CheckBoxColor

5. CheckmarkColor

6. CheckmarkThickness

7. UseBorderThicknessForCheckmark

OnHoverUncheckedstate property

1. BorderColor

2. BorderRadius

3. BorderThickness

4. CheckBoxColor

5. CheckmarkColor

6. CheckmarkThickness

7. UseBorderThicknessForCheckmark

Additional properties

ToolTip

AllowOnHoverStates

Animation property

1. AllowCheckBoxAnimation

2. AllowCheckmarkAnimation

3. AllowBindingControlAnimation

Binding properties

1. BindingControl

2. BindingControlPosition

3. AllowBindingControlLocation

4. AllowBindingControlColorChanges

Bunifu Checkbox Events

1. CheckedChanged

2. CheckStateChanged

3. BindingControlPositionChanged

4. BindingControlChanged

5. StatePropertiesChanged

Take Away

The `OnCheck` state properties

`1. BorderColor`

`2. BorderRadius`

`3. BorderThickness`

`4. CheckBoxColor`

`5. CheckmarkColor`

`6. CheckmarkThickness`

`7. UseBorderThicknessForCheckmark`

`OnUncheck` state property

`1. BorderColor`

`2. BorderRadius`

`3. BorderThickness`

`4. CheckBoxColor`

`OnDisable` state property

`1. BorderColor`

`2. BorderRadius`

`3. BorderThickness`

`4. CheckBoxColor`

`5. CheckmarkColor`

`6. CheckmarkThickness`

`7. UseBorderThicknessForCheckmark`

`OnHoverUnchecked`state property

`1. BorderColor`

`2. BorderRadius`

`3. BorderThickness`

`4. CheckBoxColor`

`5. CheckmarkColor`

`6. CheckmarkThickness`

`7. UseBorderThicknessForCheckmark`

`ToolTip`

`AllowOnHoverStates`

`1. AllowCheckBoxAnimation`

`2. AllowCheckmarkAnimation`

`3. AllowBindingControlAnimation`

`1. BindingControl`

`2. BindingControlPosition`

`3. AllowBindingControlLocation`

`4. AllowBindingControlColorChanges`

`1. CheckedChanged`

2. `CheckStateChanged`

`3. BindingControlPositionChanged`

`4. BindingControlChanged`

`5. StatePropertiesChanged`