When I use this emoji ⚓️, A black square(or sometimes with X in it) will be displayed after it.

Emoji.WPF Sample Program

My Program which use emoji.wpf's TextBlock:

I think this might be a possible bug? I'm using Microsoft's default emoji, not 3rd party's

The EmojiData constructor is a bit too naïve; in particular, Emoji.Wpf.EmojiData.MatchOne and MatchMultiple do not understand variation selectors. This whole code should probably be rewritten, as I am not sure regexes are the best way to parse emoji.

A few pointers:

• WinCompose issue # 290
• optimizing regex for emoji (not that good)

emoji:TextBox can't customize styles

How i add the from the picker to my textBox?

When using the Windows 10 emoji picker to input an emoji the sample crashes with the following exception:

System.InvalidOperationException
HResult=0x80131509
Message=Es ist kein "CultureInfo" mit "IetfLanguageTag 'ug'" vorhanden.
Source=
StackTrace:

Inner Exception 1:
ArgumentException: Der Kulturname "ug" wird nicht unterstützt.
Parametername: name

Hello,

It is very slow and take high percent of CPU when typing. This is so important.

Best regards,

Uses the Segoe UI Emoji system font, even on Windows 7 or Windows 8 (if installed in c:/Windows/Fonts) by implementing Microsoft’s COLR/CPAL font format extensions.

I setup KB2729094 on win7, this web page (https://www.istartedsomething.com/uploads/emojisegoe.html) can show emoji icon as black white mode now.
but in my app, emoji still be a sqare

how to implementing Microsoft’s COLR/CPAL font format extensions ?

can you tell more about it?

emoji:RichTextBox already has a Text property that makes it an acceptable emoji-aware replacement for standard TextBox. However an emoji:TextBox class may make things less confusing for users. Here is a short to-do list:

• inherit from emoji:RichTextBox (I can think of no other way to display images)
• (optionally) inherit from TextBox instead but still use an emoji:RichTextBox internally
• disable style commands (CtrlB etc.)
• disable style and formatting in copy/paste operations
• hide the Document property and related events
• implement and enforce standard TextBox properties: MaxLength, MaxLines etc.

Documentation:

• TextBox
• RichTextBox

If you open emoji picker on windows 10 , some of them will be missing and showing [] instead:

running system:
Windows 10 1909
.NET 5
WPF

Hello , im trying to clone your project in order to fix a few things for my project but my problem is that this is the very first time im trying something like this and i have a few errors that i cant understand.

i have .net sdk and .net sdk 4.8 installed.

any ideas?

I would like to bind the string(Combination of emoji and some string) as a text from view model to richtext box. Is there any way to bind it.

Also, how to get entered text from richtextbox

I am searching for any documentation and a list of emojis implemented.
Also i want to know: how do i implement my own emojis by code?
Something like:
:WhiteDice: = Image of a White Dice

Thanx :)

Hello, im using your library for emoji on my project and it works fine on w10. But when i open my app on w7 from vm and i get this result from picker

am I missing something?
how can i exclude missing emoji ?

I was managed to make emoji.wpf to load fonts other than Segeo UI Emoji/Symbol. However, emoji.wpf seem to have a render issue when rendering fonts that are in SvgInOt format.

Rendering result of emoji.wpf fontviewer:

Rendering result of Character Map (A UWP application):

Here is the font project I use: https://github.com/eosrei/twemoji-color-font

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)

Emoji and untidy text

Hi Sam, looks like this was broken in commit 0ce9957f31347a414127a36f707573bc3d1ff732.

From what I can tell, each character is being split into a seperate glyphrun, and the glyph.OriginalAdvanceWidth here is way too big, causing the issue. Checking the value of _typeface.GetHAdvanceWidthFromGlyphIndex(glyphIndex) at that point seems to give a sensible value. Not sure if that helps!

Example of line: <Image Height="24" emoji:Image.Source="🧱"/>

I got a user of my software that doesn't have support for these types of emojis cuz he is running Windows 8, making the program generate an exception and it won't load the emojis.

Is there any way we can handle this exception? I'm loading the emoji via XAML.

Thanks!

I'd do it myself but I'm not sure I comprehend what your code is doing.

Hi,

anyone able to compile successfully> I get these errors when open solution in VS 2015/17

