The R3 2020 release brings the long awaited ComboBox control to our Telerik UI for Xamarin suite, which enables you to present your users with a list of options to choose from in a user-friendly and convenient way through a dropdown list. RadComboBox for Xamarin comes packed up with a set of advanced features—editing, searching, single and multiple selection, custom templates and flexible styling API, to name a few.
In this blog post I will walk you through the key features of Telerik Xamarin ComboBox control. Let's start!
First, we need to feed the ComboBox with some data, so it properly displays the available options to the end user. You can set static items to the control's ItemsSource or bind it to a complex object using the DisplayMemberPath property. Let’s take a look at the following quick example with showing cars in a Rent a Car app.
Create a sample Car class:
Add a ViewModel class with a collection of Car objects:
Let’s go to the UI part—add a RadComboBox instance, bind its ItemsSource and set DisplayMemberPath, so that the cars' names will be shown:
That’s all needed to include RadComboBox control to your page. Check below the result on an iOS emulator:
By default RadComboBox control is non-editable—this, however, can be easily changed through the IsEditable Boolean property. When the control is in edit mode, users can type into the text input and thus initiate searching through thе ComboBox ItemsSource. This feature is quite useful for quick selection, especially in the case with more items available. You can also define whether the search mode will be "StartsWith" or "Contains"—by default RadComboBox uses "StartsWith" mode and search results will be returned only if they contain a word that starts with the search term. Other options that can be applied to the SearchMode property are "Contains," "ContainsCaseSensitive" and "StartsWithCaseSensitive".
So, in order to enable searching, you'd need to configure IsEditable and SearchMode properties, as well as the SearchTextPath property, the latter defines the name of the property against which the searching will be performed.
Additionally, the control highlights the matching text inside the dropdown list based on the given input after searching is executed.
Let’s return to our example with the Rent a Car app. Here is the updated RadComboBox definition with editing and searching enabled:
There are times when you may wish to have a combobox editor that allows multiple selection. You do not have to wait any longer, as our Telerik Xamarin ComboBox provides both single and multiple selection. All you need to set is the SelectionMode property to “Single” or “Multiple,” respectively. The API related to selection feature also includes SelectedItem/SelectedItems and SelectedIndex bindable properties, as well as SelectionChanged event, so you can easily adapt the control to the scenario you have at hand.
When RadComboBox is in “multiple” selection mode, the selected items are visualized as tokens with a “remove”(x) button, so that users can “deselect” them quickly and intuitively.
Let's see multiple selection in action:
The images below show RadComboBox with multiple selection in and out of focus:
RadComboBox offers a flexible styling API that you can use to enhance the look & feel of your app—you can change the ComboBox background color, style the control’s dropdown box and modify the clear and dropdown buttons. In addition, you can change the Placeholder text color and the Highlighted text color.
Furthermore, through the provided customizable templates—ItemTemplate, SelectedItemTemplate, TokenTemplate and ShowMoreTemplate, you can fully control the visual appearance of the RadComboBox control. I am going to return to my Rent a Car app and try to decorate the ComboBox used to display Car Models. First, add the following styles to the Resources section of your page:
Then update the ComboBox definition, so now it includes modified templates:
Add the TapGestureRecognizer_Tapped event handler in code behind:
The short screencast below shows the result on iOS emulator:
We would love to hear what you think about our controls and how we can improve them. If you have any ideas for features to add, do not hesitate to share this information with us on our Telerik UI for Xamarin Feedback portal.
If you have not yet tried the Telerik UI for Xamarin suite, take it out for a spin with a 30-day free trial, offering all the functionalities and controls at your disposal at zero cost. Additionally, you can grab the source code of our Xamarin demo apps and take them for a spin! Make sure you check out our technical guide for Xamarin developers too!
Happy coding with our controls!
Yana Kerpecheva is a Senior Technical Support Engineer on the Telerik UI for Xamarin team. She has been working with Telerik products since 2008, when she joined the company. Apart from work, she likes skiing and travelling to new places.
Subscribe to be the first to get our expert-written articles and tutorials for developers!