xamarin forms custom rendered picker

Question

I created a custom picker in order to have a control that has a frame with thickness, a clear button, and a arrow button

public class BorderlessPicker : Picker
{
    public static BindableProperty CornerRadiusProperty =
          BindableProperty.Create(nameof(CornerRadius), typeof(int), typeof(BorderlessPicker), 0);

    public static BindableProperty BorderThicknessProperty =
        BindableProperty.Create(nameof(BorderThickness), typeof(int), typeof(BorderlessPicker), 0);

    public static BindableProperty PaddingProperty =
        BindableProperty.Create(nameof(Padding), typeof(Thickness), typeof(BorderlessPicker), new Thickness(5));

    public static BindableProperty BorderColorProperty =
        BindableProperty.Create(nameof(BorderColor), typeof(Color), typeof(BorderlessPicker), Color.Transparent);

    public static readonly BindableProperty ImageProperty =
    BindableProperty.Create(nameof(Image), typeof(string), typeof(BorderlessPicker), string.Empty);

    public string Image
    {
        get { return (string)GetValue(ImageProperty); }
        set { SetValue(ImageProperty, value); }
    }
    public int CornerRadius
    {
        get => (int)GetValue(CornerRadiusProperty);
        set => SetValue(CornerRadiusProperty, value);
    }

    public int BorderThickness
    {
        get => (int)GetValue(BorderThicknessProperty);
        set => SetValue(BorderThicknessProperty, value);
    }
    public Color BorderColor
    {
        get => (Color)GetValue(BorderColorProperty);
        set => SetValue(BorderColorProperty, value);
    }
    /// <summary>
    /// This property cannot be changed at runtime in iOS.
    /// </summary>
    public Thickness Padding
    {
        get => (Thickness)GetValue(PaddingProperty);
        set => SetValue(PaddingProperty, value);
    }

    public BorderlessPicker()
    {
        this.BackgroundColor = Color.Transparent;
    }

   

}

The custom renderer in order to clear the background:

  public class BorderlessPickerRenderer : PickerRenderer
{
    public BorderlessPickerRenderer(Context context) : base(context)
    {
    }
    protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
    {            
        base.OnElementChanged(e);
        if (e.OldElement == null)
        {
            Control.Background = null;
        }
    }

}

When i open the picker i get a "halfscreen" list, with most of the items hiden from the user. Something like this:

What i want is when i open the picker i get the default "fullscreen" :

Is it possible?

Ivan Ičin Ivan Ičin · Accepted Answer · 2020-11-26T16:02:01

Everything is possible, but custom things mean more work.

On Android Picker is based on the Android's Picker control and on iOS it is a combination of UIPickerView and UITextField linked together.

So if you want to change current Picker it is limited by what is possible by those underlying controls. And what you request is not possible from that aspect.

However no one prevents you from having a button (or some other control) that opens the full screen pop-up where you can pick the value.

xamarin forms custom rendered picker

2 Answers