error : The project file could not be loaded. Could not find a part of the path 'C:\XXX\emoji.wpf-master\emoji.wpf-master\Typography\Build\N20\Typography.OpenFont\Typography.OpenFont.csproj'. C:\XXX\emoji.wpf-master\emoji.wpf-master\Typography\Build\N20\Typography.OpenFont\Typography.OpenFont.csproj

Sdk: .net framework 4.6.1
<emoji:RichTextBox FontSize="24" Margin="5"/>

Managed Debugging Assistant "FatalExecution EngineError"

Message = Managed Debugging Assistant "FatalExecution EngineError": "Error encountered at runtime. The wrong address is 0x67d2623f, on thread 0x58d4. The error code is 0x80131623. This error may be a bug in the CLR, or a bug in the unsafe or non-verifiable part of user code. Common sources of this bug include user marshaling errors on COM-interop or PInvoke that can damage the stack."
@samhocevar Thanks

I have tried your repository. Thank you for your great effort! I have checked the CopyingHandler in RichTextBox. But it doesn't work as expected regardless of the selection. It just copies space characters of the number of selected characters. Anyways I have solved the issue internally. If you wish, I can provide you the modified code. :) Though my code is not well-optimized, but it just works as expected.

When i insert numbers and then pick an emoji from picker it overwrites my numbers with the selected emoji *n where "n" is the number of numbers where inserted in text before selection. Maybe im doing something wrong , tried txtMessage.Text = txtMessage.Text + e.Emoji; and txtMessage.CaretPosition.InsertTextInRun(e.Emoji);
txtMessage.Focus();
txtMessage.CaretPosition = txtMessage.Document.ContentEnd;
same result.

When I use ms pinyin input method, I can input sth in RichTextBox.
But using 3rd party input method can not input anything, even using US keyboard - English.
my xaml:
<emoji:RichTextBox x:Name="TextBoxDoc"
Grid.Row="1"
Margin="5"
AcceptsReturn="True"
VerticalScrollBarVisibility="Visible"
FontSize="15"/>

The following string illustrates the current issues:

|👨‍👦|/|👨‍👧‍👦|

It gets rendered as:

I have used Emoji.Wpf to give my application that displays emoji's colour! My application is using the latest dot net core framework and I am just using the standard animal emoji's. When I add the Emoji.Wpf nuget package I get the below warning!

Package 'Emoji.Wpf 0.2.5' was restored using '.NETFramework,Version=v4.6.1, .NETFramework,Version=v4.6.2, .NETFramework,Version=v4.7, .NETFramework,Version=v4.7.1, .NETFramework,Version=v4.7.2, .NETFramework,Version=v4.8' instead of the project target framework 'net5.0-windows7.0'. This package may not be fully compatible with your project.

Despite this, the application seems to be behaving properly! Below I have pasted my applications csproj file in case it gives you any clues:

<Project Sdk="Microsoft.NET.Sdk">

  <PropertyGroup>
    <OutputType>WinExe</OutputType>
    <TargetFramework>net5.0-windows</TargetFramework>
    <UseWPF>true</UseWPF>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Emoji.Wpf" Version="0.2.5" />
  </ItemGroup>

</Project>

This thread tracks usage of Emoji.Wpf. Please feel free to post your work!

The Segoe UI Emoji font does not provide flags, but here is how we could add flag support.

• choose a repository of SVG flags such as this one
• convert SVG to XAML using e.g. SvgToXaml
• embed the XAML inside Emoji.Wpf
• at render time, skip glyph rendering and directly return the DrawImage from the XAML; add a 2-pixel black border to mimic the Windows Emoji style

One drawback is that some flags are insanely detailed, which is unreasonable for drawings that we will render at sizes of about 20 pixels. For instance El Salvador:

Bonus: using Inkscape’s “Envelope Deformation” path effect it is possible to distort any SVG to create a wavy flag such as in 🏳‍🌈:

Hi,

In Sample app, RichTextBox.SelectAll() and RichTextBox.Selection.Text does not show all text with emoji.

Please advise.

There are 3 properties, what dont work

BackgroundColor
BorderBrush
BorderThickness

But, in richTextBox these properties work

30 minutes later
I discovered another one bug. TextWrapping property does not work correctly
Likely, all properties are just not binded in control

if you select X emoji, SelectionChanged fires, if you open the picker again click the same emoji, it closes without firing SelectionChanged, this sort of makes sense as you're selecting the same emoji, but that becomes an issue if you're using the SelectionChanged to insert selected emojis into the RichTextBox.

