Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

Custom Renderer Picker (only underline)

HamittirpanHamittirpan Member ✭✭✭✭
edited May 16 in Xamarin.Forms

Hi everyone !

I am currently using an custom picker with right side icon in my project. This custom picker works fine, i can add icons to my picker right now. But this picker contains border.

I want this custom picker to just have a line under it. Is there a way to do this?

My Custom Renderer code;

Anroid

public class GuncePickerWithRightSideIconRenderer : PickerRenderer
    {
        GuncePickerWithRightSideIcon element;

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

            element = (GuncePickerWithRightSideIcon)this.Element;

            if (Control != null && this.Element != null && !string.IsNullOrEmpty(element.Image))
            {
                Control.Background = AddPickerStyles(element.Image);
            }

        }

        public LayerDrawable AddPickerStyles(string imagePath)
        {

            ShapeDrawable border = new ShapeDrawable();
            border.Paint.Color = Android.Graphics.Color.Gray;
            border.SetPadding(10, 10, 10, 10);
            border.Paint.SetStyle(Paint.Style.Stroke);
            Drawable[] layers = { border, GetDrawable(imagePath) };
            LayerDrawable layerDrawable = new LayerDrawable(layers);
            layerDrawable.SetLayerInset(0, 0, 0, 0, 0);

            return layerDrawable;
        }

        private BitmapDrawable GetDrawable(string imagePath)
        {
            int resID = Resources.GetIdentifier(imagePath.ToLower(), "drawable", this.Context.PackageName);
            var drawable = ContextCompat.GetDrawable(this.Context, resID);
            var bitmap = ((BitmapDrawable)drawable).Bitmap;

            var result = new BitmapDrawable(Resources, Bitmap.CreateScaledBitmap(bitmap, 10, 10, true));
            result.Gravity = Android.Views.GravityFlags.Right;

            return result;
        }
    }

iOS

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

            var element = (GuncePickerWithRightSideIcon)this.Element;

            if (this.Control != null && this.Element != null && !string.IsNullOrEmpty(element.Image))
            {
                var downarrow = UIImage.FromBundle(element.Image);
                Control.RightViewMode = UITextFieldViewMode.Always;
                Control.RightView = new UIImageView(downarrow);
            }
        }

Thanks in advance !

Answers

  • NMackayNMackay GBInsider, University admin

    Maybe use sfComboxBox instead and safe yourself some time.
    https://help.syncfusion.com/xamarin/combobox/customizing-combobox

  • LandLuLandLu Member, Xamarin Team Xamurai

    Android Picker has a default style with an underline do you want to implement this on iOS?
    If so, try to modify your custom renderer on iOS:

    [assembly: ExportRenderer(typeof(Picker), typeof(CustomPickerRenderer))]
    namespace Sample.iOS
    {
        public class CustomPickerRenderer : PickerRenderer
        {
            CALayer bottomLine;
            protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
            {
                base.OnElementChanged(e);
    
                if (Control != null)
                {
                    var downarrow = UIImage.FromBundle(element.Image);
                    Control.RightViewMode = UITextFieldViewMode.Always;
                    Control.RightView = new UIImageView(downarrow);
    
                    // Add bottom border
                    bottomLine = new CALayer();
                    bottomLine.BackgroundColor = UIColor.Black.CGColor;
                    Control.BorderStyle = UITextBorderStyle.None;
                    Control.Layer.AddSublayer(bottomLine);
                }
            }
    
            public override void Draw(CGRect rect)
            {
                base.Draw(rect);
    
                bottomLine.Frame = new CGRect(0, Control.Frame.Height - 1, Control.Frame.Width, 1);
            }
        }
    }
    
Sign In or Register to comment.