As part of the Telerik UI for Xamarin R1 2020 release, we released a series of pickers for Xamarin.Forms. In previous blog posts, we have reviewed the DateTime Picker and List Picker controls and the features they provide. Now 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 Telerik Xamarin List Picker and DateTime Picker, 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.
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. There is also an option to customize the header and footer through the HeaderTemplate and FooterTemplate properties.
The Telerik 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.
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.
You can style any part of the list picker control. Here is a list of the styling API we have exposed:
In order to style the popup, you need to use the TemplatedPicker.SelectorSetting property. The property provides the following options for styling the:
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.
We would love to hear what you think about the Custom (Templated) Picker Xamarin 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.
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.
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.
Aleks is a Software Developer, part of the Progress Telerik UI for Xamarin & UWP team in Sofia. He is in his last year of studies a bachelor’s in Telecommunications, but his passion is computers. Apart from work Aleksandar enjoys working out, travelling and hanging out with friends.
Subscribe to be the first to get our expert-written articles and tutorials for developers!