Xamarin.Forms Picker

febrero 16, 2016

In this post, we gonna be see, the Picker Control in Xamarin.Forms
The picker is a control that allows select one element from a predetermined list of options.

The first thing that we need to do, is create a instance of Picker:

            Xamarin.Forms.Picker picker = new Xamarin.Forms.Picker
            {
                Title = "Chose one country",
                VerticalOptions = LayoutOptions.CenterAndExpand,
                BackgroundColor=Color.Aqua
            };

Next, we need to asign the values for our Picker control, and we do it, on the next way:

picker.Items.Add ("Canada");
            picker.Items.Add ("USA");
            picker.Items.Add ("Mexico");
            picker.Items.Add ("Brasil");
            picker.Items.Add ("Argentina");
            picker.Items.Add ("Rusia");
            picker.Items.Add ("China");

With this, our picker has values, but, if we want to know which element is select, we need to invoke the method SelectedIndexChanged:

picker.SelectedIndexChanged+= Picker_SelectedIndexChanged;

Inside of the method, we get the value in the sender object, and assign to a local variable, after, show in a Alert.

void Picker_SelectedIndexChanged (object sender, EventArgs e)
        {
            var data = (Xamarin.Forms.Picker)sender;
            DisplayAlert ("Seleccionaste",data.Items[data.SelectedIndex].ToString(),"cerrar");
        }

Now, to finish, we put the Picker inside of StackLayout.

Now all the code:

public class PickerPage : ContentPage
    {
        public PickerPage ()
        {
            Title = "Xamarin.Forms picker";
            BackgroundColor = Color.White;

            Xamarin.Forms.Picker picker = new Xamarin.Forms.Picker
            {
                Title = "Chose one country",
                VerticalOptions = LayoutOptions.CenterAndExpand,
                BackgroundColor=Color.Aqua
            };
            picker.Items.Add ("Canada");
            picker.Items.Add ("USA");
            picker.Items.Add ("Mexico");
            picker.Items.Add ("Brasil");
            picker.Items.Add ("Argentina");
            picker.Items.Add ("Rusia");
            picker.Items.Add ("China");

            picker.SelectedIndexChanged+= Picker_SelectedIndexChanged;
                var lblTitle = new Label () {
                Text="Picker",

                };
            Content = new StackLayout {
                HorizontalOptions=LayoutOptions.CenterAndExpand,
                VerticalOptions=LayoutOptions.CenterAndExpand,
                Children = {
                    lblTitle,
                    picker
                }
            };
        }

        void Picker_SelectedIndexChanged (object sender, EventArgs e)
        {
            var data = (Xamarin.Forms.Picker)sender;
            DisplayAlert ("Seleccionaste",data.Items[data.SelectedIndex].ToString(),"cerrar");
        }
    }