Page 1 of 1

TextBlock margins

Posted: 13 Nov 2019, 16:14
by sofia.zaid_easylaser
Hello,
We have an element that is declared as following:
 <TextBlock x:Name="SubValue"     Grid.Row="2" Style="{StaticResource Style.TextBlock.Medium}" Background="Magenta" Margin="4,0,0,0" TextAlignment="Right" VerticalAlignment="Top" Text="-0.12"/>
Depending on the font size there is a margin on top of the text. We would like this margin to be smaller than it currently turns out to be. How can we achieve this?
See image below:

Image

Re: TextBlock margins

Posted: 14 Nov 2019, 13:13
by sfernandez
By margin do you mean the space between the number glyphs and the edge of the magenta rectangle?

Those bounds are determined by font line height, that you can adjust by using LineHeight and LineStackingStrategy properties:
<TextBlock Text="-0.12" TextAlignment="Right" VerticalAlignment="Top" Width="100"
    FontSize="30" Foreground="White" Background="Magenta"
    LineHeight="30" LineStackingStrategy="BlockLineHeight"/>
Another option that allows more control is to render the background using a Border and then adjust the TextBlock margins that can even be negative:
<Border Background="Magenta"  VerticalAlignment="Top" Width="100">
    <TextBlock Text="-0.12" TextAlignment="Right"
        FontSize="30" Foreground="White" Margin="0,-10,0,-7" />
</Border>

Re: TextBlock margins

Posted: 15 Nov 2019, 12:24
by sofia.zaid_easylaser
Hello,
Thanks, this solved it.

Re: TextBlock margins

Posted: 15 Nov 2019, 20:39
by sfernandez
Great, marking this post as solved.