0

How can I vertical center text in a surrounding element? And/or let the char take up the complete height of the label, without 'ascent' and 'descent'? Aka let Label render the char without 'ascent' and 'descent'.

enter image description here Source

The primitive attempt does not work. The char is too low.
The default view enter image description here
Label with visible background
makes the reason obvious
the label/font consist of more vertical area than the char		 enter image description here
with VerticalTextAlignment="Center" on the label
only minimal better		 enter image description here
tried Clip, but centering is done on the original height (before clip)
<Label.Clip><RectangleGeometry Rect="0,20,100,70" /></Label.Clip>		 enter image description here
Including other chars, makes it obvious,
why it behaves like that
some chars need the space over or below the "main char"
that's just how fonts work.		 enter image description here

Code:

<Grid WidthRequest="100" HeightRequest="100"
    BackgroundColor="HotPink">
    <Ellipse Fill="#1A1A1A"
        HorizontalOptions="FillAndExpand"
        VerticalOptions="FillAndExpand" />
    <Label x:Name="numberElm" 
        FontSize="80"
        FontAttributes="Bold" 
        Text="3" 
        VerticalOptions="Center" 
        HorizontalOptions="Center"
        TextColor="White"
        BackgroundColor="Transparent"
        />
</Grid>

Ideally there would be an option to render the number without the extra vertical space. I didn't find any api or property for that.

The quick and dirty solution i've found is a negative margin like 0,-10,0,0.

It's kinda similar to this question for wpf: TextBlock as big as a capital letter (ignoring font ascender/descender)

juwens
  • 3,729
  • 4
  • 31
  • 39
  • 1
    `VerticalTextAlignment="Center"` – Jason Feb 19 '21 at 19:57
  • @Jason thanks. Included it in the question. Sadly it improves the problem only very slightly. As you can see in the added screenshot. – juwens Feb 19 '21 at 20:04
  • I know almost nothing on Xamarin XAML, is there a `line-height` property somewhere? – mxmissile Feb 19 '21 at 20:06
  • @mxmissile sadly no. lineheigt can only be increased, not decreased. – juwens Feb 19 '21 at 20:17
  • What if you added a margin-bottom to numberElm? – mxmissile Feb 19 '21 at 20:22
  • 1
    @mxmissile that works, it's the nicer equivalent of my workaround `margin-top=-10` I was hoping for a "technical correct" solution which works for any font, parent-container-size. In fancy graphics tools, you usually have exactly this functionality, the char is handled kinda like a vector-graphic and can be centered 100% perfectly. – juwens Feb 19 '21 at 20:38

0 Answers0