# Bunifu Drop Down ## 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. ![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-MgXt8Pz0dTryskgHH2Z%2F-MgXvyFPV9hyraK1z6LC%2Fdrd05.gif?alt=media\&token=dd6e4fd6-3b3c-4dcd-bc85-67fb2cfadc55) ## 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. ![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-MgXwQdJvXes8qLun4e0%2F-MgYfSssT_bkcmlequrJ%2Fdrd07.gif?alt=media\&token=09ef411f-e58c-45f3-9a7a-a55156bab713) 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: {% tabs %} {% tab title="C#" %} ```csharp 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); } ``` {% endtab %} {% tab title="VB.NET" %} ```erlang 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 ``` {% endtab %} {% endtabs %} {% hint style="success" %} Let's take a deep dive and get insights into the properties that are available on Bunifu Drop Down. {% endhint %} ## 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. ![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-MgXwQdJvXes8qLun4e0%2F-MgZ2cPVEfN_SBh-jaAS%2Fdrd08.gif?alt=media\&token=8b90a83c-8b2e-44a1-a3ef-9c5513ea3cbc) ### `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. ![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-Mg_nTeIU8_hBfr06e8u%2F-MgbwqaVlE1wT-akIzxj%2Fdrd10.gif?alt=media\&token=f081f039-e338-419d-ae90-5f92c872c421) ## 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: ![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-Mgbx7LvZav1wxP_NDQb%2F-Mgc6J94z6TuTakVOOtg%2Fimage.png?alt=media\&token=fe529893-5323-48de-a6a0-c1e5649d132b) 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. {% tabs %} {% tab title="C#" %} ```csharp 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" }); } ``` {% endtab %} {% tab title="VB.NET" %} ```erlang 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 ``` {% endtab %} {% endtabs %} ### 2. Populating data using Data Binding properties **`BunifuDropDown`**has 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 of`BunifuDropDown` * **`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: {% tabs %} {% tab title="C#" %} ```csharp private void Form1_Load(object sender, EventArgs e) { List productList = new List() { 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; } } } ``` {% endtab %} {% tab title="VB.NET" %} ```erlang 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 ``` {% endtab %} {% endtabs %} ### 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. ![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-Mgc6Pp15wPG7OoTeawV%2F-MgcCuS0MvmOb3tAnSn7%2Fimage.png?alt=media\&token=0c935def-5755-4028-9e43-6d2b69e379f6) **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. ![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-Mgc6Pp15wPG7OoTeawV%2F-MgcDzeQ3ALfSRudxSaa%2Fimage.png?alt=media\&token=e6727099-bb5a-48d1-bef0-f6e43c0182e7) **Step three:** In the **Data Sources** window, click the **Database** option as the DataSource for the application and click next. ![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-Mgc6Pp15wPG7OoTeawV%2F-MgcELaabltnZVFx3vK5%2Fimage.png?alt=media\&token=b753458c-0257-4dd0-a910-b77126b6c185) **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.](https://docs.microsoft.com/en-us/previous-versions/visualstudio/visual-studio-2008/s4yys16a\(v=vs.90\)) Once done, click the OK button in the window. ![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-Mgc6Pp15wPG7OoTeawV%2F-MgcEtMqmYd45X3yKXAv%2Fimage.png?alt=media\&token=ce7e5e43-f0a4-4670-83f8-5320b5e543fa) **Step six:** Check the option to Show the **connection string to save in the Application Configuration** and click next. ![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-Mgc6Pp15wPG7OoTeawV%2F-MgcFBtyf7Jd0UtfKu7c%2Fimage.png?alt=media\&token=1747c9f0-39d2-4df6-90fe-a2828ae2349f) **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**. ![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-Mgc6Pp15wPG7OoTeawV%2F-MgcGaFq9NJZRMEZoMYH%2Fimage.png?alt=media\&token=b8385be4-3101-4025-98ce-a680559baa06) {% hint style="success" %} 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`. {% endhint %} #### 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. ![](https://1116551356-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M7fmEPVv4n0I819sdaz%2F-Mgc6Pp15wPG7OoTeawV%2F-MgcHCqKngZlIaysCeOG%2Fimage.png?alt=media\&token=8a483c35-b312-4dfb-b62d-bba5ed9d5790) **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. {% hint style="info" %} This property only works when the control is bound to a data source, where the `DisplayName` and `ValueMember` has been provided. {% endhint %} 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. ### --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs2.bunifuframework.com/docs/ui/controls/bunifu-drop-down.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.