xamarincustom-renderer

Add padding to the right of the down arrow in a picker in ios renderer

I am adding a down arrow to the xamarin picker. I created a custom iOS renderer for this. I can get the arrow to show up fine, but it is touching the right hand side of the picker. How can I add some padding to the right of the arrow? I have tried the following in my ios renderer.

protected void UpdateBackground(UITextField control)
{
    if (control == null) return;
    control.Layer.CornerRadius = ElementV2.CornerRadius;
    control.Layer.BorderWidth = ElementV2.BorderThickness;
    control.Layer.BorderColor = ElementV2.BorderColor.ToCGColor();

    var downArrowLabel = new UILabel(new CoreGraphics.CGRect(new CoreGraphics.CGPoint(control.Frame.Size.Width - 20 - 16, 0), new CoreGraphics.CGSize(20, control.Frame.Size.Height)));
    downArrowLabel.Font = UIFont.FromName("FontAwesome", 30);
    downArrowLabel.Text = "\uf0d7";
    downArrowLabel.TextColor = UIColor.Black;
    downArrowLabel.TextAlignment = UITextAlignment.Center;
    downArrowLabel.ContentMode = UIViewContentMode.ScaleAspectFit;
    control.RightView = downArrowLabel;
    control.RightViewMode = UITextFieldViewMode.Always;
    control.RightView.Bounds = new CoreGraphics.CGRect(0, 0, 20 + 16, control.Frame.Size.Height);
}

enter image description here

Solution

  • I wrote a Picker renderer based on your code and tested it. I found that adding a few spaces after the Text can effectively solve this problem. It looks strange, but it works, like this

    downArrowLabel.Text = "\uf0d7      ";