Xamarin iOS Tutorial UiPickerView

Question

I am trying to find only some basic instructions for using UiPickerView in Xamarin iOS. There are questions about the stack overflow that answer some questions, but I'm only looking for a simple overview and hopefully going through adding a UiPickerView to the ViewController, connecting data and registering events. As a noob for Xamarin and iOS, I struggle to catalog all the places where the code should go for this type of control.

Answer 1

// Set PickerViewModel to PickerView

var examplePVM = new ExamplePickerViewModel(myListOfItems); YourPickerView.Model = examplePVM ; 

// Create PickerViewModel

 public class ExamplePickerViewModel : UIPickerViewModel { private List<string> _myItems; protected int selectedIndex = 0; public ExamplePickerViewModel(List<string> items) { _myItems = items; } public string SelectedItem { get { return _myItems[selectedIndex]; } } public override nint GetComponentCount (UIPickerView picker) { return 1; } public override nint GetRowsInComponent (UIPickerView picker, nint component) { return _myItems.Count; } public override string GetTitle (UIPickerView picker, nint row, nint component) { return _myItems[row]; } public override void Selected (UIPickerView picker, nint row, nint component) { selectedIndex = (int)row; } } 

Answer 2

 // Textfield Click event private bool OnTodeapartmentShouldBeginEditing(UITextField textField) { // Creating Picker view pickerView = new UIPickerView(new CGRect(UIScreen.MainScreen.Bounds.X-UIScreen.MainScreen.Bounds.Width, UIScreen.MainScreen.Bounds.Height -230, UIScreen.MainScreen.Bounds.Width, 180)); pickerView.BackgroundColor = UIColor.From#d3d3d3; pickerView.ShowSelectionIndicator = true; // create done button done = new UIButton(new CGRect(pickerView.Frame.X, pickerView.Frame.Y - 50, UIScreen.MainScreen.Bounds.Width, 50)); done.BackgroundColor = UIColor.Purple; done.SetTitle("Department List", UIControlState.Normal); picker = new PickerDataModel(); if (departmentList.DepartmentDetail != null) { foreach (var item in departmentList.DepartmentDetail) { picker.Items.Add(item.Name); } pickerView.Model = picker; view.AddSubviews(pickerView, done); // value change event of picker view picker.ValueChanged += (s, e) => { selectedValue = picker.SelectedItem; txtDepartment.Text = selectedValue; deptID = departmentList.DepartmentDetail.Find(x => x.Name == selectedValue).DepartmentId; }; } } 

New class file enter image description here // Picker data model model to represent the collector, this class file is used in the auxiliary section for general use

 public class PickerDataModel : UIPickerViewModel { public event EventHandler<EventArgs> ValueChanged; /// <summary> /// The items to show up in the picker /// </summary> public List<string> Items { get; private set; } /// <summary> /// The current selected item /// </summary> public string SelectedItem { get { return Items[SelectedIndex]; } } public int SelectedIndex { get { return selectedIndex; } set { selectedIndex = value; } } private int selectedIndex; public PickerDataModel() { Items = new List<string>(); } /// <summary> /// Called by the picker to determine how many rows are in a given spinner item /// </summary> public override nint GetRowsInComponent(UIPickerView picker, nint component) { return Items.Count; } /// <summary> /// called by the picker to get the text for a particular row in a particular /// spinner item /// </summary> public override string GetTitle(UIPickerView picker, nint row, nint component) { return Items[(int)row]; } /// <summary> /// called by the picker to get the number of spinner items /// </summary> public override nint GetComponentCount(UIPickerView picker) { return 1; } /// <summary> /// called when a row is selected in the spinner /// </summary> public override void Selected(UIPickerView picker, nint row, nint component) { SelectedIndex = (int)row; if (ValueChanged != null) { ValueChanged(this, new EventArgs()); } } } [enter image description here][1] [1]: https://i.stack.imgur.com/Ld1uU.png 

Answer 3

This PickerViewController file in the MonoCatalog-MonoDevelop example is similar to what you are asking for.

In particular, the CreateCustomPicker function here and the CustomPickerModel type CustomPickerModel defined.

Answer 4

I created a blog post to cover the basics of UIPickerView. This may be misleading, the basic idea is:

• Add a UIPickerView to your storyboard, etc., give it a name.
• Create a class that extends from UIPickerViewModel
• Set the collector model, pickerExample.Model = new YourListPicker(YourList);

Answer 5

 public class PickerView : UIViewController { public PickerView() { } UITextField SelectGenderTextField = new UITextField(); UIPickerView GenderPicker = new UIPickerView(); public override void ViewDidLoad() { base.ViewDidLoad(); AddTextField(); GenderPicker(); Constraint(); } } 

Text box for displaying selected data from a selector

  private void AddTextField() { SelectGenderTextField.Placeholder = "Select Gender"; SelectGenderTextField.Layer.BorderWidth = 1; SelectGenderTextField.Layer.BorderColor = UIColor.Black.CGColor; SelectGenderTextField.Layer.MasksToBounds = true; SelectGenderTextField.Layer.SublayerTransform = CATransform3D.MakeTranslation(5, 0, 0); //to Create a Space At The beginning of the text field SelectGenderTextField.InputView = GenderPicker; //To Start The UIPickerView from The bottom. } 

Picker Init and settings data

  private void GenderPicker() { var genderList = new List<string> { "Male","Female" }; var picker = new GenderPickerModel(genderList); GenderPicker.Model = picker; picker.ValueChanged += (sender, e) => { SelectGenderTextField.Text = picker.SelectedGenderByUser; //Update The Selected Value In the TextField View.EndEditing(true);// To Dismiss the Picker View Once The User Select The Value }; } 

Used by Cirrious.FluentLayouts.Touch for restrictions

  private void Constraint() { View.AddSubviews(SelectGenderTextField); View.SubviewsDoNotTranslateAutoresizingMaskIntoConstraints(); View.AddConstraints( SelectGenderTextField.WithRelativeWidth(View, 0.80f), SelectGenderTextField.WithRelativeHeight(View, 0.05f), SelectGenderTextField.WithSameCenterX(View), SelectGenderTextField.WithSameCenterY(View) ); } 

GenderPickerModel Class

 class GenderPickerModel : UIPickerViewModel { public EventHandler ValueChanged; public string SelectedGenderByUser; private List<string> genderList; public GenderPickerModel(List<string> genderList) { this.genderList = genderList; } public override nint GetRowsInComponent(UIPickerView pickerView, nint component) { return genderList.Count; } public override nint GetComponentCount(UIPickerView pickerView) { return 1; } public override string GetTitle(UIPickerView pickerView, nint row, nint component) { return genderList[(int)row]; } public override void Selected(UIPickerView pickerView, nint row, nint component) { var gender = genderList[(int)row]; SelectedGenderByUser = gender; ValueChanged(null,null); } }