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. This article shows how to create and configure the Syncfusion .NET MAUI ComboBox control. This project also includes a code snippet to populate the control’s data source, set a custom height and width to the control, customize placeholder text, change the filter type, and hide clear button.
Step 1: Add the NuGet to the project and add the namespace as shown in the following code sample:
[XAML]
xmlns:editors="clr-namespace:Syncfusion.Maui.Inputs;assembly=Syncfusion.Maui.Inputs"
[C#]
using Syncfusion.Maui.Inputs;
Step 2: Set the ComboBox control to content in ContentPage.
[XAML]
<ContentPage.Content>
<editors:SfComboBox x:Name="comboBox" />
</ContentPage.Content>
[C#]
SfComboBox comboBox = new SfComboBox();
Content = comboBox;
Step 1: Create a model class named SocialMedia that contains information such as social media's ID and name. And generate the collection of social media data in the ViewModel class.
//Model.cs
public class SocialMedia
{
public string Name { get; set; }
public int ID { get; set; }
}
//ViewModel.cs
public class SocialMediaViewModel
{
public ObservableCollection<SocialMedia> SocialMedias { get; set; }
public SocialMediaViewModel()
{
this.SocialMedias = new ObservableCollection<SocialMedia>();
this.SocialMedias.Add(new SocialMedia() { Name = "Facebook", ID = 0 });
this.SocialMedias.Add(new SocialMedia() { Name = "Google Plus", ID = 1 });
this.SocialMedias.Add(new SocialMedia() { Name = "Instagram", ID = 2 });
this.SocialMedias.Add(new SocialMedia() { Name = "LinkedIn", ID = 3 });
this.SocialMedias.Add(new SocialMedia() { Name = "Skype", ID = 4 });
this.SocialMedias.Add(new SocialMedia() { Name = "Telegram", ID = 5 });
this.SocialMedias.Add(new SocialMedia() { Name = "Televzr", ID = 6 });
this.SocialMedias.Add(new SocialMedia() { Name = "Tik Tok", ID = 7 });
this.SocialMedias.Add(new SocialMedia() { Name = "Tout", ID = 8 });
this.SocialMedias.Add(new SocialMedia() { Name = "Tumblr", ID = 9 });
this.SocialMedias.Add(new SocialMedia() { Name = "Twitter", ID = 10 });
this.SocialMedias.Add(new SocialMedia() { Name = "Vimeo", ID = 11 });
this.SocialMedias.Add(new SocialMedia() { Name = "WhatsApp", ID = 12 });
this.SocialMedias.Add(new SocialMedia() { Name = "YouTube", ID = 13 });
}
}
Step 2: Binding the SocialMedias property to the ItemsSource property of ComboBox.
[XAML]
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:editors="clr-namespace:Syncfusion.Maui.Inputs;assembly=Syncfusion.Maui.Inputs"
xmlns:local="clr-namespace:ComboBoxSample"
x:Class="ComboBoxSample.MainPage">
<ContentPage.BindingContext>
<local:SocialMediaViewModel />
</ContentPage.BindingContext>
<ContentPage.Content>
<!--Setting ItemsSource-->
<editors:SfComboBox x:Name="comboBox"
WidthRequest="250"
ItemsSource="{Binding SocialMedias}" />
</ContentPage.Content>
</ContentPage>
Make sure that you have the compatible versions of Visual Studio with .NET MAUI workloads and .NET SDK version in your machine before starting to work on this project. Refer to System Requirements for .NET MAUI.
To run this application, you need to first clone the getting-started-with-the-dotnet-maui-combobox-controls repository and then open it in Visual Studio 2022. Now, simply build and run your project to view the output.
If you are facing path too long exception when building this example project, close Visual Studio and rename the repository to short and build the project.
Syncfusion has no liability for any damage or consequence that may arise by using or viewing the samples. The samples are for demonstrative purposes, and if you choose to use or access the samples, you agree to not hold Syncfusion liable, in any form, for any damage that is related to use, for accessing, or viewing the samples. By accessing, viewing, or seeing the samples, you acknowledge and agree Syncfusion’s samples will not allow you seek injunctive relief in any form for any claim related to the sample. If you do not agree to this, do not view, access, utilize, or otherwise do anything with Syncfusion’s samples.
Users can select an item, or multiple items, from the list of options by tapping or clicking it.
The first item that fits the user input is highlighted in the dropdown list. Highlighting matching text in the ComboBox dropdown list makes it easy for users to identify and select the items they are looking for at a glance.
Display hints using placeholder text when no item is selected. A well-designed placeholder enhances the user experience by providing context and making the control more intuitive.
The ComboBox filters items based on the entered text and auto-fills with the first suggestion.
Data-binding support works for all popular data sources and displays data based on the display member path. It automatically generates items from a data-bound collection. The application can be designed in the MVVM pattern.
Learn More about .NET MAUI ComboBox
Suggest a feature or report a bug
Syncfusion's .NET MAUI UI Controls library is the only suite that you will ever need to build an application since it contains over 40 high-performance, lightweight, modular, and responsive UI Controls in a single package. In addition to ComboBox, we provide popular .NET MAUI Controls such as DataGridCharts, Scheduler, ListView, and Excel Library.
Founded in 2001 and headquartered in Research Triangle Park, N.C., Syncfusion has more than 29,000 customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies.
Today, we provide 1800+ components and frameworks for web (Blazor, ASP.NET Core, ASP.NET MVC, ASP.NET WebForms, JavaScript, Angular, React, Vue, and Flutter), mobile (Xamarin, Flutter, UWP, JavaScript, and .NET MAUI), and desktop development (WinForms, WPF, WinUI,UWP, Flutter, and .NET MAUI). We provide ready-to-deploy enterprise software for dashboards, reports, data integration, and big data processing. Many customers have saved millions in licensing fees by deploying our software.
sales@syncfusion.com | www.syncfusion.com | Toll Free: 1-888-9 DOTNET