How can I add border/outline for label text? - xaml

Question

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.

Answer 1

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.