Bunifu Framework Docs
HomePricingFAQsMy Account
Search…
Introduction
Getting started
Requirements
Installation
Licensing
BUNIFU UI
Controls
Bunifu Button
Bunifu Button (variant)
Bunifu Cards
Bunifu CheckBox
Bunifu Circle Progress
Bunifu Datagrid View
Bunifu Date Picker
Bunifu Drop Down
Bunifu Flat Button
Bunifu Form Caption Button
Bunifu Form Control Box
Bunifu Form Resize Icon
Bunifu Gradient Panel
Bunifu Icon Button
Bunifu Image Button (New)
Bunifu Image Button (Old)
Bunifu IOS Switch (1.5.3)
Bunifu Label
Bunifu Loader
Bunifu Picture Box
Bunifu Pages
Bunifu Panel
Bunifu Progress Bar
Bunifu Radial Gauge
Bunifu Radio Button
Bunifu Rating
Bunifu Range
Bunifu Separator
Bunifu Sliders
Bunifu Shadow Panel
Bunifu Shapes
Bunifu Switch (1.5.3)
Bunifu ScrollBars
Bunifu Toggle Switch
Bunifu Toggle Switch (variant)
Bunifu Tile Button
Bunifu Thin Button (1.5.3)
Bunifu ToolTip
Bunifu Textbox
Bunifu User Control
Components
BUNIFU CHARTS
Introduction
Chart Components
BUNIFU DATAVIZ [Deprecated]
Basic Charts [Deprecated]
Advanced Charts [Deprecated]
Powered By GitBook
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#
VB.NET
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);
}
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#
VB.NET
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"
});
}
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#
VB.NET
​
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; }
}
}
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.

​

​
​
Previous
Bunifu Date Picker
Next
Bunifu Flat Button
Last modified 1yr ago
Copy link
On this page
Overview
Getting Started
Adding Bunifu Dropdown at Design-time
Adding Bunifu Dropdown at Runtime
Appearance properties
1. Border properties
2. Background properties
3. Textual properties
4. Dropdown Indicator properties
5. Dropdown Item properties
Populating Data in BunifuDropDown
1. Populating data using the Items property
2. Populating data using Data Binding properties
3. How to Bind data to a database at the designer level
Selection
1. Using the SelectedIndex property
2. Using the SelectedItem property
3. Using the SelectedValue property
Take Away