Getting Started with Templated Picker for Xamarin

As part of the  Telerik R1 2020 release , we released a series of pickers for Xamarin.Forms. In previous blog posts, we have reviewed theDateTime PickerandList Pickercontrols and the features they provide. It's time to get you familiarized with our Custom (Templated) Picker control.

The Templated Picker in Telerik UI for Xamarin is a control that enables you to tailor an item selection with a custom template, thus covering any potential scenario you might need for your mobile development initiative.

As in the List and DateTime Pickers, its items are visualized inside a popup. The Templated Picker has a number of features that allow you to define what text will be displayed when an item from the selector is picked, fully customize what will be visualized inside the Picker’s popup and customize the popup header and footer.

In this blog post I will get you familiar with the new Templated (Custom) Picker control and the features it provides.

Templated Picker in Telerik UI for Xamarin - Key Features:

• Selector Template : define a template for the items, as well as the selected one.
• DisplayString Format : chose what text to display when an item from the list is picked.
• Flexible Styling API : style the items, popup, header and footer of the picker.
• Commands Support : commands for clearing a selected item, opening and closing the dialog. In addition the Popup exposes an Accept command that is fired when the OK button is clicked and a Cancel command that is fired when the Cancel button is clicked.

Selector Template

You can fully customize the appearance of the Templated Picker. The selector template property allows you to choose what to display in the popup after opening the Templated Picker. We also give you the option to customize the header and footer through the HeaderTemplate and FooterTemplate properties.

Our Templated Picker for Xamarin offers the useful functionality of a placeholder text. Developers can define what text is to be displayed when no item is selected, thus indicating to the end user the data they need to input, e.g. “Select color.” You can set a text using the Placeholder property or customize the default look through the PlaceholderTemplate property.

You can find more about the Selector Template in the Telerik UI for Xamarin Samples TemplatedPicker/FirstLook .

DisplayString Format

The DisplayStringFormat property defines what text will be displayed when an item is selected, and you can also apply formatting to a string when an item is selected.

Flexible Styling API

You can style any part of the list picker control. Here is a list of the styling API we have exposed:

• PlaceholderLabelStyle
• DisplayLabelStyle

In order to style the popup, you need to use the TemplatedPicker.SelectorSetting property. The property provides the following options for styling the:

• PopupViewStyle
• HeaderStyle
• HeaderLabelStyle
• FooterStyle
• buttons inside the footer – AcceptButtonStyle and CancelButtonStyle

Also, you have the ability to set a background color outside of the popup using the PopupOutsideBackgroundColor .

Change the text for the Popup header using the HeaderLabelText and set an icon or different text to the AcceptButtonText and CancelButtonText.

Tell Us What You Think

We would love to hear what you think about the Custom (Templated) Picker control and how we can continue to improve it. 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 .

Don’t forget to check out the various demos of the control in our SDK Sample Browser and the Telerik UI for Xamarin  Demos application.

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.

Start Your Trial

Happy coding with our controls! If you are curious about Date and Time pickers, don’t forget to check out our post – Getting Started with Date and Time Picker for Xamarin . Or if you need a ListPicker in your mobile application and looping functionality check out the List Picker for Xamarin blog post .