Border fail to size to Textblock

Question

In an attempt to go around the problem described in this other question: Segoe UI Symbol smiley is sometimes colorful, sometimes not (WP8.1 + XAML), I tried the following: wrapping my Textblock with a Border element with rounded-corners (high CornerRadius). This way I can change the background color of the border and it looks pretty much as if the smiley had a background color itself... almost.

There is still a small gotcha I cannot wrap my head around: the height of the TextBlock seems to be out of my control. The "Segoe UI Symbol" (smiley) I want to display acts as if it had some kind of padding that prevented the border to fit the icon exactly. I end up with some kind of oval shape around my round smiley... not quite what I had in mind.

I stripped the XAML to its bare essence and played with it in a new blank app (just paste this in a new app, you should see exactly the screenshot below):

<Grid>
    <Border Background="Red" Grid.Column="0" 
            CornerRadius="50" BorderThickness="0" 
            HorizontalAlignment="Center" VerticalAlignment="Center">
        <TextBlock Text="&#x1F620;" 
                   FontFamily="Segoe UI Symbol" FontSize="50" 
                   HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Border>
</Grid>

This gives you that:

Any idea what I can tweak there?

Answer 1

The problem is that the text (emoticon) has not the same height and width. You can do a custom fix by applying a custom style to the textbox and change its padding until you achieve the result you want. It's not a dynamic solution but if the size of the icon is standard this solution i think will work.

First of all create a new style:

<phone:PhoneApplicationPage.Resources>
    <Style x:Key="CustomTextBlockStyle" TargetType="TextBlock">
        <Setter Property="Padding" Value="10,0,10,3"/>
    </Style>
</phone:PhoneApplicationPage.Resources>

Then apply it to the TextBlock

<Grid>
    <Border Background="Red" Grid.Column="0" 
CornerRadius="50" BorderThickness="0" 
HorizontalAlignment="Center" VerticalAlignment="Center">
        <TextBlock Text="&#x1F620;" 
       FontFamily="Segoe UI Symbol" FontSize="50" 
       HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource CustomTextBlockStyle}" />
    </Border>
</Grid>

The result:

If you want something like this:

Try to play around with padding and margin too

<Style x:Key="CustomTextBlockStyle" TargetType="TextBlock">
        <Setter Property="Margin" Value="-2,-13,-2,-9"/>
        <Setter Property="Padding" Value="0,0,0,0"/>
</Style>