Picker Control In Xamarin.Forms Application For Android And UWP

Picker control is a view control for picking an element in a list. The visual representation of a Picker control is similar to an entry control, but a Picker control appears in place of a keyboard.

Before reading this article, please go through the article How To Create And Use XAML Content Page In Xamarin Forms Application For Android And Universal Windows Platform

After reading this article, you will know how to add Picker Control in Xamarin.Forms Application for an Android and Universal Windows Platform with XAML and Visual C# in cross platform application development.

The important tools are given below, which are required to develop UWP.

Windows 10 (Recommended).
Visual Studio 2015 Community Edition (It is a free software available online).
Using Visual studio 2015 Installer, Enable the Xamarin (Cross Platform Mobile development and C#/.NET while install/Modify Visual studio 2015.

Now, we can discuss step by step app development.

Step 1

Open Visual Studio 2015 -> Start -> New Project-> select Cross-Platform (under Visual C#-> Blank App (Xamarin.Forms Portable)-> Give the suitable name for your app (XamFormPicker) -> OK.

Xamarin

Step 2

Now, create project “XamFormPicker_Droid".

Xamarin

Choose the target and minimum platform version for your Universal Windows Project.

Xamarin

Create project “XamFormPicker_UWP” .

Xamarin

Step 3

Afterwards, Visual Studio creates six projects and displays getting started with XamarinPage. Now, we have to update Xamarin.Forms Reference for the Portable Project and XamFormPicker_Droid project.

(Please refer How To Create And Use XAML Content Page In Xamarin Forms Application For Android And Universal Windows Platform)

Step 4

Add XAML page for Picker Control demo. Right click on XamFormPicker(Portable) project. Select ADD-> NewItem.

Xamarin

Select ->CrossPlatform-> FormXamlPage-> Give the relevant name.

Xamarin

Step 5

Add Picker Tag with the items and two Labels in PickerDemo.xaml.

<StackLayout>
<Label x:Name="lblTitle" Text="Picker control in Xamarin Forms - UWP and Android Demo" Font="Large" />
<Label x:Name="lbldisp"></Label>
<Picker x:Name="Countries">
<Picker.Items>
<x:String>India</x:String>
<x:String>United States</x:String>
<x:String>Australia</x:String>
<x:String>Bangladesh</x:String>
<x:String>Canada</x:String>
<x:String>China</x:String>
<x:String>Germany</x:String>
<x:String>Mauritius</x:String>
<x:String>Nepal</x:String>
<x:String>Brazil</x:String>
</Picker.Items>
</Picker>
</StackLayout>

Step 6

Add the code, mentioned below in PickerDemo.xaml.cs

public PickerDemo() {
InitializeComponent();
Countries.SelectedIndexChanged += (sender, args) => {
if (Countries.SelectedIndex == -1) {
lbldisp.Text = "Nil Value";
} else {
lbldisp.Text = Countries.Items[Countries.SelectedIndex];
}
};
}

Step 7

Open (double click) the file App.cs in Solution Explorer-> XamFormPicker(portable) and set the Root page.

Xamarin

Step 8

We will test Android and UWP. Thus, we can set the Multiple Startup Projects as XamFormPicker.Droid and XamFormPicker.UWP (Universal Windows).

Xamarin

Step 9

Change the Configuration Manager settings. Go to Build -> Configuration Manager, uncheck all the build and deploy options to the iOS, Windows, WinPhone. Check the Droid and UWP

Xamarin

Step 10

Deploy your app in local machine and the output of the XamFormPicker app is given below.

Xamarin

After clicking Picker control, the screenshot is given below.

Xamarin

After Selecting the Picker Item, the screenshot is given below.

Xamarin

Summary

Now, you have successfully created and tested Picker control in Xamarin.Forms Application for Cross Platform Application Development , using Visual C# and Xamarin.

3 Comments

Join the conversation! Your thoughts help the community grow.

Renato David7y ago
I am binding observablecollection(itemssource) from viewmodel to picker, how do I set selectedIndex to 0(zero) in xaml when itemssource changed in viewmodel?
Sharvari Desai7y ago
I am having an exception, NullReferenceException,
Balaji8y ago
Hi Vijayaragavan,Can you please tell how to add the values from Sql Server to Xamarin forms Picker Control.