Quick Start Tutorial: Creating Universal Apps Via Xamarin: Picker Control Xaml - Part 15

Read the previous parts of the series here,

This article explains about Picker control.

Picker control

Picker control displays the group of items, and the user can select one item in the list (looks like Combo box control) and this control is displayed like a normal entry (Textbox) control in the GUI. Once clicked, it shows the group of items.


Three main properties are:
  1. Title
  2. Items
  3. SelectedIndex

Items: This property is used to add the group of items in the control and it contains the group of the strings.

  1. <Picker.Items>  
  2.    <x:String> Apple </x:String>  
  3.    <x:String> Banana </x:String>  
  4.    <x:String> Cherry </x:String>  
  5. </Picker.Items>  

This is used to display the title of the control. In Android and iOS, the selected item displays in the title area and in universal Windows program this property won’t change until the title property changes.

  1. <Picker Title="Picker(Combo Demo)">  
  2.       <Picker.Items>  
  3.         <x:String> Apple </x:String>  
  4.         <x:String> Banana </x:String>  
  5.         <x:String> Cherry </x:String>  
  6.       </Picker.Items>  
  7. </Picker>  
How to create common behavior (Title property) to all the platforms (explained at the end of this article).

SelectedIndex: This property is used to get or set SelectedIndex in the items list.

Ex: By default,  the selected item is the first item in the picker item list.
  1. <Picker.SelectedIndex>  
  2. 0  
  3. </Picker.SelectedIndex>  
Note In Xaml, assign the SelectedIndex=”0” like this. This value won’t set and it won’t throw an exception.

SelectedIndexChanged event

This event is used in handling the SelectedIndex changed in the items control.

The event will fire if UWP Item is selected in the list. In Android, click the OK button and in iOS, click the Done button and the event will fire.

  1. <StackLayout>  
  2.     <Picker Title="Picker(Combo Demo)" x:Name="PickerCtl"  
  3.             SelectedIndexChanged="Picker_OnSelectedIndexChanged">  
  4.       <Picker.Items>  
  5.         <x:String>Apple</x:String>  
  6.         <x:String>Banana</x:String>  
  7.         <x:String>Cherry</x:String>  
  8.       </Picker.Items>  
  9.     <Picker.SelectedIndex>  
  10.       0  
  11.     </Picker.SelectedIndex>  
  12.     </Picker>    
  13.   </StackLayout>  
  14.  private void Picker_OnSelectedIndexChanged(object sender, EventArgs e)  
  15.  {  
  16.      if (PickerCtl != null && PickerCtl.SelectedIndex <= PickerCtl.Items.Count  
  17.      {  
  18.          var selecteditem = PickerCtl.Items[PickerCtl.SelectedIndex];  
  19.          DisplayAlert("Picker Control", selecteditem, "OK");  
  20.       }  
  21.   }  

Note In the Picker control, SelectedIndex and title property are binding properties and the items are not binding properties.

How to create a common behavior of the Title to all the platforms. 
  1. Add the label control only for iOS, for Android and UWP it  is not required, assign the title name in this control.
  2. Use OnPlatform function, iOS and Android are true and UWP is false. This resource is binding to the label control.
    1. <ContentPage.Resources>  
    2.     <ResourceDictionary>  
    3.       <OnPlatform x:Key="TitleEnable" x:TypeArguments="x:Boolean" Android="true" iOS="true" WinPhone="false"/>  
    4.     </ResourceDictionary>  
    5.   </ContentPage.Resources>  
    7. <Label Text="Picker(Combo Demo)" IsVisible="{StaticResource TitleEnable}"/>  
    8.     <Picker Title="Picker(Combo Demo)" x:Name="PickerCtl"  
    9.             SelectedIndexChanged="PickerCtl_OnSelectedIndexChanged">  
    10.       <Picker.Items>  
    11.         <x:String>Apple</x:String>  
    12.         <x:String>Banana</x:String>  
    13.         <x:String>Cherry</x:String>  
    14.       </Picker.Items>  
    15.     </Picker> 

iOS and Android show the title in the label control and the UWP platform displays the title in the Picker control itself.

Similar Articles