{"id":30072,"date":"2017-02-27T13:11:33","date_gmt":"2017-02-27T21:11:33","guid":{"rendered":"https:\/\/blog.xamarin.com\/?p=30072"},"modified":"2019-04-04T08:33:53","modified_gmt":"2019-04-04T15:33:53","slug":"new-bindable-picker-control-xamarin-forms","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/new-bindable-picker-control-xamarin-forms\/","title":{"rendered":"New Bindable Picker Control for Xamarin.Forms"},"content":{"rendered":"<p>\t\t\t\tPicker controls are a staple of mobile form design, and are used to select date, time, and presenting a predefined list of choices, such as a list of countries or states. As we continue to improve Xamarin.Forms coverage of common UI scenarios, we\u2019ve introduced binding support for the <a href=\"https:\/\/developer.xamarin.com\/api\/type\/Xamarin.Forms.Picker\/\" target=\"_blank\"><code>Picker<\/code><\/a>. You can try it now\u00a0in our <a href=\"https:\/\/releases.xamarin.com\/pre-release-xamarin-forms-2-3-4-192-pre2\/\" target=\"_blank\">latest 2.3.4 pre-release<\/a> or\u00a0our <a href=\"https:\/\/blog.xamarin.com\/try-the-latest-in-xamarin-forms-with-nightly-builds\/\" target=\"_blank\">nightly build NuGet feed<\/a>.<\/p>\n<p>As of this writing, the properties that are bindable include:<\/p>\n<ul>\n<li><code>ItemsSource<\/code><\/li>\n<li><code>SelectedIndex<\/code><\/li>\n<li><code>SelectedItem<\/code><\/li>\n<li><code>TextColor<\/code><\/li>\n<li><code>Title<\/code><\/li>\n<\/ul>\n<h2>Set an ItemsSource<\/h2>\n<p>The first thing we want to bind are the items intended to populate the picker list, allowing us to dynamically update the picker after creation. Let\u2019s take a look at how this works, given that we have a list of Countries in our <code>BindingContext<\/code>, which is typically a View Model. For clarity, we\u2019ll wire up the <code>BindingContext<\/code> directly in our <code>ContentPage<\/code> constructor.<\/p>\n<pre>public class RegistrationPageViewModel : INotifyPropertyChanged\n{\n    ....\n    \n    List countries = new List\n    {\n        \"Afghanistan\",\n        \"Albania\",\n        \"Algeria\",\n        \"Andorra\",\n        \"Angola\",\n        ...\n    };\n    public List Countries =&gt; countries;\n\n    ...\n}\n\npublic partial class RegistrationPage : ContentPage\n{\n    RegistrationPageViewModel vm;\n\n    public RegistrationPage()\n    {\n        InitializeComponent();\n        this.BindingContext = vm = new RegistrationPageViewModel();\n    }\n}\n<\/pre>\n<p>We may then bind that list to our picker\u2019s <code>ItemsSource<\/code> property.<\/p>\n<pre class=\"lang:xhtml decode:true\">\n<\/pre>\n<p>And voila! we have our picker populated from the <code>BindingContext<\/code>. Should our list of countries be updated or changed, the picker will reflect that change.<\/p>\n<h2>Handling Picker Item Selection<\/h2>\n<p>We often want to take an action when a choice is made in the picker. In the past, you might handle the <code>SelectedIndexChanged<\/code> event. You now have the option of moving that code into your <code>BindingContext<\/code>; in our case the <code>RegistrationPageViewModel<\/code>:<\/p>\n<pre class=\"lang:xhtml decode:true\">\n<\/pre>\n<pre>\npublic class RegistrationPageViewModel : INotifyPropertyChanged\n{\n    ...\n    \n    int countriesSelectedIndex;\n    public int CountriesSelectedIndex\n    {\n        get \n        {\n            return countriesSelectedIndex;\n        }\n        set \n        {\n            if(countriesSelectedIndex != value)\n            {\n                countriesSelectedIndex = value;\n\n                \/\/ trigger some action to take such as updating other labels or fields\n                OnPropertyChanged(nameof(CountriesSelectedIndex));\n                SelectedCountry = Countries[countriesSelectedIndex];\n            }\n        }\n    }\n}\n<\/pre>\n<div style=\"clear: both\"><a href=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/44\/2019\/03\/BindablePicker_Android.gif\"><img decoding=\"async\" class=\"\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/44\/2019\/03\/BindablePicker_Android.gif\" alt=\"BindablePicker_Android\" width=\"331\" height=\"600\" \/><\/a> <a href=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/44\/2019\/03\/BindablePicker_iOS.gif\"><img decoding=\"async\" class=\"\" src=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/44\/2019\/03\/BindablePicker_iOS.gif\" alt=\"BindablePicker_iOS\" width=\"325\" height=\"600\" \/><\/a><\/div>\n<h2>Wrapping Up<\/h2>\n<p>Give the new binding support in the <code>Picker<\/code> control a try today! If there are more improvements like this that you\u2019d like to see in Xamarin.Forms, let us know by contributing to discussions in the <a href=\"https:\/\/forums.xamarin.com\/\" target=\"_blank\">Xamarin.Forms Evolution forum<\/a>. While there, you can also contribute proposals to help guide\u00a0the platform forward.\t\t<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Picker controls are a staple of mobile form design, and are used to select date, time, and presenting a predefined list of choices, such as a list of countries or states. As we continue to improve Xamarin.Forms coverage of common UI scenarios, we\u2019ve introduced binding support for the Picker. You can try it now\u00a0in our [&hellip;]<\/p>\n","protected":false},"author":553,"featured_media":30073,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2],"tags":[4,16],"class_list":["post-30072","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developers","tag-xamarin-platform","tag-xamarin-forms"],"acf":[],"blog_post_summary":"<p>Picker controls are a staple of mobile form design, and are used to select date, time, and presenting a predefined list of choices, such as a list of countries or states. As we continue to improve Xamarin.Forms coverage of common UI scenarios, we\u2019ve introduced binding support for the Picker. You can try it now\u00a0in our [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/30072","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/users\/553"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/comments?post=30072"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/30072\/revisions"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media?parent=30072"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/categories?post=30072"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/tags?post=30072"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}