It is not clear how the "LineHeight" property works for the "Label" element

валера карманов 396 Reputation points
2024-10-03T07:44:35.64+00:00

Contains code for the class "DataTemplate"

var offerPrice = new Label {
	FontSize = 40, LineHeight = -2,
	BackgroundColor = Color.FromArgb("#fff")
};

offerPrice.SetBinding(Label.TextProperty, "price");

return new Border {
	Margin = new Thickness(15, 10),
	Padding = new Thickness(20),
	Stroke = Color.FromArgb("#8e70c1"),
	BackgroundColor = Color.FromArgb("#ccc"),
	// StrokeShape = new RoundRectangle { CornerRadius = 3 }
	Content = offerPrice
};

This is what it looks like2024-10-03_10-42-37

It is not clear what to specify in the "LineHeight" property so that the line height matches the text size?

.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
3,587 questions
{count} votes

1 answer

Sort by: Most helpful
  1. Bruce (SqlWork.com) 66,461 Reputation points
    2024-10-08T20:55:17.42+00:00

    first you must understand font typography. there are several measurements of a font

    • font point size (size of font matrix)
    • baseline (imagery line under font characters
    • Capital height (how high capital letters are above the base line)
    • x height (how high lower case letters are above the baseline)
    • ascender height. (how height above the x-height) some characters (say lower case f or $) have an ascender that may be above the height of a capital letter
    • descender height. how much below the baseline a descender is (say lower part of lowercase y or g).
    • bearing height. the space above and below the ascender and descender height to give a natural space to font characters when leading (line-height) matches font size.
    • bounding box. the box that contains the font text. the height is the total of the x height, ascender height, descender height, above bearing and below bearing height. the width of the box is sum of the width of the characters. kerning will effect the combined width of multiple characters in the text line.

    line height (know as leading) is the measurement between baselines of two lines of text. fonts are typically designed so that if the line height matches the font size, the ascenders will not touch descenders of the line above (see bearing height).

    changing the line height moves the y-position of the font text line up or down, but does not change the font size.

    your example shows the font vertically centered in the label. the space you see above and below the numbers are the ascender, descender and bearing heights which define the bounding box. if settable by the O/S, the line height would change the gray area above and below the font in the label. but not the size of the bounding box (white area)

    note: as you have a single line in a label, only on IOS will line height make a difference.

    1 person found this answer helpful.
    0 comments No comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.