How to bind selected item of ComboBox with view model in .NET MAUI?

This section explains how to bind the SelectedItem property of a .NET MAUI ComboBox with a ViewModel in a .NET MAUI application. This allows efficient data management and synchronization between user interactions and data representation.

Steps:

Step 1: Create a Model Class

Begin by creating a model class that encapsulates essential properties such as Name and ID. These properties represent attributes of the social media options.

Model Class:

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

Step 2: Build a ViewModel Class

Create a ViewModel class that inherits from INotifyPropertyChanged. Implement the necessary event and method for the property change notifications. Include a collection property to facilitate binding for multiple selected items. Since the SelectedItem property is of object type, the ViewModel should accommodate for multiple selections.

ViewModel:

public class SocialMediaViewModel : INotifyPropertyChanged
{
    private void NotifyPropertyChanged([CallerMemberName] string propertyName = "") {PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));}

    public event PropertyChangedEventHandler PropertyChanged;

    private object _selectedItem;
    public object SelectedItem
    {
        get { return _selectedItem; }
        set { _selectedItem = value; NotifyPropertyChanged("SelectedItem"); }
    }

    public ObservableCollection<SocialMedia> SocialMedias { get; set; }

    public SocialMediaViewModel() 
    {
        SocialMedias = new ObservableCollection<SocialMedia>
        {
            new SocialMedia() { Name = "Facebook", ID = 0 },
            new SocialMedia() { Name = "Google Plus", ID = 1 },
            new SocialMedia() { Name = "Instagram", ID = 2 },
            new SocialMedia() { Name = "LinkedIn", ID = 3 },
            new SocialMedia() { Name = "Skype", ID = 4 },
            new SocialMedia() { Name = "Telegram", ID = 5 },
            new SocialMedia() { Name = "Televzr", ID = 6 },
            new SocialMedia() { Name = "Tik Tok", ID = 7 },
            new SocialMedia() { Name = "Tout", ID = 8 },
            new SocialMedia() { Name = "Tumblr", ID = 9 },
            new SocialMedia() { Name = "Twitter", ID = 10 },
            new SocialMedia() { Name = "Vimeo", ID = 11 },
            new SocialMedia() { Name = "WhatsApp", ID = 12 },
            new SocialMedia() { Name = "YouTube", ID = 13 }
        };
        SelectedItem = SocialMedias.ElementAtOrDefault(3);
    }
}

Step 3: Bind ComboBox SelectedItem Property

In your XAML layout, add the ComboBox control to visually display the social media options for the selection. Bind the SelectedItem property of the ComboBox control to the corresponding property within your ViewModel.

XAML:

<StackLayout>
    <editors:SfComboBox   WidthRequest="150" HeightRequest="50"
                          ItemsSource="{Binding SocialMedias}"
                          SelectedItem="{Binding SelectedItem,Mode=TwoWay}"
                          SelectedValuePath="Name" />
</StackLayout>

Output

Conclusion
Hope you enjoyed learning about how to bind SelectedItem of ComboBox with View Model in .NET MAUI.

You can refer to our .NET MAUI ComboBox 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, you can check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our .NET MAUI ComboBox and other .NET MAUI components.

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