Can't set TextColor after using Custom Text Stroke Renderer Xamarain.Forms

Question

I have this Custom Text Stroke Renderer in my project, but after using it I can no longer manually set or bind my TextColor with Hex Colors or System Color Options in XAML and ViewModel. My text always has default TextColor which is Gray.

#CustomTextStroke.cs

namespace Project11.CustomForms
{
  public class CustomTextStroke : Label
  {
  }
}

#StrokeTextView.cs

namespace Project11.CustomForms
{
  public 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);
    }
  }
}

#CustomTextStrokeRenderer

[assembly: ExportRenderer(typeof(CustomTextStroke), typeof(CustomTextStrokeRenderer))]
namespace Project11.Droid.CustomRenderer
{
  public class CustomTextStrokeRenderer : LabelRenderer
  {
    Context context;

    public CustomTextBorderRenderer(Context context) : base(context)
    {
        this.context = context;
    }
    protected override void OnElementChanged(ElementChangedEventArgs e)
    {
        base.OnElementChanged(e);
        if (Control != null)
        {
           
            StrokeTextView strokeTextView = new StrokeTextView(context);
            strokeTextView.Text = e.NewElement.Text;
            SetNativeControl(strokeTextView);
        }
    }
  }
}

#XAML

user_10867491 · Answer

You can create a customLabel control like following code.

Made a example of this on Github github.com/borisoprit/Textstrokecolor

In the IOS, you can use following custom renderer to achieve it.

Ad this above namespace [assembly: ExportRenderer(typeof(MyCustomLabel), typeof(MyLabelRenderer))]

class MyLabelRenderer : LabelRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs e)
    {
        base.OnElementChanged(e);

        MyCustomLabel myCustomLabel = Element as MyCustomLabel;


        if (Control != null)
        {
            UIStringAttributes strokeTextAttributes = new UIStringAttributes();
            // Here is set the StrokeColor

            strokeTextAttributes.StrokeColor = Color.FromHex(myCustomLabel.StrokeColor).ToUIColor(); ;
            //Here is set the StrokeThickness, IOS is diferert from the android, it border is set to the inside the font.
            strokeTextAttributes.StrokeWidth = -1 * myCustomLabel.StrokeThickness;

            Control.AttributedText = new NSAttributedString(Control.Text, strokeTextAttributes);
           //Control.TextColor = UIColor.Black;
            Control.TextColor = UIColor.Yellow;
        }
    }
}

In the Android custom renderer like following code.

Add this above namespace [assembly: ExportRenderer(typeof(MyCustomLabel), typeof(MyLabelRenderer))]

 public class MyLabelRenderer : LabelRenderer
{
    Context context;
    public MyLabelRenderer(Context context) : base(context)
    {
        this.context = context;
    }




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

        MyCustomLabel customLabel = (MyCustomLabel)Element;
        var StrokeTextViewColor = customLabel.StrokeColor;

        int StrokeThickness = customLabel.StrokeThickness;
        if (Control != null)
        {

            StrokeTextView strokeTextView = new StrokeTextView(context, Control.TextSize, StrokeTextViewColor, StrokeThickness);
            strokeTextView.Text = e.NewElement.Text;
            strokeTextView.SetTextColor(Control.TextColors);

            SetNativeControl(strokeTextView);
        }
    }
}

Ad this class in main

public class MyCustomLabel : Label
{


    public static readonly BindableProperty StrokeColorProperty = BindableProperty.CreateAttached("StrokeColor", typeof(string), typeof(MyCustomLabel), "");
    public string StrokeColor
    {
        get { return base.GetValue(StrokeColorProperty).ToString(); }
        set { base.SetValue(StrokeColorProperty, value); }
    }

    public static readonly BindableProperty StrokeThicknessProperty = BindableProperty.CreateAttached("StrokeThickness", typeof(int), typeof(MyCustomLabel), 0);
    public int StrokeThickness
    {
        get { return (int)base.GetValue(StrokeThicknessProperty); }
        set { base.SetValue(StrokeThicknessProperty, value); }
    }
}

And this one Android

class StrokeTextView : TextView
{
    private TextView borderText = null;
    float OriTextSize;
    public StrokeTextView(Context context, float OriTextSize, string StrokeTextViewColor, int StrokeThickness) : base(context)
    {
        borderText = new TextView(context);

        borderText.TextSize = OriTextSize;
        this.TextSize = OriTextSize;

        init(StrokeTextViewColor, StrokeThickness);
    }
    public void init(string StrokeTextViewColor, int StrokeThickness)
    {
        TextPaint tp1 = borderText.Paint;
        tp1.StrokeWidth = StrokeThickness;         // sets the stroke width                        
        tp1.SetStyle(Style.Stroke);
        borderText.SetTextColor(Color.ParseColor(StrokeTextViewColor));  // 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);
    }
}

And use like this in xaml

Can't set TextColor after using Custom Text Stroke Renderer Xamarain.Forms

1 Answers