Picker Selected Value in Xamarin Forms

Question

I have a picker in Xamarin Forms with country information like this:

picker.ItemSource = countryInfo;  //(its working perfectly)

Result:

(+1) United States
(+971) United Arab Emirates
(+27)  South Africa

Now because picker is bound with this string which is combination of code and name, so I am having difficulty to set picker.SelectedItem to +971 only. In selected item i do not need country name. Any hint or tip or help will highly be obliged?

I need only +355 here. Please help if someone gone through with same or have any idea about this.

string jsonFileName = "CountryCodes.json";
var assembly = typeof(MainPage).GetTypeInfo().Assembly;
List<Country> countryList = new List<Country>();
Stream stream = assembly.GetManifestResourceStream($"{assembly.GetName().Name}.{jsonFileName}");
using (var reader = new StreamReader(stream))
{
    var jsonString = reader.ReadToEnd();
    countryList = JsonConvert.DeserializeObject<List<Country>>(jsonString);
    var countryInfo = countryList as List<Country>;
    picker.ItemsSource = countryInfo.Select(code => code.pickerListEn).ToList();
}

Answer 1

User will select (+355) Algeria but the selected item i need to show is +355 only not the rest of the part of selected item

if you want to display '(' + Code + ')' + Country Name in list, and display + Code in picker text, I suggest you can use Picker custom render to render picker dialog to do.

I suggest you can use binding to to this, I create new class that like your Country class.

 public class Country
{
    //there may have other properties
    public string Id { get; set; }
    public string pickerListEn { get; set; }
}

Then create List, to add items in this list, binding this list to Picker.ItemsSource

 public partial class Page1 : ContentPage, INotifyPropertyChanged
{
    private List<Country> _countryInfo;
    public List<Country> countryInfo
    {
        get { return _countryInfo; }
        set
        {
            _countryInfo = value;
            RaisePropertyChanged("countryInfo");
        }
    }     

        this.BindingContext = this;

    }

    public event PropertyChangedEventHandler PropertyChanged;      
    public void RaisePropertyChanged(string propertyName)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

Creating CustomPicker class in PCL:

  public  class CustomPicker: Picker
{

}

Render Picker in Android:

[assembly: ExportRenderer(typeof(CustomPicker), typeof(CustomPickerAndroid))]

namespace PickerSample.Droid { public class CustomPickerAndroid: PickerRenderer { private Dialog dialog;
public CustomPickerAndroid() {

    }
    private string title;
    private BindingBase displayText;
    protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
    {
        base.OnElementChanged(e);
        Control.Click += Control_Click;

        var customPicker = (e.NewElement != null) ? (CustomPicker)e.NewElement
            : (e.OldElement != null) ? (CustomPicker)e.OldElement
            : new CustomPicker();

        title = !string.IsNullOrWhiteSpace(customPicker.Title)? customPicker.Title : "Select an item";
        displayText = customPicker.ItemDisplayBinding;



    }
    protected override void Dispose(bool disposing)
    {
        Control.Click -= Control_Click;
        base.Dispose(disposing);
    }



    private void Control_Click(object sender, EventArgs e)
    {
        var model = Element;
        dialog = new Dialog(Forms.Context);
        dialog.SetContentView(Resource.Layout.custom_picker_dialog);
        var textView = (TextView)dialog.FindViewById(Resource.Id.titletextview);
        textView.Text = title;
        //textView.SetTextColor(titleColor);
        var items = new List<object>();
        foreach (var item in model.ItemsSource)
            items.Add(item);
        var listView = (Android.Widget.ListView)dialog.FindViewById(Resource.Id.listview);
        listView.Adapter = new MyAdapter(items, displayText);

        listView.ItemClick += (object sender1, AdapterView.ItemClickEventArgs e1) =>
        {
            Element.SelectedIndex = e1.Position;

            dialog.Hide();
            var obj = items[e1.Position];
           string mDisplay = ((Binding)displayText).Path;
            string value1 = obj.GetType().GetProperty(mDisplay).GetValue(obj, null).ToString();
            string code = (value1.Split(new char[] { ' ' }))[0];
            code = code.Substring(1, code.Length - 2);
            Control.Text = code;
        };
        if (model.ItemsSource.Count > 3)
        {
            var height = Xamarin.Forms.Application.Current.MainPage.Height;
            var width = Xamarin.Forms.Application.Current.MainPage.Width;
            dialog.Window.SetLayout(700, 800);
        }
        dialog.Show();
    }



    class MyAdapter : BaseAdapter
    {
        private IList<object> mList;

        private Android.Graphics.Color mColor;
        private string mDisplay;
        public MyAdapter(IList<object> itemsSource, BindingBase display)

        {
            mList = itemsSource;                              
            mDisplay = ((Binding)display).Path;
        }
        public override int Count => mList.Count;
        public override Java.Lang.Object GetItem(int position)
        {
            var myObj = mList.ElementAt(position);
            return new JavaObjectWrapper<object>() { Obj = myObj };
        }
        public override long GetItemId(int position)
        {
            return position;
        }
        public override Android.Views.View GetView(int position, Android.Views.View view, ViewGroup parent)
        {
            view = LayoutInflater.From(parent.Context).Inflate(Resource.Layout.cell_layout, null);

            var text = view.FindViewById<TextView>(Resource.Id.textview1);

            var obj = mList.ElementAt(position);
            //string value1 = obj.GetType().GetProperty(mDisplay).GetValue(obj, null).ToString();
            //string code = (value1.Split(new char[] { ' ' }))[0];
            //code = code.Substring(1, code.Length - 2);
            text.Text = obj.GetType().GetProperty(mDisplay).GetValue(obj, null).ToString();

            return view;
        }
    }
    public class JavaObjectWrapper<T> : Java.Lang.Object
    {
        public T Obj { get; set; }
    }
}

}

In the layout folder (inside Resources) add an Android Layout called cell_layout.axml, which defines the appearance of each element of the Picker.

<LinearLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">

    android:id="@+id/textview1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="fill"/>
</LinearLayout>

In the same folder add another Android Layout called custom_picker_dialog.xml, which contains a TextView and a ListView inside a LinearLayout that will be used to implement the interface (and later, the functionality) of a Xamarin.Forms Picker.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
 android:gravity="fill">
<TextView
    android:id="@+id/titletextview"
    android:layout_width="200dp"
    android:layout_height="25dp"
    android:paddingLeft="25dp"
    android:paddingRight="25dp"/>

  <ListView
    android:id="@+id/listview"
    android:layout_gravity="center"

    android:layout_width="match_parent"
    android:dividerHeight="3dp"
    android:layout_height="0dp"
    android:layout_weight="1"/>
</LinearLayout>

The Screenshot:

I provide one sample at github, you can take a look;

https://github.com/CherryBu/Pickersample