Xamarin.Forms Picker

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");
        }
    }




Now, look the code running on iOS and Android:
Screenshots:




More information in:
https://developer.xamarin.com/guides/cross-platform/xamarin-forms/


Follow me on Twitter: https://twitter.com/OsvaldoSan
Or find me in Linkedin: https://www.linkedin.com/in/osvaldo-santiago-estrada-15480741


Comentarios

Entradas populares de este blog

Uso De Camara y Galeria fotos Xamarin.Android

Entry Show/Hide Password on Xamarin.Forms

MultiSelect Listview Xamarin.Forms