Introducing the New .NET MAUI ComboBox Control
Tags: maui, mobile, csharp, dotnet
Published: 2022-10-31 03:52:22

---
title: Introducing the New .NET MAUI ComboBox Control
published: true
date: 2022-10-27 11:00:11 UTC
tags: maui, mobile, csharp, dotnet
canonical_url: https://www.syncfusion.com/blogs/post/dotnet-maui-combobox-control.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hxxd0b0nw5xsgv7w3nr5.png
---

A ComboBox is a crucial UI element that most mobile app developers use in their projects. We at [Syncfusion](https://www.syncfusion.com/ "Syncfusion UI Components") understand the wide-ranging utility of this control and have now delivered a [.NET MAUI ComboBox](https://www.syncfusion.com/maui-controls/maui-combobox ".NET MAUI ComboBox") control in our [2022 Volume 3](https://www.syncfusion.com/forums/177858/essential-studio-2022-volume-3-main-release-v20-3-0-47-is-available-for-download "Essential Studio 2022 Volume 3") release.

In this article, I will summarize the key features of the .NET MAUI ComboBox control and how to get started with it.

## .NET MAUI ComboBox

The .NET MAUI ComboBox control is a selection component that allows users to type a value or choose an option from a list of predefined options. It has many features, such as data binding, editing, searching, a clear button, and dropdown button customization.

### **Getting started with .NET MAUI ComboBox**

Let’s see how to get started with the .NET MAUI ComboBox control, populate it with data, and load items.

**Step 1** : Syncfusion .NET MAUI components are available on the [NuGet Gallery](https://www.nuget.org/ "NuGet Gallery"). To add the **SfComboBox** to your project, open the  **NuGet package manager** in Visual Studio. Search for the **Syncfusion.Maui.Inputs** NuGet package and then install it.

**Step 2** : Register the handler for the Syncfusion Core package in the **MauiProgram.cs** file.

```csharp
using Syncfusion.Maui.Core.Hosting;
using Syncfusion.Maui.ListView.Hosting;
public static class MauiProgram
{
  public static MauiApp CreateMauiApp()
  {
     var builder = MauiApp.CreateBuilder();
     builder
       .UseMauiApp<App>()
       .ConfigureSyncfusionCore()
       .ConfigureSyncfusionListView()
       .ConfigureFonts(fonts =>
        {
           fonts.AddFont(“OpenSans - Regular.ttf”, “OpenSansRegular”);
           fonts.AddFont(“OpenSans - Semibold.ttf”, “OpenSansSemibold”);
        });
 
     return builder.Build();
  }
}
```

**Step 3** : Import the SfComboBox namespace on the XAML page.

```xml
xmlns:inputs=”clr-namespace:Syncfusion.Maui.Inputs;assembly=Syncfusion.Maui.Inputs”
```

**Step 4** : Initialize an empty ComboBox control as shown in the following code.

```xml
<inputs:SfComboBox x:Name=“combobox” WidthRequest=”200″/>
```

**Step 5** : Let’s create the data required to populate the suggestion list. This includes the creation of the example  **Person**  class and  **PersonsViewModel**  with a list of  **Person**  objects.

```csharp
public class Person
{
  public string Name { get; set; }
  public string SecondName { get; set; }
}
public class PersonsViewModel : INotifyPropertyChanged
{
  readonly IList<Person> source;
  Person selectedPerson;
  private string selectedItem;
  public ObservableCollection<Person> Persons { get; private set; }
  public List<string> Items { get; private set; }
  public Person SelectedPerson
  {
    get
    {
      return selectedPerson;
    }
    set
    {
      if (selectedPerson != value)
      {
        selectedPerson = value;
        OnPropertyChanged(“SelectedPerson”);
      }
    }
  }
 
  public string SelectedItem
  {
    get
    {
      return selectedItem;
    }
    set
    {
      if (selectedItem != value)
      {
        selectedItem = value;
        OnPropertyChanged(“SelectedItem”);
      }
    }
  }
 
  public PersonsViewModel()
  {
    source = new List<Person>();
    CreatePersonCollection();
 
    SelectedPerson = Persons.Skip(3).FirstOrDefault();
  }
 
  void CreatePersonCollection()
  {
    for (int i = 0; i < 1; i++)
    {
 
      source.Add(new Person { Name = “Adam”, SecondName = “A” });
      source.Add(new Person { Name = “Bob”, SecondName = “A” });
      source.Add(new Person { Name = “John”, SecondName = “D” });
      source.Add(new Person { Name = “Alan”, SecondName = “E” });
      source.Add(new Person { Name = “Alex”, SecondName = “F” });
      source.Add(new Person { Name = “Jacob”, SecondName = “R” });
      source.Add(new Person { Name = “Peter”, SecondName = “J” });
      source.Add(new Person { Name = “Clark”, SecondName = “L” });
      source.Add(new Person { Name = “Ben”, SecondName = “A” });
      source.Add(new Person { Name = “Dave”, SecondName = “S” });
    }
 
    Persons = new ObservableCollection<Person>(source);
  }
 
  #region INotifyPropertyChanged
  public event PropertyChangedEventHandler PropertyChanged;
 
  void OnPropertyChanged([CallerMemberName] string propertyName = null)
  {
    PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
  }
  #endregion
}
```

**Step 6** : Set the binding context to the **PersonsViewModel** , bind the **ItemsSource** with the **Persons** list **,** and bind the **DisplayMemberPath** property with the **Name** property.

```xml
<ContentPage.BindingContext>
  <local:PersonsViewModel/>
</ContentPage.BindingContext>
<inputs:SfComboBox WidthRequest=”200″
                   ItemsSource=”{Binding Persons}”
                   DisplayMemberPath=”Name”/>
```

That’s it. Our .NET MAUI ComboBox control is now ready.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/NET-MAUI-ComboBox-Control.png" alt=".NET MAUI ComboBox Control" style="width:100%">

  <figcaption>.NET MAUI ComboBox Control</figcaption>

</figure>

## Customization in .NET MAUI ComboBox

You can perform the following customizations in the .NET MAUI ComboBox control:

### Placeholder text

You can prompt the user with any information using the **PlaceholderText** property. This text will be displayed only if no items are selected or the edit text field is empty. The default value of the **PlaceholderText** property is **string.Empty** (no string will be displayed).

Refer to the following code example.

```xml
<editors:SfComboBox x:Name="comboBox"
                      WidthRequest="250"
                      ItemsSource="{Binding SocialMedias}"
                      DisplayMemberPath="Name"
                      TextMemberPath="Name"
                      Placeholder="Select a social media" />
```

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Customizing-the-Placeholder-Text-in-.NET-MAUI-ComboBox.png" alt="Customizing the Placeholder Text in .NET MAUI ComboBox" style="width:100%">

  <figcaption>Customizing the Placeholder Text in .NET MAUI ComboBox</figcaption>

</figure>

### Color customization

You can also customize the color of the ComboBox border, placeholder text, item text, clear button, dropdown icon, and more.

Refer to the following code example where we have customized the border and dropdown icon color.

```xml
<editors:SfComboBox x:Name="combobox"
                      WidthRequest=”250”                    
                      ItemsSource="{Binding SocialMedias}"
                      DisplayMemberPath="Name"
                      TextMemberPath="Name"
                      DropDownIconColor="Red"
                      BorderColor="Red" />
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Color-Customization-in-.NET-MAUI-ComboBox.png" alt="Color Customization in .NET MAUI ComboBox" style="width:100%">

  <figcaption>Color Customization in .NET MAUI ComboBox</figcaption>

</figure>



## Upcoming features

This is the initial version of our.NET MAUI ComboBox control. You can expect the following features in our upcoming releases:

- Multiselection with chip UI.
- Diacritic sensitivity.
- Item templates.
- Text match highlights.
- Dropdown header and footer.
- Custom filtering.

## Conclusion

Thanks for reading! In this blog, we have seen the vivid features of the new [.NET MAUI ComboBox](https://www.syncfusion.com/maui-controls/maui-combobox "Syncfusion .NET MAUI ComboBox") control available in our [2022 Volume 3](https://www.syncfusion.com/forums/177858/essential-studio-2022-volume-3-main-release-v20-3-0-47-is-available-for-download "Essential Studio 2022 Volume 3") release. Check out our [Release Notes](https://help.syncfusion.com/common/essential-studio/release-notes/v20.3.0.47 "Syncfusion Essential Studio Release Notes") and [What’s New](https://www.syncfusion.com/products/whatsnew "Syncfusion Essential Studio What’s New Page") pages to see the other updates in this release.

You can also download our [free evaluation](https://www.syncfusion.com/downloads/maui "Free evaluation of the Syncfusion Essential Studio for .NET MAUI") to see all our .NET MAUI  controls in action.

If you have any questions or comments, you can reach us through our [support forum](https://www.syncfusion.com/forums "Sycfusion Support Forums"), [support portal](https://support.syncfusion.com/ "Sycfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Sycfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Syncfusion Essential Studio 2022 Volume 3 Is Here!](https://www.syncfusion.com/blogs/post/syncfusion-essential-studio-2022-volume-3-is-here.aspx "Blog: Syncfusion Essential Studio 2022 Volume 3 Is Here!")
- [Easily Track the Progress of Your Work Using the New .NET MAUI Progressbar](https://www.syncfusion.com/blogs/post/easily-track-the-progress-of-your-work-using-dotnet-maui-progressbar.aspx "Blog: Easily Track The Progress Of Your Work Using The New .NET MAUI Progressbar")
- [What’s New in .NET MAUI Charts: 2022 Volume 3](https://www.syncfusion.com/blogs/post/whats-new-in-net-maui-charts-2022-volume-3.aspx "Blog: What’s New In .NET MAUI Charts: 2022 Volume 3")
- [Improve Your Xaml Skill by Replicating a Camping App UI in .NET MAUI](https://www.syncfusion.com/blogs/post/improve-xaml-skill-camping-app-ui-in-dotnet-maui.aspx "Blog: Improve Your Xaml Skill By Replicating A Camping App Ui In .NET MAUI")