Popup picker in Xamarin iOS - ios

Question

I need to implement a picker like in this image. How can I do this? I'm using Xamarin.iOS but I can use an answer with native code and translate it myself.

Answer 1

use an ActionSheet
actionSheetButton.TouchUpInside += ((sender, e) => {
// Create a new Alert Controller
UIAlertController actionSheetAlert = UIAlertController.Create("Action Sheet", "Select an item from below", UIAlertControllerStyle.ActionSheet);
// Add Actions
actionSheetAlert.AddAction(UIAlertAction.Create("Item One",UIAlertActionStyle.Default, (action) => Console.WriteLine ("Item One pressed.")));
actionSheetAlert.AddAction(UIAlertAction.Create("Item Two",UIAlertActionStyle.Default, (action) => Console.WriteLine ("Item Two pressed.")));
actionSheetAlert.AddAction(UIAlertAction.Create("Item Three",UIAlertActionStyle.Default, (action) => Console.WriteLine ("Item Three pressed.")));
actionSheetAlert.AddAction(UIAlertAction.Create("Cancel",UIAlertActionStyle.Cancel, (action) => Console.WriteLine ("Cancel button pressed.")));
// Required for iPad - You must specify a source for the Action Sheet since it is
// displayed as a popover
UIPopoverPresentationController presentationPopover = actionSheetAlert.PopoverPresentationController;
if (presentationPopover!=null) {
presentationPopover.SourceView = this.View;
presentationPopover.PermittedArrowDirections = UIPopoverArrowDirection.Up;
}
// Display the alert
this.PresentViewController(actionSheetAlert,true,null);
});

Answer 2

You can assign a PickerView to TextField's InputView property and assign a Toolbar to InputAccessoryView, like this:
UIToolbar toolBar = new UIToolbar(new CGRect(0, 0, 320, 44));
UIBarButtonItem flexibleSpaceLeft = new UIBarButtonItem(UIBarButtonSystemItem.FlexibleSpace,null,null);
UIBarButtonItem doneButton = new UIBarButtonItem("OK",UIBarButtonItemStyle.Done,this, new ObjCRuntime.Selector("DoneAction"));
UIBarButtonItem[] list = new UIBarButtonItem[] { flexibleSpaceLeft, doneButton };
toolBar.SetItems(list, false);
UIPickerView pickerView = new UIPickerView(new CGRect(0, 44, 320, 216));
pickerView.DataSource = new MyUIPickerViewDataSource();
pickerView.Delegate = new MyUIPickerViewDelegate();
pickerView.ShowSelectionIndicator = true;
textField.InputAccessoryView = toolBar;
textField.InputView = pickerView;
After you implement your DataSource and Delegate of the pickerview, it can work like this:

Answer 3

Thanks Kevin Li for the answer, just wanted to give a simplified version in case anyone needs this. Not exactly what was originally asked for, but does the job.
var pickerView = new UIPickerView();
var sports = new string[] { "baseball", "basketball", "wiener dog" };
var model = new PickerModel(sports);
model.PickerChanged += (sender, e) =>
{
txtSport.Text = sports[e.SelectedValue];
};
pickerView.Model = model;
pickerView.ShowSelectionIndicator = true;
// setting picker view to your textfield
txtSport.InputView = pickerView;