Set the font line height of a Xamarin.Forms Label

Question

I have a Xamarin.Forms label showing several lines of text and I would like to increase the line height to make the text more readable.

The font properties available on the Label and Span controls seem limited to font face, size and style.

How can I change the line height?

Answer 1

I was able to get it to work by defining a custom renderer like the following. First, in your Forms project (PCL), define a custom label and add a LineHeight property:

// Put this your forms project
public class CustomLabel : Label
{
    public double LineHeight { get; set; }
}

Then, in your iOS project, you define the renderer like this:

// Put this in your iOS project
[assembly: ExportRenderer(typeof(CustomLabel), typeof(CustomLabelRenderer))]
namespace MyNamespace
{ 
    public class CustomLabelRenderer : LabelRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
        {
            base.OnElementChanged(e);

            // Make sure control is not null
            var label = (CustomLabel)Element;
            if (label == null || Control == null)
            {
                return;
            }

            var labelString = new NSMutableAttributedString(label.Text);
            var paragraphStyle = new NSMutableParagraphStyle { LineSpacing = (nfloat)label.LineHeight };
            var style = UIStringAttributeKey.ParagraphStyle;
            var range = new NSRange(0, labelString.Length);

            labelString.AddAttribute(style, paragraphStyle, range);
            Control.AttributedText = labelString;
        }
    }
}

Finally, you would use it on your page like so:

new Label {
    Text = "some text",
    LineHeight = 20
}

Answer 2

You'll need a custom control and render that can inherit from the existing ones and handle additional properties. As for iOS (idk about Android) you can use

// this goes in the Forms project
public class CustomLabel : Label{
  // make it bindable, shortened for simplicity here
  public double LineHeight {get;set;}
}

// this goes in the iOS project, another one in the Android project
// notice the attribute is before the namespace
[assembly: ExportRendererAttribute (typeof(CustomLabel), typeof(CustomLabelRenderer))]
namespace MyNamespace{
public class CustomLabelRenderer: LabelRenderer
  protected override void OnElementChanged (ElementChangedEventArgs<Frame> e){
    base.OnElementChanged(e);
  // sample only; expand, validate and handle edge cases as needed
    ((UILabel)base.Control).Font.LineHeight = ((CustomLabel)this.Element).LineHeight;
  }

  // if your property is bindable you can handle changes in this method:
  // protected override void OnElementPropertyChanged (object sender, System.ComponentModel.PropertyChangedEventArgs e)
}

As far as iOS (idk if Android has that feature) you can also use the UIAppearance of a UILabel to increase line height throughout the app, something in the lines of:

UILabel.Appearance.Font.LineHeight = 20f;