Display colored emoji instead of black and white

Question

I'm creating a chat in WPF and I'm trying to make user can send emoji. The user writes a message in a TextBox and he can open menu with emoji and choose some. A problem is that emoji are not colored, but they are black and white.

I tried to use emoji.wpf, but it works only in RichTextBox (I need buttons and TextBox too) and the emoji are rendering very slowly. Somewere I read that the only solution is to insert emoji as pictures. Is it true or it exists some better solution? It would be advisable to have emoji as unicode characters, not pictures.

Sorry for my english, I'm from Czech Republic.

Chickpea

WPF doesn't support colored fonts as of now, as far as I know. So you have to use various "hacks", such as used in a library you mentioned. – Renita

@Renita Thank you, and do you know some good library for this? – Chickpea

Only the one you already mentioned :) – Renita

Answer 1

I found a very easy and great method!

Just add a Nuget package named "Emoji.Wpf" and use it as below:

<Window ...
        xmlns:emoji="clr-namespace:Emoji.Wpf;assembly=Emoji.Wpf"
        ...>
    ...
    <emoji:TextBlock FontSize="24" Text="💖😁🐨🐱‍🐉👩🏿‍👩🏻‍👦🏽"/>
    ...
</Window>

And it works well for my WPF app.

More information in it's project site:

https://github.com/samhocevar/emoji.wpf

Evening

Great! Look's like they have added support since version 0.1.1 – Chickpea

This is a wrapper around Rich Text. Unfortunately, not that fast. – Trucking

@YurySchkatula Cause I only use some a few emoji, so it's OK for me. – Evening

@DavidMoškoř Wouldn't it be nicer to accept the answer from Sam? He's the author of the library and already pointed towards the library 3 years ago. Maybe edit his answer to make it up to date. – Cottar

@Cottar The edit queue is full. When the proposed edit gets accepted I will accept his answer. I'll leave Even's answer accepted for the moment, as it answers my question more accurately. – Chickpea

Answer 2

I wrote Emoji.Wpf; here are a few comments:

• There is an Image class that can be trivially used in a Button. See for instance the font viewer sample which uses simple XAML like this: <emoji:Image Width="44" Height="44" Text="{Binding UnicodeText}"/>

• It is quite difficult to subclass TextBox for colour emoji because it only supports a single font and font style; overriding the rendering code seems difficult and I am not skilled enough to do it.

Here is what the font viewer looks like:

Microtone

Thank you, I didn't know about this class. Colored emojis in TextBox isn't very important, but I need faster rendering of emoji in RichTextBox. Earlier, when the user sent a message, the message was immediately added to RichTextBox. Now RichTextBox gets stuck and the message will only appear after some time. Another drawback is that I can not change the font color for different sections of the text. – Chickpea