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

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.

<Picker.SelectedIndex>
0
</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.

Example

<StackLayout>
<Picker Title="Picker(Combo Demo)" x:Name="PickerCtl"
SelectedIndexChanged="Picker_OnSelectedIndexChanged">
<Picker.Items>
<x:String>Apple</x:String>
<x:String>Banana</x:String>
<x:String>Cherry</x:String>
</Picker.Items>
<Picker.SelectedIndex>
0
</Picker.SelectedIndex>
</Picker>
</StackLayout>
private void Picker_OnSelectedIndexChanged(object sender, EventArgs e)
{
if (PickerCtl != null && PickerCtl.SelectedIndex <= PickerCtl.Items.Count
{
var selecteditem = PickerCtl.Items[PickerCtl.SelectedIndex];
DisplayAlert("Picker Control", selecteditem, "OK");
}
}

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.

Add the label control only for iOS, for Android and UWP it is not required, assign the title name in this control.
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.