Picker renderer for iOS Xamarin.Forms?

Question

I'm new to Xamarin.Forms programming. Would like to customize/change the way the Picker

In the picture: -Button with the text 'Select', when clicked calls picker.Focus() -Picker with both black background and text colors behind the select button -Empty ListView -The picker options wheel pane, pops up when a picker is 'Focused'

Picker implementation code:

Picker picker = new Picker
{
    HorizontalOptions = LayoutOptions.Start,
    VerticalOptions = LayoutOptions.Center,
    WidthRequest = 73,
    HeightRequest = 25,
    BackgroundColor = Color.Black,
    TextColor = Color.Black
};

List<string> myList = new List<string>();
myList.Add("OPTIONS 1");
myList.Add("OPTIONS 2");
myList.Add("OPTIONS 3");
myList.Add("OPTIONS 4");
myList.Add("OPTIONS 5");

foreach (string str in myList)
{
    picker.Items.Add(str);
}

Code customizes the 'box' that a user clicks to bring the picker options wheel pane into view, but doesn't (or at least appear to) offer any options for customizing the picker pane.

How to place the picker wheel pop-up pane inside of the ListView? How to change font size of the options inside the picker wheel and change the height of the pane displaying the options?

tl;dr - How to change picker pane height, item font size, pane placement?

This is as far as I've gotten...

using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

using AppName.iOS;
using AppName;

[assembly: ExportRenderer(typeof(MyPicker), typeof(MyPickerRenderer))]
namespace AppName.iOS
{
    public class MyPickerRenderer : PickerRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
        {
            base.OnElementChanged(e);

            if (e.OldElement != null)
            {
                // Unsubscribe from event handlers and cleanup any resources
            }

            if (e.NewElement != null)
            {
                // Configure the native control and subscribe to event handlers
            }
        }
    }
}

Answer 1

The picker wheel in iOS called UIPickerView we can get this contol in renderer like:

UITextField textField = Control;
UIPickerView pickerView = textField.InputView as UIPickerView;

Then we can customize this just as what you want using Delegate .

Firstly we should get the dataSource in your case we can get it like:

Picker myPicker = Element;
itemList = myPicker.Items.ToList();

Secondly create the delegate and set the list as parameter:

pickerView.Delegate = new MyPickerViewDelegate(itemList);

public class MyPickerViewDelegate: UIPickerViewDelegate
{

    List<string> itemList;

    public MyPickerViewDelegate(List<string> list)
    {
        itemList = list;
    }
}

At last we can begin customizing with the events below:

//Define the Font size or style
public override NSAttributedString GetAttributedTitle(UIPickerView pickerView, nint row, nint component)
{
    var text = new NSAttributedString(
        itemList[(int)row],
        font: UIFont.SystemFontOfSize(24),
        foregroundColor: UIColor.Red,
        strokeWidth: 4
    );

    return text;
}
//Define the row height
public override nfloat GetRowHeight(UIPickerView pickerView, nint component)
{
    return 80;
}

Moreover if you want to customize more flexible(including placement), you can use following method:

public override UIView GetView(UIPickerView pickerView, nint row, nint component, UIView view)
{
    UIView contentView = new UIView(new CGRect(0, 0, UIScreen.MainScreen.Bounds.Size.Width, 80));

    UILabel label = new UILabel();
    label.Frame = contentView.Bounds;
    contentView.AddSubview(label);

    label.Text = itemList[(int)row];
    //Change the label style
    label.Font = UIFont.SystemFontOfSize(24);
    label.TextColor = UIColor.Red;

    return contentView;
}

Here is my custom renderer for you referring to:

public class MyPickerRenderer : PickerRenderer
{
    List<string> itemList;
    protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
    {
        base.OnElementChanged(e);

        Picker myPicker = Element;
        itemList = myPicker.Items.ToList();

        UITextField textField = Control;
        UIPickerView pickerView = textField.InputView as UIPickerView;
        pickerView.Delegate = new MyPickerViewDelegate(itemList);
    }
}

Answer 2

You will have to create your own implementation of the a UiPickerView . That will allow you to set the font size using this guide or this one. As for the height and placement; it appears that you can set the placement but the height is a bit more difficult and I can only find examples in objective C or swift.

Best of luck!