Emojis in .NET MAUI ❓🤩🚀📱

Post by

Jul 17, 2024

This article is part of the #MAUIUIJuly initiative by Matt Goldman.

Hi folks! Today, let's dive into the world of emojis! You might be wondering, what do emojis have to do with .NET MAUI? Well, emojis play a significant role in our daily lives. It's hard to imagine a day without reading or sending a bunch of them. Long gone are the days when emoticons were our only way to convey emotion in text ¯\_(ツ)_/¯

But wait, why should we care as mobile devs? There’s plenty of reasons, let me share just a few:

Enhance user engagement: emojis can make interactions feel more personal and engaging. They add a layer of emotional expression that text alone often can't convey. This makes the user experience more enjoyable and can increase user retention.
Improve communication: emojis help bridge the communication gap, especially in global apps with diverse user bases. They can convey emotions, reactions, and tones that might be lost in translation. For instance, a thumbs-up emoji is universally understood as a sign of approval.
Cultural relevance: emojis are a part of modern digital culture and incorporating them into your app can make it feel more contemporary and in touch with current trends. This can be particularly appealing to younger users.
Consistency across platforms: emojis ensure consistent visual communication across different platforms and devices. Whether your app is used on iOS or Android, emojis will look and feel the same, maintaining a cohesive user experience.
They are free! yes, there’s several emoji libraries available for use under MIT license, so you have access to a huge amount of colorful icons in various styles, ready to use in your apps at no cost.

Here are a few screenshots taken from Grial UI Kit that showcase Emoji usage in a Mobile App’s context:

As mentioned before, there are several emoji libraries that have permissive licenses, here are the most common:

Noto by google
Fluent Emojis by Microsoft
FxEmojis by Mozilla
Twemoji that was originally developed and maintained by Twitter

In the rest of this article we’ll focus on Fluent Emojis.

‍

How can I use Emojis in my .NET MAUI app?

Integrating into web apps is straightforward as they are usually available through npm packages. In fact, if we look at the top npm packages from jsdelivr we can see that the 5th most popular package is an emoji package that includes multiple libraries (including the ones mentioned before). This shows just how prevalent emojis are in today's digital world! 🌐

But the question is, how easy is it to use Fluent Emojis in a .NET MAUI app?

To simplify the process, we've prepared a repository with all the Fluent emojis (PNGs and SVGs) sorted with a proper nomenclature, making it easy to know the exact path of an emoji based on its Unicode. The original Fluent repo structure is more complex, with emoji names as folders and JSON files containing the metadata for each emoji.

Thanks to jsdelivr, we can access these PNG and SVG files through a fast and free CDN. Just for reference, the CDN URL of public GitHub repos can be obtained here.

This is great, but there's one challenge: three of the four Fluent Emoji styles are in SVG (Color, Flat and High Contrast) format. While SVGs ensure you don't have to worry about pixelated images, .NET MAUI doesn't support loading dynamic SVGs out-of-the-box.

Note: If you know which emojis you will need at build time, you can always download the SVG files and include them with the MauiImage build action in your project. MAUI will generate PNGs for you so the Image control will just work.

For the purpose of loading remote SVGs into .NET MAUI we created the SvgImage control. Let's dive into how it works.

‍

SvgImage control

The SvgImage control functions just like the regular Image control but expects an ImageSource in SVG format. It’s built using SkiaSharp, leveraging the Svg.Skia package to render SVGs.

It follows the basic rules of drawn controls:

Inherit from SKCanvasView
Call InvalidateSurface() when a redraw is required
Draw in the canvas inside the OnPaintSurface() method

The control manages streams from different ImageSources (Uri, File, Stream) and handles canceling source loading if the source changes. It exposes Loading, Ready, and Error events, giving the consumer full control over the control state. Additionally, it offers optional in-memory cache support, which can be extended by overriding the GetFromCache() and StoreOnCache() methods.

With these features, the SvgImage control makes it easy to incorporate dynamic SVGs into your .NET MAUI apps, ensuring smooth and high-quality image rendering.

Here's a sample code snippet:

<local:SvgImage
WidthRequest="50"
HeightRequest="50"
Source="{ Binding SvgSource }" />

‍

FluentEmoji control

We also developed a FluentEmoji control that fetches images directly from the CDN. This control supports all four Fluent Emoji styles and renders either a PNG or SVG based on the selected style (3D style is only available in PNG format). Here’s a quick overview of its features:

Unicode Bindable Property: Allows you to select the emoji by setting its Unicode value.
Style Support: Automatically chooses between PNG and SVG formats depending on the selected Fluent Emoji style.
Placeholder Property: Sets a placeholder image that displays while the emoji is loading.
Error Property: Specifies an image to display in case of an error during loading.

With these properties, the FluentEmoji control makes it simple to integrate Fluent Emojis into your .NET MAUI apps 🎉

Here's a sample code snippet:

<local:FluentEmoji
WidthRequest="50"
HeightRequest="50"
EmojiStyle="Color"
Unicode="{ Binding Code }"
ErrorPlaceholder="notfound.png"
Placeholder="loading.png" />

‍

Fluent Emoji browser

Finally, we created a sample app that showcases all the emojis in all the styles. You can see it in action here (note that many emojis are not available in the High Contrast style):

‍

The repository containing the emoji browser and both controls can be found here.

Both SvgImage and FluentEmoji controls are also available in the Grial free tier NuGet package, so you can start using them in your app right away. You can read more about Grial's free tier here.

That’s all for today! As always, I hope this helps .NET developers add new flavor to their mobile applications! 😃

Happy coding! 🚀

Let us know if you have any feedback, and follow us here.

‍