Home Pricing FAQs My Account

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();
}

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);
    }

  }

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);


}

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.

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");
    }
}

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");
    }
}

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");
    }
}

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");
}

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);
    }
}

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 CardsNextBunifu Circle Progress

Last updated