Using data binding, how do I bind text which contains emojis to a label and have it display correctly?

Issue

I'm writing an app to interface to a WordPress BuddyPress API. The app will allow users to send messages to each other through the API. I'm having difficulty displaying these messages correctly when they contain emojis. Here is a short example of message text as returned by the API -

"Hi 🙂 hope you are doing well."

If I explicitly set the label text like below, it displays correctly (i.e. the smiley emoji displays correctly) <Label Text="Hi &#x1f642; nice to meet you."/>

However, if I bind the label text to the string field in my view model, it just displays the code for emoji with the included text. <Label Text="{Binding message.raw}" />

Here is the data returned from the WP BP API as seen in Postman for the "message" node;

What do I need to do to the data bound "message" string to get it to display correctly?

Solution

Its because you received a string from an API that encoded for HTML transmission. Perhaps use System.Net.WebUtility.HtmlDecode.

(XAML decodes value strings automatically, so you didn't need to do that when the string was in XAML, because there are a few Unicode characters that are not permitted in XML.)

Answered By - ToolmakerSteve