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.

1. Windows 10 (Recommended).
2. Visual Studio 2015 Community Edition (It is a free software available online).
3. 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.



Step 2

Now, create project “XamFormPicker_Droid".



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



Create project “XamFormPicker_UWP” .



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.



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



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.



Step 8

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



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



Step 10

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



After clicking Picker control, the screenshot is given below. 



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



Summary

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