Search code examples
xamlxamarinxamarin.formstimepickerpicker

Picker with two selection columns with numbers in Xamarin.Forms

I need to make a picker like this in the picture below:

enter image description here

What you see is a TimePicker and I took it just to give you an example. I would like to have one with about 200 numbers on the left and 100 on the right (for example). How can I do it in a Xamarin.Forms PCL project?

Solution

  • The first problem you'll face is that the picker control you see here is a native iOS control. The Xamarin.Forms TimePicker is basically not a physical control in itself but it translates to a native control on each platform. That's why it will look different on Android and UWP devices because they provide their own picker controls, as seen in the picture below.

    enter image description here

    Now, if you're ok with the controls looking different, you could use custom renderers to modify each native control or even replace them to provide the functionality you need. I thought I'd outline the basic steps for you to get you started:

    1. Create a new Xamarin.Forms control called CustomPicker or something.
    2. Create custom renderers for each platform.
    3. On iOS, you can use the UIPickerView and specify numberOfComponents, numberOfRows and the data source.
    4. On Android, you might want to use a 3rd party control since by default, there are no scrolling picker controls like the one on iOS. WheelPicker looks promising.
    5. On UWP, you might be able to work something out using the PickerFlyoutBase. I have limited knowledge on the platform but you should be able to find something quite easily.

    As you can see, it's going to be quite an effort to get the scroll picker working on each platform.

    Edit: You could also look into native embedding, which lets you embed native controls into Xamarin.Forms app's pages.

    Native Embedding

    Embedding native controls into Xamarin.Forms