Bunifu Drop Down

Rich modern-looking selection dropdown boxes; with data binding, placeholder text, and appearance customization

Overview

Bunifu Drop Down is a .NET control that allows a user to toggle and select from the pre-defined options. Its rich feature set includes a customizable display list, data binding support, placeholder text support, and more.

Getting Started

Adding Bunifu Dropdown at Design-time

It is easy to add a Bunifu Drop Down at the design level. Locate BunifuDropDown control from your toolbox and drag it to your form, as shown below.

You can add some list option items and customize the dropdown's appearance. We will cover that in greater detail later in the documentation.

Adding Bunifu Dropdown at Runtime

To add Bunifu Drop down at runtime, simply navigate to your Form's Load event and add the following code snippet:

C#

using Bunifu.UI.WinForms;
private void Form1_Load(object sender, EventArgs e)
{

    /*
     *create an instance of the control
     *ensure to import the class using Bunifu.UI.WinForms
    */
    BunifuDropdown dropdown = new BunifuDropdown();
    //add a border color to the dropdown
    dropdown.BorderColor = Color.DodgerBlue;
    //add a color to the dropdown's button
    dropdown.IndicatorColor = Color.DodgerBlue;
    //set the location of the dropdown in the form
    dropdown.Location = new Point(250, 160);
    //add items to the dropdown
    dropdown.Items.AddRange(
        new String[]
        {
            "Item one",
            "Item two",
            "Item three"
        });
    //add the dropdown to the form
    this.Controls.Add(dropdown);
}

VB.NET

Imports Bunifu.UI.WinForms
Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)

'    
'     *create an instance of the control
'     *ensure to import the class using Bunifu.UI.WinForms
'    
	Dim dropdown As New BunifuDropdown()
	'add a border color to the dropdown
	dropdown.BorderColor = Color.DodgerBlue
	'add a color to the dropdown's button
	dropdown.IndicatorColor = Color.DodgerBlue
	'set the location of the dropdown in a form
	dropdown.Location = New Point(250, 160)
	'add items to the dropdown
	dropdown.Items.AddRange(New String() { "Item one", "Item two", "Item three" })
	'add the dropdown to the form
	Me.Controls.Add(dropdown)
End Sub

Let's take a deep dive and get insights into the properties that are available on Bunifu Drop Down.

Appearance properties

1. Border properties

a. BorderColor

This property gets or sets a color value to the border-line of a BunifuDropdown. It accepts both the RGB and the HEX color formats.

b. BorderRadius

This property gets or sets a radius value (integer) that determines the roundness of BunifuDropdown's edges. The greater the value, the more rounded the border corners become.

c. DropDownThickness

This property gets or sets an integer value that specifies the border width of a BunifuDropdown. The greater the value, the thicker the border becomes.

d. DisabledBorderColor

This property gets or sets a border-color value of a BunifuDropdown when the control has been disabled. It supports the use of RGB or HEX color values.

2. Background properties

a. BackColor

This property gets or sets the background color to a BunifuDropDown.It accepts the use of both the HEX and RGB color formats.

b. DisabledBackColor

This property allows you to get or set a background color when the control is disabled.

3. Textual properties

a. Text

This property allows you to get or set a placeholder text in the editor portion of the dropdown, which will direct the user on the selection about to make.

b. TextAlignment

This property allows you to get or set the alignment position of the text rendered in the editor portion of the dropdown. One of the three enumerated position values can be set as an alignment position: left, right, and middle. By default, the property is set to the left value.

c. TextLeftMargin

This property gets or sets an integer value that specifies the left margin area of the text rendered in the editor portion of the dropdown. The greater the value, the longer the left margin will be.

d. DisabledForeColor

This property gets or sets a text color in the editor portion of BunifuDropdown when the control has been disabled.

4. Dropdown Indicator properties

a. IndicatorColor

This property gets or sets a color value for the dropdown button. It accepts the use of RGB and HEX color values.

b. IndicatorAlignment

This property gets or sets the position for the dropdown button. There are two enumerated values that can be set (i.e., left, right, and none). The none value hides the dropdown button.

c. FillIndicator

This property gets a boolean value, which renders the back color value for the dropdown button when set to true. By default, this property is set to false, thus rendering the dropdown button's borders.

d. DisabledIndicatorColor

This property gets or sets a color value for the dropdown button when the control is disabled.

5. Dropdown Item properties

a. ItemBackColor

This property gets or sets the list item's background color in the dropdown portion of BunifuDropDown

b. ItemBorderColor

This property gets or sets the border color to each item in the dropdown portion of BunifuDropDown

c. ItemForeColor

This property gets or sets the text color to the item list in the dropdown portion of BunifuDropDown

d. ItemHighlightColor

This property gets or sets the background color of an item in a list whenever the mouse hovers over an item.

e. ItemHighlightForeColor

This property gets or sets the list item's text color whenever the mouse hovers over an item in the dropdown portion.

f. ItemHeight

This property gets or sets an integer value that determines the height of both the list item and the dropdown box.

g. ItemTopMargin

This property gets or sets an integer value that specifies the top margin space of each item in a list rendered in the dropdown portion. The greater the integer value, the more top space is created.

Populating Data in BunifuDropDown

1. Populating data using the Items property

The items property allows you to get or set a string of items in the collection editor, which will display as a selectable item once the dropdown portion of BunifuDropdown is shown.

You can access it through the Smart Tag >> Edit Items option or via the Items collection in the property pane in your Visual Studio:

