Spacing for Label in Xamarin Forms

Question

I am learning the Xamarin Forms using XAML to create the interface for an app.

Is there any way to set the spacing between the text in Xamarin Forms?

I have tried to search for it on the xamarin website, but it only shows the solution using c#.

Answer 1

您可以创建一个将字符串作为值的转换器，并在 Convert() 方法中的字母之间添加空格。

Answer 2

You will have to make custom renderers on each platform to add kerning to a label.

Forms control:

public class KerningLabel : Label
{
    public static readonly BindableProperty KerningProperty = BindableProperty.Create(nameof(Kerning), typeof(double), typeof(KerningLabel), 0d);

    public double Kerning
    {
        get { return (double)GetValue(KerningProperty); }
        set { SetValue(KerningProperty, value); }
    }
}

iOS:

[assembly: ExportRenderer(typeof(KerningLabel), typeof(KerningLabelRenderer))]
namespace YourNamespace
{
    public class KerningLabelRenderer : LabelRenderer
    {
        private NSString _kerningAttribureName = new NSString("NSKern");

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

            if (e.NewElement != null && Control != null)
            {
                SetKerning();
            }
        }

        private void SetKerning()
        {
            var element = Element as KerningLabel;
            string text = Element.Text;
            if (string.IsNullOrEmpty(text))
            {
                Control.Text = string.Empty;
            }
            else
            {
                var attributedString = new NSMutableAttributedString(text);
                attributedString.AddAttribute(_kerningAttribureName, NSObject.FromObject(element.Kerning), new NSRange(0, text.Length - 1));
                Control.AttributedText = attributedString;
            }
        }

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);

            if (e.PropertyName == Xaml.KerningLabel.KerningProperty.PropertyName ||
                e.PropertyName == Label.TextProperty.PropertyName ||
                e.PropertyName == Label.TextColorProperty.PropertyName)
            {
                SetKerning();
            }
        }
    }
}

Android:

[assembly: ExportRenderer(typeof(KerningLabel), typeof(KerningLabelRenderer))]
namespace YourNamespace
{
    public class KerningLabelRenderer : LabelRenderer
    {
        public KerningLabelRenderer()
        {
            AutoPackage = false;
        }

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

            if(e.NewElement != null && Control != null)
            {
                SetKerning();
            }
        }

        private void SetKerning()
        {
            var element = Element as KerningLabel;
            if (element != null && Control != null)
            {
                Control.Text = element.Text;
                if (Build.VERSION.SdkInt >= BuildVersionCodes.Lollipop)
                {
                    Control.LetterSpacing = (float)((element.Kerning) / 10.0f);
                }
            }
        }

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);

            if (e.PropertyName == Xaml.KerningLabel.KerningProperty.PropertyName ||
                e.PropertyName == Xaml.KerningLabel.TextProperty.PropertyName)
            {
                SetKerning();
            }
        }
    }

Also, the LetterSpacing property was only added in Android on devices Lollipop and up.

Answer 3

Just use the LineHeight property of Label to set the height of a line as multiplier of the character size (as you know from Word or others). So it should look like this in XAML

<Label Text="Long text spanning at least 2 lines...", LineHeight = "1.5" />

and like this in C#

Label label = new Label { Text = "Long text spanning at least 2 lines...", LineHeight = 1.5 };