Environment

• OS: Windows 10
• .NET Framework version: 4.0、5.0
• Development tool: Visual Studio 2022 Community
• emoji.wpf version: latest sources (2021-12-14)

Operation

1. Compile Sample project in Emoji.Wpf solution.
2. Launch Sample.exe.
3. Input "🚏" to emoji:RichTextBox.
4. Select a range of "🚏".
5. Drag the selected "🚏".

Expected result.

An exception was not cause.

Actual result.

An exception was cause.

Stacktrace (Sorry for the partial Japanese.)

System.ArgumentOutOfRangeException
  HResult=0x80131502
  Message=パラメーター値は、0 より大きい必要があります。
パラメーター名:pixelWidth
  Source=PresentationCore
  スタック トレース:
   場所 System.Windows.Media.Imaging.RenderTargetBitmap..ctor(Int32 pixelWidth, Int32 pixelHeight, Double dpiX, Double dpiY, PixelFormat pixelFormat)
   場所 System.Windows.Documents.WpfPayload.GetBitmapSourceFromImage(Image image)
   場所 System.Windows.Documents.WpfPayload.CreateComponentParts(PackagePart sourcePart)
   場所 System.Windows.Documents.WpfPayload.SaveRange(ITextRange range, Stream& stream, Boolean useFlowDocumentAsRoot, Boolean preserveTextElements)
   場所 System.Windows.Documents.TextEditorCopyPaste._CreateDataObject(TextEditor This, Boolean isDragDrop)
   場所 System.Windows.Documents.TextEditorDragDrop._DragDropProcess.SourceOnMouseMove(Point mouseMovePoint)
   場所 System.Windows.Documents.TextEditorMouse.OnMouseMoveWithFocus(TextEditor This, MouseEventArgs e)
   場所 System.Windows.Controls.Primitives.TextBoxBase.OnMouseMove(MouseEventArgs e)
   場所 System.Windows.RoutedEventArgs.InvokeHandler(Delegate handler, Object target)
   場所 System.Windows.RoutedEventHandlerInfo.InvokeHandler(Object target, RoutedEventArgs routedEventArgs)
   場所 System.Windows.EventRoute.InvokeHandlersImpl(Object source, RoutedEventArgs args, Boolean reRaised)
   場所 System.Windows.UIElement.RaiseEventImpl(DependencyObject sender, RoutedEventArgs args)
   場所 System.Windows.UIElement.RaiseTrustedEvent(RoutedEventArgs args)
   場所 System.Windows.Input.InputManager.ProcessStagingArea()
   場所 System.Windows.Input.InputManager.ProcessInput(InputEventArgs input)
   場所 System.Windows.Input.InputProviderSite.ReportInput(InputReport inputReport)
   場所 System.Windows.Interop.HwndMouseInputProvider.ReportInput(IntPtr hwnd, InputMode mode, Int32 timestamp, RawMouseActions actions, Int32 x, Int32 y, Int32 wheel)
   場所 System.Windows.Interop.HwndMouseInputProvider.FilterMessage(IntPtr hwnd, WindowMessage msg, IntPtr wParam, IntPtr lParam, Boolean& handled)
   場所 System.Windows.Interop.HwndSource.InputFilterMessage(IntPtr hwnd, Int32 msg, IntPtr wParam, IntPtr lParam, Boolean& handled)
   場所 MS.Win32.HwndWrapper.WndProc(IntPtr hwnd, Int32 msg, IntPtr wParam, IntPtr lParam, Boolean& handled)
   場所 MS.Win32.HwndSubclass.DispatcherCallbackOperation(Object o)
   場所 System.Windows.Threading.ExceptionWrapper.InternalRealCall(Delegate callback, Object args, Int32 numArgs)
   場所 System.Windows.Threading.ExceptionWrapper.TryCatchWhen(Object source, Delegate callback, Object args, Int32 numArgs, Delegate catchHandler)
   場所 System.Windows.Threading.Dispatcher.LegacyInvokeImpl(DispatcherPriority priority, TimeSpan timeout, Delegate method, Object args, Int32 numArgs)
   場所 MS.Win32.HwndSubclass.SubclassWndProc(IntPtr hwnd, Int32 msg, IntPtr wParam, IntPtr lParam)
   場所 MS.Win32.UnsafeNativeMethods.DispatchMessage(MSG& msg)
   場所 System.Windows.Threading.Dispatcher.PushFrameImpl(DispatcherFrame frame)
   場所 System.Windows.Application.RunDispatcher(Object ignore)
   場所 System.Windows.Application.RunInternal(Window window)
   場所 Sample.SampleWindow.Main()

