CODEWITHSUNDEEP
c#wpfxamltextblockemoticons
Ajay Palan
Ajay Palan

Reputation: 31

Emoticons in TextBlock in WPF application

I want to add emoticons to WPF chat application. I know that wpf don't supports emoticons for that reason I am replacing emoticons with image. I am using inline property of textBlock to add images to textBlock but, I having problem with alignment of images. I am not able to make emoticon images to get properly aligned. I am sharing a screenshot of how it is looking.

Screenshot of app window

This is how emoticon is looking

the example is just a demo where I am adding elements in constructor only to see how it will look. I am sharing my code as well.

        @out.Inlines.Add(new Run("Hii, my name is Ajay!!"));
        Image emo = new Image();
        emo.Height = 15;
        emo.Width = 15;
        emo.VerticalAlignment = VerticalAlignment.Bottom;
        emo.Margin = new Thickness(3, 0, 0, 0);
        emo.Source = new BitmapImage(new Uri(@"C:\Users\admin\Desktop\test1.jpg", UriKind.RelativeOrAbsolute));
     // InlineUIContainer container = new InlineUIContainer(emo);
        @out.Inlines.Add(emo);

Is there any way I can make emoticon image properly align? Is it OK to use textblock or I should use any other control for this?

Any help is highly appreciated.

Upvotes: 1

Views: 2021

Answers (2)

Ajay Palan
Ajay Palan

Reputation: 31

I tried as @Bill Tarbell suggested and it worked for me. Final working code is as follows:

        var textRun = new Run("Hii, my name is Ajay!!");
        textRun.BaselineAlignment = BaselineAlignment.Center;
        @out.Inlines.Add(textRun);
        Image emo = new Image();
        emo.Height = 20;
        emo.Width = 20;
        emo.VerticalAlignment = VerticalAlignment.Bottom;
        emo.Margin = new Thickness(3, 0, 0, 0);
        emo.Source = new BitmapImage(new Uri(@"C:\Users\admin\Desktop\test1.jpg", UriKind.RelativeOrAbsolute));
       // InlineUIContainer container = new InlineUIContainer(emo);
        @out.Inlines.Add(emo)

Upvotes: 1

Bill Tarbell
Bill Tarbell

Reputation: 5234

A few potential options may be:

set the Top margin on the Image. it's in the format of LEFT, TOP, RIGHT, BOTTOM

emo.Margin = new Thickness(3, 4, 0, 0);

Another option is to wrap the image in a Run and set the BaselineAlignment. https://msdn.microsoft.com/en-us/library/system.windows.baselinealignment

var imageRun= new Run(emo);
imageRun.BaselineAlignment = BaselineAlignment.TextBottom; //experiment with the other enum options
@out.Inlines.Add(imageRun);

adjust the text rather than the image (though i would keep trying with the image and use this as a last resort).

var textRun = new Run("Hii, my name is Ajay!!");
textRun.Margin = experiment;
textRun.BaselineAlignment = experiment;
@out.Inlines.Add(textRun );

Upvotes: 1

Related Questions