6

Is iOS Picker available in the Xamarin.iOS? I have searched throughly but there is neither example nor information has been founded; however, it is available in Xamarin.Form.

6
  • 1
    I added a simple example... Nov 24, 2015 at 19:47
  • Thanks a lot Robert. It is awesome!
    – casillas
    Nov 24, 2015 at 19:53
  • 1
    np, I learn by example and have a hundreds of these built as I learned Xammie 101 ;-) ...and still doing them, seems I found something new everyday. Nov 24, 2015 at 19:57
  • Thanks a lot RobertN, could you please share the resources/sources of Xammie 101?
    – casillas
    Nov 24, 2015 at 23:21
  • 1
    I've been meaning to clean them up and get them into my gituhb acct for awhile, seems something else always comes up... I'll add it to the upcoming holiday list Nov 24, 2015 at 23:31

3 Answers 3

11

A real quickie example of a UIPickerView: (iOS SDK)

enter image description here

Add a UIPickerView to your xib or Storyboard called slotMachineView:

using System;
using UIKit;

namespace Slots
{
    public partial class ViewController : UIViewController
    {
        public ViewController (IntPtr handle) : base (handle)
        {
        }

        public override void ViewDidLoad ()
        {
            base.ViewDidLoad ();
                slotMachineView.Model = new StackOverflowModel (selectedLbl);
        }

        public override void DidReceiveMemoryWarning ()
        {
            base.DidReceiveMemoryWarning ();
        }
    }

    public class StackOverflowModel : UIPickerViewModel
    {
        static string[] names = new string [] {
            "pscorlib.dll",
            "pscorlib_aot.dll",
            "Mono.PlayScript.dll",
            "PlayScript.Dynamic.dll",
            "PlayScript.Dynamic_aot.dll",
            "PlayScript.Optimization.dll",
            "playshell.exe",
            "psc.exe"
        };

        UILabel lbl;

        public StackOverflowModel (UILabel lbl)
        {
            this.lbl = lbl;
        }

        public override nint GetComponentCount (UIPickerView v)
        {
            return 3;
        }

        public override nint GetRowsInComponent (UIPickerView pickerView, nint component)
        {
            return names.Length;
        }

        public override string GetTitle (UIPickerView picker, nint row, nint component)
        {
            switch (component) {
            case 0:
                return names [row];
            case 1:
                return row.ToString ();
            case 2:
                return new string ((char)('A' + row), 1);
            default:
                throw new NotImplementedException ();
            }
        }

        public override void Selected (UIPickerView picker, nint row, nint component)
        {
            lbl.Text = String.Format ("{0} : {1} : {2}",
                names [picker.SelectedRowInComponent (0)],
                picker.SelectedRowInComponent (1),
                picker.SelectedRowInComponent (2));
        }

        public override nfloat GetComponentWidth (UIPickerView picker, nint component)
        {
            if (component == 0)
                return 220f;
            else
                return 30f;
        }
    }
}
6
  • @SushiHangover: Thanks for your sample code. I have 1 question. Suppose I have this scenario: First, I want to dynamically pop up a picker when user click on a button, and then let users select a value from a picker and then close that picker widget after users finish picking a value from the picker. Do you have any sample code for that scenario ? Oct 6, 2016 at 2:59
  • @SushiHangover: I have just created a new question for my technical issue that I mentioned in my previous comment above. If you have some free time, please take a look at this question at: stackoverflow.com/questions/39887140/… Oct 6, 2016 at 3:49
  • what is "selectedLbl" in this line of code : slotMachineView.Model = new StackOverflowModel (selectedLbl); in the ViewController class Sep 19, 2017 at 13:58
  • @JoeSleiman It is a UILabel that the code it updating as the user changes the picker values, review the constructor public StackOverflowModel (UILabel lbl) in the sample code Sep 19, 2017 at 14:02
  • sorry but i didn't understand if i add a picker view from storyboard the name of the picker is "slotMachineView" right ? and from where i get the "selectedLbl" Sep 19, 2017 at 14:07
1

Yes it is. The native iOS control is called UIPickerView

0
public class GenderPicker : UIViewController
{
    public TestVC() { }


    UITextField SelectGenderTextField = new UITextField();
    UIPickerView GenderPicker = new UIPickerView();

    public override void ViewDidLoad()
    {
        base.ViewDidLoad();
        AddTextField();
        GenderTextField();


        Constraint();
    }
}

Textfield To Show The Selected Data

    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.

    }

Gender Picker

    private void GenderTextField()
    {
        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
        };

     }

Constraints

    // Used Cirrious.FluentLayouts.Touch For Constraints
    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)


            );
    }

Picker Model 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);
    }


}

UIPickerView Example With TextField In Xamarin.iOS Gender Selecter

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.