A seamless guide on ComboBox in WPF

It is a general control that is used to display multiple items in a drop-down format. It is called ComboBox because it is a combination of Textbox and a drop-down list. In Textbox, we can write the content which we want to find or add items.

In ComboBox, only a single item will be seen instead of the whole collection of items as in the List box. Also, only a single item will be selected at a time in this control. Unlike the List box, in ComboBox initially no items are visible, we have to click the ComboBox and then we can see all the items present in it.

We can create, format, and present our ComboBox in multiple techniques. Some of them are:

Simple ComboBox:

The ComboBox control represents a different number of items in XAML. It has multiple properties available to display the ComboBox more attractively and to make it easily accessible by the user. Some of the properties are Height, Width, Background, Name, SelectedValue, Selected Index, etc.

To create ComboBox use the following code:

SimpleComboBox.xaml:

SimpleComboBox.xaml.cs:

private void btn_Click(object sender, RoutedEventArgs e)
{
      MessageBox.Show(cmb1.Text);
}
				

Here, we can see that we add the ComboBox items using the ComboBoxItem tag at design time and the item is visible in the output as follows.

Add or Delete ComboBox Items:

In the above method, we saw how an item can be added at design time. Now, we will learn how to add and remove items from the ComboBox during the execution.

For this, we have to add one ComboBox, a textbox, and two buttons for the addition and deletion of ComboBox items respectively. And for this, we internally have the Add and Remove/RemoveAt methods present in the control itself.

As we have two different buttons for adding and deleting the items from the ComboBox, we can do code on their Click event handler.

In the Add button click event, we insert the content that the user entered in the textbox to the ComboBox using the Add method of ComboBox, and similarly, on the click event of the Delete button, we remove the selected item from the ComboBox using RemoveAt method of ComboBox.

Below is the design and the back-end code for this functionality.

Add-Dlt_Items.xaml:

Add-Dlt_Items.xaml.cs:

private void btn_add_Click(object sender, RoutedEventArgs e)
{
  cmb.Items.Add(txtbox.Text);
    MessageBox.Show("Item Added");
}
private void btn_dlt_Click(object sender, RoutedEventArgs e)
{
  cmb.Items.RemoveAt(cmb.Items.IndexOf(cmb.SelectedItem));
}
				

 

Formatting ComboBox:

For styling our ComboBox, we have multiple properties available such as foreground, background, fontfamily, fontsize, etc. for specific ComboBoxItems.

Here, to style and format the ComboBox we do not have to do any coding in the back-end of the file.

So, in this example, we added one ComboBox and some ComboboxItems and in all of them, we added the Background property which sets the background color of each individual ComboboxItems.

Also, in one ComboBoxItem, we have added the Image tag to add some pictures to make it good-looking and understandable at the first sight.

FormattedComboBox.xaml:

In this method, we can also add some checkboxes to each ComboBoxItem as we added the image in it. To do so, we can add the Stack Panel inside the Checkbox control, and then the CheckBox will be visible. And similarly, if we add CheckBox to all the ComboBoxItems then each item will be having checkbox before it.

And after this code, the output will be:

Dynamic ComboBox:

In this method, we illustrate that we can create a ComboBox dynamically also. For this, there is no need to do anything in the design part.

So, in the back-end of the file, we create one ComboBox and provides its necessary properties to it like name, width, height, etc., and then we can add items to it.

Here, we can add items in two different ways. One, creating the instance of ComboBoxItem and then adding that instance to the ComboBox, and the second is to directly add the item using Add method of the ComboBox instance itself.

The second method is easy as well as efficient as it takes less coding and the work is done effortlessly.

DynamicComboBox.xaml:

DynamicComboBox.xaml.cs:

public partial class DynamicComboBox : Window
{
  public DynamicComboBox()
  {
    InitializeComponent();
    ComboBox comboBox = new ComboBox();         
    comboBox.Name = "ComboBox1";
    comboBox.Width = 194;
    comboBox.Height = 30;
    comboBox.IsEditable = true;
    ComboBoxItem item = new ComboBoxItem();
    item.Content = "Coffee";
    comboBox.Items.Add(item);
    comboBox.Items.Add("Tea");
    comboBox.Items.Add("Orange");
    comboBox.Items.Add("Milk");
    comboBox.Items.Add("Iced Tea");
    comboBox.Items.Add("Mango Shake");
    window.Content = comboBox;
    window.Background = Brushes.Moccasin;
  }
}