Добавление цветного контура к тексту - PullRequest
Новая
       21

Добавление цветного контура к тексту

0 голосов
/ 30 апреля 2020

Я новичок в формах ксамарина и сейчас пытаюсь добавить схему к своему тексту здесь. Я не совсем уверен, как go об этом. Я считаю, что это может иметь какое-то отношение к пользовательскому рендереру. В настоящее время я пытался добавить цвет фона к тексту метки, но я предпочел бы, чтобы он был ближе к тексту.

enter image description here

Вот мой 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>

1 Ответ

0 голосов
/ 30 апреля 2020

Какой эффект ты хочешь? как показано ниже?

enter image description here

Если да, вы можете использовать CustomRederen для его достижения.

Для Android.

создание пользовательской метки OutLineLabel : 

public class OutLineLabel :Label
{
}

в Android проекте:

создание пользовательского 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);
    }
}

создать пользовательский рендерер 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);
        }
      }
    }
}

затем в page.a xml: 

<StackLayout BackgroundColor="Black">

    <local:OutLineLabel Text="Hellow World"> 
    </local:OutLineLabel>

</StackLayout>
...