User Interface / Widgets / Drop Down Edits / Combo Box
In This Topic
    Combo Box
    In This Topic

    The combo box is a drop down edit, which displays a drop down list of items to choose from.

     Properties

    The most commonly used properties of a combo box are:

    • DropDownStyle - determines the drop down style of the combo box. Can be one of the following:
      Drop Down Style Description
      DropDown The list of items is displayed by clicking the down arrow and the text portion is editable. This means that the user can enter a new value and is not limited to selecting an existing value from the list.
      DropDownList The list is displayed by clicking the down arrow and the text portion is not editable. This means that the user cannot enter a new value. Only values already in the list can be selected. This is the default combo box style.
    • MaxDropDownHeight - determines the height of the combo box’s popup window. By default set to 300 DIPs.\
    • Items - the items collection of the combo box. Use its methods to add and remove combo box items.
    • SelectedIndex - the index of the currently selected combo box item. Set it to -1 to deselect the currently selected item. When this property changes the SelectedIndexChanged event is fired.
    • SelectedItem - points to the currently selected combo box item. When this property changes, the SelectedIndex property is automatically updated and the SelectedIndexChanged event is fired.
     Events

    The most commonly used events of a combo box are:

    • SelectedIndexChanged - occurs when the value of the SelectedIndex property of a combo box has changed.
    • Popup.Closed - occurs when the popup drop down window of the combo box has closed no matter whether the SelectedIndex has changed or not.
     Methods

    The NComboBox class provides the following useful public methods:

    • Methods for quickly filling a combo box with values - the FillFromEnum and FillFromArray methods let you quickly fill a combo box from an enum or from an array. These methods automatically create a combo box item for each enum/array value and assign the value to the Tag property of the created combo box item, so that you can easily identify the value the currently selected combo box item corresponds to.
    • Methods for combo box item navigation - the set of methods whose names start with NavigateTo lets you navigate through the items of the combo box. These methods are automatically used for keyboard navigation, but you can also take advantage of them when needed.
    • Methods for searching the items collection - the methods IndexOfItemWithText and IndexOfItemWithTag return the index of the item in the Items collection of the combo box whose Text or Tag, respectively, is equal to the given parameter. The example in the next section demonstrates how to create a combo box with 3 items and set the SelectedIndex of the combo box to the item with a specific text.
     Code Example

    The following example demonstrates how to create a simple combo box with 3 items and how to handle its SelectedIndexChanged event:

    Combo Box Example
    Copy Code
    NComboBox comboBox = new NComboBox();
    comboBox.Items.Add(new NComboBoxItem("Item 1"));
    comboBox.Items.Add(new NComboBoxItem("Item 2"));
    comboBox.Items.Add(new NComboBoxItem("Item 3"));
    comboBox.SelectedIndex = comboBox.IndexOfItemWithText("Item 2", StringComparison.Ordinal);
    comboBox.SelectedIndexChanged += new Function<NValueChangeEventArgs>(OnComboBoxSelectedIndexChanged);
    
    private void OnComboBoxSelectedIndexChanged(NValueChangeEventArgs arg1)
    {
        // Get the new selected index
        int selectedIndex = (int)arg1.NewValue;
    
        // Get the combo box, whose index has changed
        NComboBox comboBox = (NComboBox)arg1.CurrentTargetNode;
    }
    

    The combo box item’s content can be any widget, so it’s easy to create whatever combo box item you wish. For example, to create a combo box item that has image and text just put the image and the text in a pair box and assign it as content of the combo box item:

    Combo Box Item with Image and Text
    Copy Code
    NImage image = new NImage(new NUri(@"C:\MyImage.png"));
    NPairBox pairBox = new NPairBox(image, "Item 1");
    NComboBoxItem item = new NComboBoxItem(pairBox));
    
    // When using custom widgets for combo box item content, don't forget to set item's text
    // if you want to take advantage of the IndexOfItemWithText method of the combo box
    item.Text = "Item 1";