Adding colored outline to text - text

Question

I am newer to xamarin forms and I am currently trying to add an outline to my text here. I am not quite sure how to go about it. I believe it may have something to do with a custom renderer. I have currently attempted to add a background color to the label text but id prefer it to stick more closely to the text.
Here is my main.xaml
<StackLayout>
<Grid Padding="40 "/>
<Label VerticalOptions="StartAndExpand" HorizontalOptions="CenterAndExpand" Text="Plural Buddy" TextColor="#000000" BackgroundColor="FloralWhite" FontFamily=" { StaticResource CustomFont3}" FontSize="Large" Padding="0" />
<Button VerticalOptions="StartAndExpand" HorizontalOptions="CenterAndExpand" Text="Get Started" BorderColor= "AntiqueWhite" FontFamily=" { StaticResource CustomFont3}" />
</StackLayout>
</ContentPage>

Answer 1

What effect do you want ? like below ?
If yes,you could use CustomRederen to achieve it.
For Android.
create custom label OutLineLabel :
public class OutLineLabel :Label
{
}
in Android project:
create a custom TextView StrokeTextView:
class StrokeTextView : TextView
{
private TextView borderText = null;
public StrokeTextView (Context context) : base(context)
{
borderText = new TextView(context);
init();
}
public StrokeTextView(Context context,IAttributeSet attrs) : base(context,attrs)
{
borderText = new TextView(context, attrs);
init();
}
public StrokeTextView(Context context, IAttributeSet attrs,int defStyle) : base(context, attrs,defStyle)
{
borderText = new TextView(context, attrs, defStyle);
init();
}
public void init()
{
TextPaint tp1 = borderText.Paint;
tp1.StrokeWidth =5; // sets the stroke width
tp1.SetStyle(Style.Stroke);
borderText.SetTextColor(Color.White); // set the stroke color
borderText.Gravity = Gravity;
}
public override ViewGroup.LayoutParams LayoutParameters { get => base.LayoutParameters; set => base.LayoutParameters = value; }
protected override void OnMeasure(int widthMeasureSpec, int heightMeasureSpec)
{
string tt = borderText.Text;
if (tt == null || !tt.Equals(this.Text))
{
borderText.Text = Text;
this.PostInvalidate();
}
base.OnMeasure(widthMeasureSpec, heightMeasureSpec);
borderText.Measure(widthMeasureSpec, heightMeasureSpec);
}
protected override void OnLayout(bool changed, int left, int top, int right, int bottom)
{
base.OnLayout(changed, left, top, right, bottom);
borderText.Layout(left, top, right, bottom);
}
protected override void OnDraw(Canvas canvas)
{
borderText.Draw(canvas);
base.OnDraw(canvas);
}
}
create custom renderer MyOutLineTextView:
[assembly: ExportRenderer(typeof(OutLineLabel), typeof(MyOutLineTextView))]
namespace EntryCa.Droid
{
class MyOutLineTextView : LabelRenderer
{
Context context;
public MyOutLineTextView(Context context):base(context)
{
this.context = context;
}
protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
{
base.OnElementChanged(e);
if (Control !=null)
{
StrokeTextView strokeTextView = new StrokeTextView(context);
strokeTextView.Text = e.NewElement.Text;
strokeTextView.SetTextColor(Android.Graphics.Color.Purple);
SetNativeControl(strokeTextView);
}
}
}
}
then in page.axml:
<StackLayout BackgroundColor="Black">
<local:OutLineLabel Text="Hellow World">
</local:OutLineLabel>
</StackLayout>