Introducing the New .NET MAUI ComboBox Control

A ComboBox is a crucial UI element that most mobile app developers use in their projects. We atSyncfusion understand the wide-ranging utility of this control and have now delivered a.NET MAUI ComboBox control in our2022 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 theNuGet Gallery. To add theSfComboBox to your project, open theNuGet package manager in Visual Studio. Search for theSyncfusion.Maui.Inputs NuGet package and then install it.

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

usingSyncfusion.Maui.Core.Hosting;usingSyncfusion.Maui.ListView.Hosting;publicstaticclassMauiProgram{publicstaticMauiAppCreateMauiApp(){varbuilder=MauiApp.CreateBuilder();builder.UseMauiApp<App>().ConfigureSyncfusionCore().ConfigureSyncfusionListView().ConfigureFonts(fonts=>{fonts.AddFont(“OpenSans-Regular.ttf”,“OpenSansRegular”);fonts.AddFont(“OpenSans-Semibold.ttf”,“OpenSansSemibold”);});returnbuilder.Build();}}

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

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

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

<inputs:SfComboBoxx:Name=“combobox”WidthRequest=”200″/>

Step 5 : Let’s create the data required to populate the suggestion list. This includes the creation of the examplePerson class andPersonsViewModel with a list ofPerson objects.

publicclassPerson{publicstringName{get;set;}publicstringSecondName{get;set;}}publicclassPersonsViewModel:INotifyPropertyChanged{readonlyIList<Person>source;PersonselectedPerson;privatestringselectedItem;publicObservableCollection<Person>Persons{get;privateset;}publicList<string>Items{get;privateset;}publicPersonSelectedPerson{get{returnselectedPerson;}set{if(selectedPerson!=value){selectedPerson=value;OnPropertyChanged(“SelectedPerson”);}}}publicstringSelectedItem{get{returnselectedItem;}set{if(selectedItem!=value){selectedItem=value;OnPropertyChanged(“SelectedItem”);}}}publicPersonsViewModel(){source=newList<Person>();CreatePersonCollection();SelectedPerson=Persons.Skip(3).FirstOrDefault();}voidCreatePersonCollection(){for(inti=0;i<1;i++){source.Add(newPerson{Name=“Adam”,SecondName=“A”});source.Add(newPerson{Name=“Bob”,SecondName=“A”});source.Add(newPerson{Name=“John”,SecondName=“D”});source.Add(newPerson{Name=“Alan”,SecondName=“E”});source.Add(newPerson{Name=“Alex”,SecondName=“F”});source.Add(newPerson{Name=“Jacob”,SecondName=“R”});source.Add(newPerson{Name=“Peter”,SecondName=“J”});source.Add(newPerson{Name=“Clark”,SecondName=“L”});source.Add(newPerson{Name=“Ben”,SecondName=“A”});source.Add(newPerson{Name=“Dave”,SecondName=“S”});}Persons=newObservableCollection<Person>(source);}#regionINotifyPropertyChangedpubliceventPropertyChangedEventHandlerPropertyChanged;voidOnPropertyChanged([CallerMemberName]stringpropertyName=null){PropertyChanged?.Invoke(this,newPropertyChangedEventArgs(propertyName));}#endregion}

Step 6 : Set the binding context to thePersonsViewModel , bind theItemsSource with thePersons list, and bind theDisplayMemberPath property with theName property.

<ContentPage.BindingContext><local:PersonsViewModel/></ContentPage.BindingContext><inputs:SfComboBoxWidthRequest=”200″ItemsSource=”{BindingPersons}”DisplayMemberPath=”Name”/>

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

.NET MAUI ComboBox Control

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 thePlaceholderText property. This text will be displayed only if no items are selected or the edit text field is empty. The default value of thePlaceholderText property isstring.Empty (no string will be displayed).

Refer to the following code example.

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

Customizing the Placeholder Text in .NET MAUI ComboBox

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.

<editors:SfComboBoxx:Name="combobox"WidthRequest=”250”ItemsSource="{Binding SocialMedias}"DisplayMemberPath="Name"TextMemberPath="Name"DropDownIconColor="Red"BorderColor="Red"/>

Color Customization in .NET MAUI ComboBox

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 control available in our2022 Volume 3 release. Check out ourRelease Notes andWhat’s New pages to see the other updates in this release.

You can also download ourfree evaluation to see all our .NET MAUI controls in action.

If you have any questions or comments, you can reach us through oursupport forum,support portal, orfeedback portal. We are always happy to assist you!