Custom Renderer for Picker in Xamarin.Forms

Question

I want to customize my picker. I created a custom renderer for my picker but I dont know how the customization settings. How can I change the font style and size of the item? and How can I remove the two lines?

public class CustomPickerRenderer : PickerRenderer
{
    public CustomPickerRenderer(Context context) : base(context)
    {
        AutoPackage = false;
    }

    protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
    {
        base.OnElementChanged(e);
        if (e.OldElement == null)
        {
            Control.Background = null;
            var layoutParams = new MarginLayoutParams(Control.LayoutParameters);
            layoutParams.SetMargins(0, 0, 0, 0);
            Control.LayoutParameters = layoutParams;
            Control.SetPadding(0, 0, 0, 0);
            SetPadding(0, 0, 0, 0);
        }
    }
}

Answer 1

If you want to set the fontSize of the text , you first need to customize a subclass extends from NumberPicker and overwrite the method AddView .

 public class TextColorNumberPicker: NumberPicker
{
    public TextColorNumberPicker(Context context) : base(context)
    {

    }

    public override void AddView(View child, int index, ViewGroup.LayoutParams @params)
    {
        base.AddView(child, index, @params);
        UpdateView(child);
    }

    public void UpdateView(View view)
    {
        if ( view is EditText ) {

            //set the font of text
            ((EditText)view).TextSize = 8;
        }
    }
}

If you want to remove the lines,you should rewrite the NumberPicker

in Android Custom Renderer

public class MyAndroidPicker:PickerRenderer
{

    IElementController ElementController => Element as IElementController;


    public MyAndroidPicker()
    {

    }


    private AlertDialog _dialog;

    protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
    {
        base.OnElementChanged(e);

        if (e.NewElement == null || e.OldElement != null)
            return;

        Control.Click += Control_Click;
    }

    protected override void Dispose(bool disposing)
    {
        Control.Click -= Control_Click;
        base.Dispose(disposing);
    }


    private void SetPickerDividerColor(TextColorNumberPicker picker)
    {
        Field[] fields = picker.Class.GetDeclaredFields();

        foreach (Field pf in fields)
        {
            if(pf.Name.Equals("mSelectionDivider"))
            {
                pf.Accessible = true;
                // set the color as transparent
                pf.Set(picker, new ColorDrawable(this.Resources.GetColor(Android.Resource.Color.Transparent)));

            }
        }

    }


    private void Control_Click(object sender, EventArgs e)
    {

        Picker model = Element;

        var picker = new TextColorNumberPicker(Context);
        if (model.Items != null && model.Items.Any())
        {

            picker.MaxValue = model.Items.Count - 1;
            picker.MinValue = 0;
            picker.SetBackgroundColor(Android.Graphics.Color.Yellow);
            picker.SetDisplayedValues(model.Items.ToArray());

            //call the method after you setting DisplayedValues
            SetPickerDividerColor(picker);
            picker.WrapSelectorWheel = false;
            picker.Value = model.SelectedIndex;
        }

        var layout = new LinearLayout(Context) { Orientation = Orientation.Vertical };
        layout.AddView(picker);

        ElementController.SetValueFromRenderer(VisualElement.IsFocusedProperty, true);

        var builder = new AlertDialog.Builder(Context);
        builder.SetView(layout);

        builder.SetTitle(model.Title ?? "");
        builder.SetNegativeButton("Cancel  ", (s, a) =>
        {
            ElementController.SetValueFromRenderer(VisualElement.IsFocusedProperty, false);
            // It is possible for the Content of the Page to be changed when Focus is changed.
            // In this case, we'll lose our Control.
            Control?.ClearFocus();
            _dialog = null;
        });
        builder.SetPositiveButton("Ok ", (s, a) =>
        {
            ElementController.SetValueFromRenderer(Picker.SelectedIndexProperty, picker.Value);
            // It is possible for the Content of the Page to be changed on SelectedIndexChanged.
            // In this case, the Element & Control will no longer exist.
            if (Element != null)
            {
                if (model.Items.Count > 0 && Element.SelectedIndex >= 0)
                    Control.Text = model.Items[Element.SelectedIndex];
                ElementController.SetValueFromRenderer(VisualElement.IsFocusedProperty, false);
                // It is also possible for the Content of the Page to be changed when Focus is changed.
                // In this case, we'll lose our Control.
                Control?.ClearFocus();
            }
            _dialog = null;
        });

        _dialog = builder.Create();
        _dialog.DismissEvent += (ssender, args) =>
        {
            ElementController?.SetValueFromRenderer(VisualElement.IsFocusedProperty, false);
        };
        _dialog.Show();
    }

}

Answer 2

I also used this CustomRenderer which was posted before only instead of overriding it you can change the properties like this.

private void Control_Click(object sender, EventArgs e)
        {
            Picker model = Element;

            var picker = new MyNumberPicker(Context);
            if (model.Items != null && model.Items.Any())
            {
                // set style here
                picker.MaxValue = model.Items.Count - 1;
                picker.MinValue = 0;
                picker.SetBackgroundColor(Android.Graphics.Color.Transparent);
                picker.SetDisplayedValues(model.Items.ToArray());

                


                //call the method after you setting DisplayedValues

                SetPickerDividerColor(picker);
                picker.WrapSelectorWheel = false;
                              
                picker.Value = model.SelectedIndex;
                
                // change Text Size and Divider
                picker.TextSize = 30;
                picker.SelectionDividerHeight = 1;
                


            }