Xamarin.Forms Picker

The Picker view is a control for selecting a text item from a list of data.

The Xamarin.Forms Picker displays a short list of items, from which the user can select an item. Picker defines the following properties:

  • CharacterSpacing, of type double, is the spacing between characters of the item displayed by the Picker.
  • FontAttributes of type FontAttributes, which defaults to FontAtributes.None.
  • FontFamily of type string, which defaults to null.
  • FontSize of type double, which defaults to -1.0.
  • HorizontalTextAlignment, of type TextAlignment, is the horizontal alignment of the text displayed by the Picker.
  • ItemsSource of type IList, the source list of items to display, which defaults to null.
  • SelectedIndex of type int, the index of the selected item, which defaults to -1.
  • SelectedItem of type object, the selected item, which defaults to null.
  • TextColor of type Color, the color used to display the text, which defaults to Color.Default.
  • Title of type string, which defaults to null.
  • TitleColor of type Color, the color used to display the Title text.
  • VerticalTextAlignment, of type TextAlignment, is the vertical alignment of the text displayed by the Picker.

All of the properties are backed by BindableProperty objects, which means that they can be styled, and the properties can be targets of data bindings. The SelectedIndex and SelectedItem properties have a default binding mode of BindingMode.TwoWay, which means that they can be targets of data bindings in an application that uses the Model-View-ViewModel (MVVM) architecture. For information about setting font properties, see Fonts.

A Picker doesn't show any data when it's first displayed. Instead, the value of its Title property is shown as a placeholder on the iOS and Android platforms:

Initial Picker Display

When the Picker gains focus, its data is displayed and the user can select an item:

Picker Selecting an Item

The Picker fires a SelectedIndexChanged event when the user selects an item. Following selection, the selected item is displayed by the Picker:

Picker after Selection

There are two techniques for populating a Picker with data: