How to Bind the SelectedItem of a ComboBox with a ViewModel 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 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 multiple selections.

ViewModel:

using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Runtime.CompilerServices;

public class SocialMediaViewModel : INotifyPropertyChanged
{
    private object _selectedItem;

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

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

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

    public event PropertyChangedEventHandler PropertyChanged;

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

Step 3: Bind ComboBox SelectedItem Property

In your XAML layout, add the ComboBox control to visually display the social media options for 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
We hope you enjoyed learning how to bind the Selected Item of a ComboBox with a ViewModel 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®, try our 30-day free trial to check out our .NET MAUI ComboBox and other components.

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