How can I add border/outline for label text?

Issue

I need to add borders for captions in my application, what's the best way to do it? I've tried using outline fonts (examples) but they are transparent and I need white text with black border.

Solution

You could use custom renderer to achieve this effect.

For ios:

create a custom OutLineLabel which extends UILabel in ios project.

public class OutLineLabel:UILabel
{

    public OutLineLabel(string text)
    {
        this.Text = text;
    }
    public override void DrawText(CGRect rect)
    {
  
        CGSize shadowOffset = this.ShadowOffset;
        UIColor  textColor = UIColor.White;  //the text color


        CGContext c = UIGraphics.GetCurrentContext();
        c.SetLineWidth(2);
        c.SetLineJoin(CGLineJoin.Round);
        c.SetTextDrawingMode(CGTextDrawingMode.Stroke);
        this.TextColor = UIColor.Black;    //the outline border color
        base.DrawText(rect);

        c.SetTextDrawingMode(CGTextDrawingMode.Fill);
        this.TextColor = textColor;
        this.ShadowOffset = new CGSize(0, 0);
        base.DrawText(rect);
        this.ShadowOffset = shadowOffset; 
    }
}

create custom renderer OutLineLabelRenderer in ios project

[assembly: ExportRenderer(typeof(Label), typeof(OutLineLabelRenderer))]
namespace your namespace
{
  class OutLineLabelRenderer:LabelRenderer
  {
    protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
    {
        base.OnElementChanged(e);
        OutLineLabel outLineLabel = new OutLineLabel(Element.Text);
        SetNativeControl(outLineLabel);
    }
  }
}

For android

You could refer to this link.

Answered By - Leo Zhu - MSFT