Search code examples
xamarinxamarin.formspickerrenderer

xamarin forms custom rendered picker


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

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: enter image description here

What i want is when i open the picker i get the default "fullscreen" : enter image description here

Is it possible?


Solution

  • You will have to use AppCompact PickerRenderer

    public class BorderlessPickerRenderer : Xamarin.Forms.Platform.Android.AppCompat.PickerRenderer
        {
            public BorderlessPickerRenderer(Context context) : base(context)
            {
            }
    
            protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
            {
                base.OnElementChanged(e);
                Control.Background = null;
            }
    
        }