Bunifu Drop Down

Bunifu Framework Docs

Home Pricing FAQs My Account

Search…

Introduction

Getting started

BUNIFU CHARTS

BUNIFU DATAVIZ [Deprecated]

Basic Charts [Deprecated]

Advanced Charts [Deprecated]

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
1
using Bunifu.UI.WinForms;
2
private void Form1_Load(object sender, EventArgs e)
3
{
4
​
5
    /*
6
     *create an instance of the control
7
     *ensure to import the class using Bunifu.UI.WinForms
8
    */
9
    BunifuDropdown dropdown = new BunifuDropdown();
10
    //add a border color to the dropdown
11
    dropdown.BorderColor = Color.DodgerBlue;
12
    //add a color to the dropdown's button
13
    dropdown.IndicatorColor = Color.DodgerBlue;
14
    //set the location of the dropdown in the form
15
    dropdown.Location = new Point(250, 160);
16
    //add items to the dropdown
17
    dropdown.Items.AddRange(
18
        new String[]
19
        {
20
            "Item one",
21
            "Item two",
22
            "Item three"
23
        });
24
    //add the dropdown to the form
25
    this.Controls.Add(dropdown);
26
}
Copied!
1
Imports Bunifu.UI.WinForms
2
Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
3
​
4
'    
5
'     *create an instance of the control
6
'     *ensure to import the class using Bunifu.UI.WinForms
7
'    
8
	Dim dropdown As New BunifuDropdown()
9
	'add a border color to the dropdown
10
	dropdown.BorderColor = Color.DodgerBlue
11
	'add a color to the dropdown's button
12
	dropdown.IndicatorColor = Color.DodgerBlue
13
	'set the location of the dropdown in a form
14
	dropdown.Location = New Point(250, 160)
15
	'add items to the dropdown
16
	dropdown.Items.AddRange(New String() { "Item one", "Item two", "Item three" })
17
	'add the dropdown to the form
18
	Me.Controls.Add(dropdown)
19
End Sub
20
​
Copied!
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
1
private void Form1_Load(object sender, EventArgs e)
2
{
3
    bunifuDropdown1.Items.AddRange(new string[]
4
    {
5
        "Item 01",
6
        "Item 02",
7
        "Item 03",
8
        "Item 04",
9
        "Item 05",
10
        "Item 06",
11
        "Item 07"
12
    });
13
}
Copied!
1
Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
2
	bunifuDropdown1.Items.AddRange(New String() {
3
	"Item 01", 
4
	"Item 02", 
5
	"Item 03", 
6
	"Item 04", 
7
	"Item 05", 
8
	"Item 06", 
9
	"Item 07" })
10
End Sub
11
​
Copied!
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
1
​
2
private void Form1_Load(object sender, EventArgs e)
3
{
4
    List<Product> productList = new List<Product>()
5
    {
6
        new Product("Dell PowerEdge T40 Server","XC34RT"),
7
        new Product("HP Proliant MicroServer", "M36PF3"),
8
        new Product("Dell EMC PowerEdge","LPW12X"),
9
        new Product("HP Proliant 360","HTW321")
10
    };
11
    bunifuDropdown1.DataSource = productList;
12
    bunifuDropdown1.DisplayMember = "ProductName";
13
    bunifuDropdown1.ValueMember = "ProductID";
14
}
15
public class Product
16
{
17
    
18
    private string productName;
19
    private string productID;
20
​
21
    //class constructor
22
    public Product(string productName, string productID)
23
    {
24
        this.productName = productName;
25
        this.productID = productID;
26
    }
27
    public string ProductName
28
    {
29
        get { return productName; }
30
    }
31
    public string ProductID
32
    {
33
        get { return productID; }
34
    }
35
}
Copied!
1
Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
2
	Dim productList As New List(Of Product)() From {
3
		New Product("Dell PowerEdge T40 Server","XC34RT"),
4
		New Product("HP Proliant MicroServer", "M36PF3"),
5
		New Product("Dell EMC PowerEdge","LPW12X"),
6
		New Product("HP Proliant 360","HTW321")
7
	}
8
	bunifuDropdown1.DataSource = productList
9
	bunifuDropdown1.DisplayMember = "ProductName"
10
	bunifuDropdown1.ValueMember = "ProductID"
11
End Sub
12
Public Class Product
13
​
14
	Private productName As String
15
	Private productID As String
16
​
17
	'class constructor
18
	Public Sub New(ByVal prName As String, ByVal prID As String)
19
		Me.productName = productName
20
		Me.productID = productID
21
	End Sub
22
	Public ReadOnly Property PrName() As String
23
		Get
24
			Return productName
25
		End Get
26
	End Property
27
	Public ReadOnly Property PrID() As String
28
		Get
29
			Return productID
30
		End Get
31
	End Property
32
End Class
33
​
Copied!
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.
​
​
​

Bunifu Date Picker

Bunifu Flat Button

Last modified 8mo ago

Overview

Getting Started

Appearance properties

`1. Border properties`

`a. BorderColor`

`b. BorderRadius`

`c. DropDownThickness`

`d. DisabledBorderColor`

`2. Background properties`

`a. BackColor`

`b. DisabledBackColor`

`3. Textual properties`

`a. Text`

`b. TextAlignment`

`c. TextLeftMargin`

`d. DisabledForeColor`

`a. IndicatorColor`

`b. IndicatorAlignment`

`c. FillIndicator`

`d. DisabledIndicatorColor`

`a. ItemBackColor`

`b. ItemBorderColor`

`c. ItemForeColor`

`d. ItemHighlightColor`

`e. ItemHighlightForeColor`

`f. ItemHeight`

`g. ItemTopMargin`

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

How to load the data in BunifuDropdown:

Selection

1. Using the `SelectedIndex` property

2. Using the `SelectedItem` property

3. Using the `SelectedValue` property

Take Away

Overview

Getting Started

Adding Bunifu Dropdown at Design-time

Adding Bunifu Dropdown at Runtime

Appearance properties

1. Border properties

a. BorderColor

b. BorderRadius

c. DropDownThickness

d. DisabledBorderColor

2. Background properties

a. BackColor

b. DisabledBackColor

3. Textual properties

a. Text

b. TextAlignment

c. TextLeftMargin

d. DisabledForeColor

4. Dropdown Indicator properties

a. IndicatorColor

b. IndicatorAlignment

c. FillIndicator

d. DisabledIndicatorColor

5. Dropdown Item properties

a. ItemBackColor

b. ItemBorderColor

c. ItemForeColor

d. ItemHighlightColor

e. ItemHighlightForeColor

f. ItemHeight

g. ItemTopMargin

Populating Data in BunifuDropDown

1. Populating data using the Items property