Comment on page
Bunifu Drop Down
Rich modern-looking selection dropdown boxes; with data binding, placeholder text, and appearance customization
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.
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.
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.
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.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.
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.
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.
This property gets or sets the background color to a
BunifuDropDown.It accepts the use of both the HEX and RGB color formats.This property allows you to get or set a background color when the control is disabled.
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.
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.
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.
This property gets or sets a text color in the editor portion of
BunifuDropdown when the control has been disabled.This property gets or sets a color value for the dropdown button. It accepts the use of RGB and HEX color values.
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.
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.
This property gets or sets a color value for the dropdown button when the control is disabled.
This property gets or sets the list item's background color in the dropdown portion of
BunifuDropDownThis property gets or sets the border color to each item in the dropdown portion of
BunifuDropDownThis property gets or sets the text color to the item list in the dropdown portion of
BunifuDropDownThis property gets or sets the background color of an item in a list whenever the mouse hovers over an item.
This property gets or sets the list item's text color whenever the mouse hovers over an item in the dropdown portion.
This property gets or sets an integer value that determines the height of both the list item and the dropdown box.
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.
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
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 ofBunifuDropDownValueMember: 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
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.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
There are three ways in which one can get or set a selected item in
BunifuDropdown. 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.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.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.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.
Last modified 2yr ago