Specific emoji

• 🚏
• 🍼
• 📎
• ◼️
• ◻️
  etc...

At the moment referencing package in net5.0 WPF app I get the following warning:

Package 'Emoji.Wpf 0.1.5' was restored using '.NETFramework,Version=v4.6.1, .NETFramework,Version=v4.6.2, .NETFramework,Version=v4.7, .NETFramework,Version=v4.7.1, .NETFramework,Version=v4.7.2, .NETFramework,Version=v4.8' instead of the project target framework 'net5.0-windows7.0'. This package may not be fully compatible with your project.

Though it works without an issue, it would be nice to target net5.0 as well.
Thanks.

The flag for Nepal (🇳🇵) is missing. It is the only major non-rectangular flag in the world so it needs special treatment.

The flags for Switzerland (🇨🇭) and Vatican City (🇻🇦) are broken because their original aspect ratio is square.

The flags for Guam (🇬🇺) and Maldives (🇲🇻) have a rendering artefact.

Added to my WPF project and updated .XAML accordingly. Still seeing b/w emojis.

I pushed my code to https://github.com/mike-ward/tweetz (master branch).

Maybe someone can point out the error of my ways? 😕

Running on Windows 10

If you try to append emoji from emoji picker to wpf:richtextbox when it already includes numbers. some extra emoji will replace the actual text

The code I use to append to richtextbox :
private void Picker_Picked(object sender, Emoji.Wpf.EmojiPickedEventArgs e) { richtextbox.AppendText(e.Emoji); }
steps:

before append :

expected behavior when appending ☺️ emoji for example

result:

running system:
Windows 10 1909
.NET 5
WPF

Test text : Button_22wawae
I insert an emoji
Result : Button_😗wawae😗

I wasn't able to access or find both the UnicodeEmoji and UnicodeCLDR submodules, thankfully the only file needed from them is the emoji-test.txt, which can be found online, but not the exact version used in this project

after this update 1c22cf7 MatchMultiple is unuseable,
Is there any alternative func?

• Clicking on an emoji in a RichTextBox selects the emoji instad of setting the caret position
• Sometimes (not always), inserting an emoji inside a range of text does not properly update the caret position

Textwrapping is working fine with text but not in emoji.

<emoji:TextBlock MaxWidth="500" Margin="5" VerticalAlignment="Center" customTextBlock:HyperService.Text="{Binding Text, Converter={StaticResource decodeStringConverter}}" FontSize="14" FontWeight="Normal" LineHeight="20" TextWrapping="Wrap"/>

The user should be able to add their own emoji.

A few thoughts:

• should use arbitrary character sequences (from private Unicode planes or elsewhere)
• should allow standard :colon: syntax
• user can inject in any section to make the glyph available through emoji:Picker
• rendering data preferably provided by a drawing object (XAML)

Apologies if I'm not using the lib correctly as I'm fairly new to this.

I followed the example in the README and installed via PM console but when I want to add a Name or x:Name to my <emoji:TextBlock>, this is the error I'm seeing in my logs. If I don't use x:Name or Name, the textblock is working as intended

Using

<Window ...
         xmlns:emoji="clr-namespace:Emoji.Wpf;assembly=Emoji.Wpf"
>

<emoji:TextBlock Name="TestName" Text="Test" />
</Window>

gives me: The type or namespace name "Wpf" does not exist in the namespace "Project.Emoji"

but this works fine

<Window ...
         xmlns:emoji="clr-namespace:Emoji.Wpf;assembly=Emoji.Wpf"
>

<emoji:TextBlock Text="Test" />
</Window>

This also happens when trying to use it with RichTextBox as well.

Thanks for your time

Text is very blurry at small sizes, because the glyph rendering method does not appear to benefit from hinting. But experiments indicate that better rendering is possible just by tweaking the glyph positions.

Another option would be to downscale pre-rendered bitmaps instead of drawing small glyph sizes.

how can I create a custom template/Style for emoji:textBox

RT.