Xamarin UIPickerView iOS

UIPickerView

This is my first article and one born out of having to deal with the frustration of working with UI elements of Native iOS, to cross platform Xamarin.iOS. It’s common to find that examples provided online normally do not give you a step by step approach when trying to implement solutions found in iOS (Swift and Objective-C). So in this article I will try my best to be short and help you work with the UIPickerView.

According to a favourite site of mine; Code with Chris, a UIPickerView is a UI element that can be used to make a selection from multiple choices (similar to what a dropdown does for a webpage).

So on with the coding.

I am using Xamarin Studio 6.0.1 build. New Solution > iOS: Single View App > Click Next > AppName > Click Next and leave all the other stuff as default.

Open your Main.storyboard.

Add Label and a PickerView from the object Toolbox. Give the UI elements names under the properties pane.

Go to the UIViewController responsible for the view in the storyboard.

1. Import these libraries

using System;
using System.Collections.Generic;
using UIKit;

2. Instantiate Data model class for the Picker.

PickerDataModel pickerDataModel;

3. In your ViewDidLoad method insert the following code.

public override void ViewDidLoad()
 {
 base.ViewDidLoad();
 // Perform any additional setup after loading the view, typically from a nib.
 // create our simple picker model
 pickerDataModel = new PickerDataModel();
 pickerDataModel.Items.Add(“Blue”);
 pickerDataModel.Items.Add(“Red”);
 pickerDataModel.Items.Add(“Purple”);
 pickerDataModel.Items.Add(“White”);
 
 // set it on our picker class
 colorPicker.Model = pickerDataModel;
 
 // wire up the value change method
 pickerDataModel.ValueChanged += (s, e) =>
 {
 colorValueLabel.Text = pickerDataModel.SelectedItem;
 };
 
 // set our initial selection on the label
 colorValueLabel.Text = pickerDataModel.SelectedItem;
 }

In the PickerDataModel class. Insert the following code.

protected 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]; }
 }
 
 int selectedIndex = 0;
 
 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());
 }
 }
 }

Run your application. And you should be good to go.