New to Telerik UI for .NET MAUI? Start a free 30-day trial

Getting Started

This guide provides the information you need to start using the Telerik UI for .NET MAUI ComboBox by adding the control to your project.

At the end, you will be able to achieve the following result.

ComboBox Getting Started

Prerequisites

Before adding the ComboBox, you need to:

  1. Set up your .NET MAUI application.

  2. Download Telerik UI for .NET MAUI.

  3. Install Telerik UI for .NET MAUI.

Define the Control

When your .NET MAUI application is set up, you are ready to add a ComboBox control to your page. The following example demonstrates the definition of the RadComboBox with ItemsSource set to a static collection as well as bound to property from a ViewModel class.

Using static data

<telerik:RadComboBox>
    <telerik:RadComboBox.ItemsSource>
        <x:Array Type="{x:Type x:String}">
            <x:String>USA</x:String>
            <x:String>Uganda</x:String>
            <x:String>Ukraine</x:String>
            <x:String>Canada</x:String>
            <x:String>France</x:String>
            <x:String>Italy</x:String>
            <x:String>United Kingdom</x:String>
            <x:String>China</x:String>
            <x:String>Japan</x:String>
        </x:Array>
    </telerik:RadComboBox.ItemsSource>
</telerik:RadComboBox>

Here is the result:

ComboBox Getting Started Example

Binding to a complex object

Here is the ComboBox definition in XAML:

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

When binding to a complex objects, ComboBox DisplayMemberPath property should be set.

the sample business model

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

and the ViewModel used:

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

Here is the result:

ComboBox Getting Started Example

For the ComboBox Getting Started example refer to the SDKBrowser Demo Application.

See Also

In this article
Not finding the help you need?