How to add new items to the ComboBox dynamically in .NET MAUI (SfComboBox)?

This article demonstrates how to add new items dynamically to a .NET MAUI ComboBox (SfComboBox) control. Follow these steps to achieve this functionality.

Step 1: Define the Data Model and ViewModel
Create a model class to enclose vital properties like “Name” and “ID,” which will represent the attributes of the social media options. Next, establish a ViewModel class named “SocialMediaViewModel”. Then, define a property named “SocialMedias” that will store the list of social media details.

public class SocialMedia 
{
    public string Name { get; set; }
    public int ID { get; set; }
}

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 });     
    }    
}

Step 2: Create the XAML Layout
In the XAML layout, integrate the ComboBox control and assign a predefined collection to its ItemsSource property. Then, add a button with its clicked event for adding new items.

XAML:

 <ContentPage.Content>
     <StackLayout>
         <editors:SfComboBox x:Name="comboBox"
                             WidthRequest="250"
                             ItemsSource="{Binding SocialMedias}"
                             Placeholder="Social Media"
                             DisplayMemberPath="Name"/>
                     <Button x:Name="AddItem"
                             WidthRequest="100"
                             HeightRequest="50"
                             Text="Add Item"
                             Clicked="AddItem_Clicked"/>
     </StackLayout>
 </ContentPage.Content>  
                
    

Step 3: Implement the Event Handler
In the event handler method, add items dynamically to the ComboBox.

C#:

public partial class MainPage : ContentPage 
{
   SocialMediaViewModel socialMediaViewModel = new SocialMediaViewModel();
   public MainPage() 
   {
     InitializeComponent();       
     comboBox.BindingContext = socialMediaViewModel;
   }
   private void AddItem_Clicked(object sender, EventArgs e)
   {
     socialMediaViewModel.SocialMedias.Add(new SocialMedia() {Name = "YouTube",ID = 2 });
   }
}

Output

Conclusion
I hope you enjoyed learning how to add new items to .NET MAUI ComboBox dynamically.

Refer to our .NET MAUI feature tour page to learn about its other groundbreaking feature representations. You can explore our .NET MAUI ComboBox documentation to understand how to present and manipulate data.

For current customers, check out our .NET MAUI components from the License and downloads page. If you are new to Syncfusion, try our 30-day free trial to check out our .NET MAUI ComboBox and other .NET MAUI components.

Please let us know in the following comments section if you have any queries or require clarifications. You can also contact us through our support forums, Direct - Trac, or feedback portal. We are always happy to assist you!