[Possible Bug] Alignment of Emoji Issue

[CoelWu]

I'm using emoji.wpf for displaying emoji and flags. My xaml look like this:

<emoji:TextBlock
            Text="{Binding Name}"
            Foreground="{Binding IsSelected, Converter={StaticResource SelectedToProxyNameForegroundConverter}}"
            FontFamily="Noto Sans S Chinese"
            FontSize="17"
            FontWeight="Medium"
            VerticalAlignment="Center"/>

However the emoji is not vertically centered. Check this image for a reference:

It seems like the emoji was lower than the Text, and therefore out of my Grid bondary.

My Environment:

• Visual Studio 2019 Community
• .NET 5
• WPF
• Emoji.wpf (3.0.0)

[samhocevar]

I am investigating this. It would help if you could please post the exact same screenshot after adding Height="23" to the emoji:TextBlock, can you maybe do that? Thanks in advance!

[CoelWu]

Sure. I'm glad to help with that :)
Here is the result after adding Height=23 to the emoji:TextBlock:

[samhocevar]

Thanks. I was able to reproduce the problem, too (code below for future reference).

I have posted on StackOverflow about this weird behaviour and someone suggested it may simply be a bug in WPF. I am looking for a fix inside Emoji.Wpf, but in the meantime an acceptable workaround for you may be to set a larger Height value for the emoji:TextBlock to something larger.

<StackPanel>
    <StackPanel.Resources>
        <Style TargetType="emoji:TextBlock">
            <Setter Property="Margin" Value="2"/>
            <Setter Property="Height" Value="23"/>
            <Setter Property="Padding" Value="2.5"/>
            <Setter Property="FontFamily" Value="Noto Sans S Chinese"/>
            <Setter Property="FontSize" Value="17"/>
            <Setter Property="FontWeight" Value="Medium"/>
            <Setter Property="Foreground" Value="#444"/>
            <Setter Property="Background" Value="#eee"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
        </Style>
    </StackPanel.Resources>
    <emoji:TextBlock Text="🔰国外流量"/>
    <emoji:TextBlock Text="📲Telegram"/>
    <emoji:TextBlock Text="📹谷歌油管"/>
    <emoji:TextBlock Text="🎥NETFLIX"/>
    <emoji:TextBlock Text="🌍国外媒体"/>
    <emoji:TextBlock Text="🇨🇳国内媒体"/>
</StackPanel>

[CoelWu]

Hi, thank you for helping! I guess the current workaround would be setting the height to the larger value.