You can as well easily add selectable items to BunifuDropdown programmatically, as shown below by accessing the items prop, then using the Add() or the AddRange() method to set the list of items.

C#

private void Form1_Load(object sender, EventArgs e)
{
    bunifuDropdown1.Items.AddRange(new string[]
    {
        "Item 01",
        "Item 02",
        "Item 03",
        "Item 04",
        "Item 05",
        "Item 06",
        "Item 07"
    });
}

VB.NET

Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
	bunifuDropdown1.Items.AddRange(New String() {
	"Item 01", 
	"Item 02", 
	"Item 03", 
	"Item 04", 
	"Item 05", 
	"Item 06", 
	"Item 07" })
End Sub

2. Populating data using Data Binding properties

BunifuDropDownhas data binding support to work out-of-the-box with all the popular data sources like BindingList, ObservableCollection, and DataTable.

The data source can be bound using the DataSource property. Data can be shown based on the display member and value member (i.e., the display member set as a key and the value member set as the value for the key).

• DisplayMember: allows you to set the field/column from the data source where its members will be displayed as selectable items on the dropdown portion ofBunifuDropDown

• ValueMember: sets the field/column from the data source where the members will be the actual value for the items for the displayed members.

Below is a code snippet the shows you how to bind to a list:

C#

private void Form1_Load(object sender, EventArgs e)
{
    List<Product> productList = new List<Product>()
    {
        new Product("Dell PowerEdge T40 Server","XC34RT"),
        new Product("HP Proliant MicroServer", "M36PF3"),
        new Product("Dell EMC PowerEdge","LPW12X"),
        new Product("HP Proliant 360","HTW321")
    };
    bunifuDropdown1.DataSource = productList;
    bunifuDropdown1.DisplayMember = "ProductName";
    bunifuDropdown1.ValueMember = "ProductID";
}
public class Product
{
    
    private string productName;
    private string productID;

    //class constructor
    public Product(string productName, string productID)
    {
        this.productName = productName;
        this.productID = productID;
    }
    public string ProductName
    {
        get { return productName; }
    }
    public string ProductID
    {
        get { return productID; }
    }
}

VB.NET

Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
	Dim productList As New List(Of Product)() From {
		New Product("Dell PowerEdge T40 Server","XC34RT"),
		New Product("HP Proliant MicroServer", "M36PF3"),
		New Product("Dell EMC PowerEdge","LPW12X"),
		New Product("HP Proliant 360","HTW321")
	}
	bunifuDropdown1.DataSource = productList
	bunifuDropdown1.DisplayMember = "ProductName"
	bunifuDropdown1.ValueMember = "ProductID"
End Sub
Public Class Product

	Private productName As String
	Private productID As String

	'class constructor
	Public Sub New(ByVal prName As String, ByVal prID As String)
		Me.productName = productName
		Me.productID = productID
	End Sub
	Public ReadOnly Property PrName() As String
		Get
			Return productName
		End Get
	End Property
	Public ReadOnly Property PrID() As String
		Get
			Return productID
		End Get
	End Property
End Class

3. How to Bind data to a database at the designer level

You can set the DataSource property at design time in the Properties window of Visual Studio. The following are the steps to bind data from a database:

Step one: Access the Smart Tag of control, and check the Use Data Bound Items option.

Step two: Under the Data Binding Mode options from the Smart Tag, click the data source property and click the Add Project Data Source link.

Step three: In the Data Sources window, click the Database option as the DataSource for the application and click next.

Step four: Select the dataset option as database model to use, and click Next.

Step five: In the connection window, click on the New Connection button to configure a new data connection. You can select any data source that has your desired data. To configure/modify connection, refer: How to: Create Connections to Databases. Once done, click the OK button in the window.

Step six: Check the option to Show the connection string to save in the Application Configuration and click next.

Step seven: Expand the Tables node on the Choose Your Database Objects page. Select the desired tables or views in the dataset, and then click Finish.

At this point, your data source is now set to be used in your application. The next few steps show how to load the data in BunifuDropdown.

How to load the data in BunifuDropdown:

In this section, we need to specify the DisplayMember and ValueMember properties.

Step one: Click the DisplayMember property and select a column; for example, the column chosen is the productName. The fields in the column will be displayed on the dropdown portion of BunifuDropdown.

Step two: Access the ValueMember property and select a column; for example, in this case, the chosen column is the OrderID column. This will be the actual value for the selected field in the DisplayName, which can then be used programmatically.

Step three: Run your application

Selection

There are three ways in which one can get or set a selected item in BunifuDropdown.

1. Using the SelectedIndex property

The SelectedIndex property allows you to get the current index position of a selected item or set the index position to pre-select the item.

2. Using the SelectedItem property

The SelectedItem property allows you to get the currently selected object or set the object to pre-select the item. To get the selected item's text, use the ToString() method which returns the text string of the Selected object.

3. Using the SelectedValue property

The SelectedValue property allows you to get the current selected item's value. To get the selected item's value, use the ToString() method which returns the value string of the Selected object.

This property only works when the control is bound to a data source, where the DisplayName and ValueMember has been provided.

The SelectedIndexChanged, SelectedValueChanged, and SelectionChangeCommitted events in BunifuDropdown enable you to observe selection changes in the control at runtime. All three events can be raised once an item is selected.

Take Away

Dropdowns are great if you need to give a user options with very little space. We hope this guide has armed you with sufficient information in implementing Bunifu Drop Down in your Winforms project. So please try it. Feel free to connect with us. Should you have feedback or suggestions please send us via chat on the bottom right corner of the screen.