Data Binding in .NET MAUI ComboBox

• ItemsSource(IEnumerable)—Defines the collection of the items that will populate the control with data.
• DisplayMemberPath(string)—Defines the name of the property which will be visualized inside the drop-down list.

The DisplayMemberPath is a property that lets the developer specify a particular property of the business object to be displayed. If DisplayMemberPath is not set, the ComboBox will visualize the ToString implementation of the business object.

To customize the content inside the input area when an item is selected and the DisplayMemberPath property is not set, use the SelectionBoxTemplate. The SelectionBoxTemplate applies when the SelectionMode is Single and the control's IsEditable property is set to false.

Binding to a Complex Object

1. Define the ComboBox in XAML:

• XAML

<telerik:RadComboBox ItemsSource="{Binding Items}" 
                 DisplayMemberPath="Population"
                 AutomationId="boundComboBox"/>

2. Add the telerik namespace:

• XAML

xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"

3. Define a sample business model:

• C#

public class City
{
    public string Name { get; set; }
    public int Population { get; set; }
}

4. Add the ViewModel:

• C#

public class ViewModel
{
    public ViewModel()
    {
        this.Items = new ObservableCollection<City>
        {
            new City { Name = "Tokyo", Population = 13929286 },
            new City { Name = "New York", Population = 8623000 },
            new City { Name = "London", Population = 8908081 },
            new City { Name = "Madrid", Population = 3223334 },
            new City { Name = "Los Angeles", Population = 4000000},
            new City { Name = "Paris", Population = 2141000 },
            new City { Name = "Beijing", Population = 21540000 },
            new City { Name = "Singapore", Population = 5612000 },
            new City { Name = "New Delhi", Population = 18980000 },
            new City { Name = "Bangkok", Population = 8305218 },
            new City { Name = "Berlin", Population = 3748000 },
        };
    }

    public ObservableCollection<City> Items { get; set; }
}

5. Set the binding context after InitializeComponent() in the page's code behind:

• C#

this.BindingContext = new ViewModel();