Friday, October 12, 2012

In this tutorial m going to demonstrate how you can add the functionality in RichTextBox to automatically insert smiley faces for emotions symbols typed in the RichTextBox like for :-) =
I know you have seen such functionality in chat clients like g-talk, Facebook  yahoo messenger etc.

Believe me it's quite simple and interesting as compared to other complicated demos available on web.

OK let me start the step-by-step guide...

Step 1: Download some smiley faces [Download]

Step 2: Create a new windows form application project in visual studio

Step 3: Add a RichTextBox control to existing Form1

Step 4: Copy all the images which you have downloaded using "Step 1" and navigate to >> visual studio select Project>>SmileyDemo Properties...

There select Resources and paste all copied images on the right side pane.
[Note : SmileyDemo is the name of your project]

Step 6: Now open Code View of Form1 (Juss right click on form and select View Code)

Step 7: Now I'm going to create a Hashtable to hold the smiley symbol [like ":-)"] and smiley image side by side (a key-value relation) and don't forget to include using System.Collections;

Step 8: Create a function to add all elements to your Hashtable, keep symbols as keys and images as values in Hashtable.
Step 9: Now I'm going to create a function to check whether any of the symbol(which we have defined in Hashtable) is there in RichTextBox control or not. If yes then we have to replace that with the corresponding Image available in Hashtable.

[Note : IndexOf function will search our symbol(basically a string) in RichTextBox's Text and return the index number where it found.

Next we need to select the symbol using RichTextBox's Select() function with starting position of selection & lenght of characters which will be selected.
ClipBoard.SetImage() function will copy the desired image
"(Image)emotions[emote]" is nothing but to get the image object corresponding to "emote" key from our Hashtable emotions and we need to typecast it to Image format.
Now what - we have some selected text in our RichTextBox, all we need to do is juss call the Paste() function of RichTextBox which will paste the copied image at the right place.]

Step 10: Now on Form1's load event call the function which we have created in "Step 8"

Step 11: Double click on RichTextBox to generate TextChanged event handler of our RichTextBox control and call the function which we have created in "Step 9".

That's it...Compile and run and see the magic 

Download Demo

Download Source Code


Anonymous said...

It sure is easier than other solutions found on the web, but it has an unpleasant side-effect - setting and clearing Clipboard without user knowing it isn't a good practice. Otherwise nice post!

Anonymous said...

Can i convert the smileies back to text?

Rishi Sharma said...

I want it through text box instead of Textarea.. Pls help

Unknown said...


Anonymous said...

nice tutorials,but,can posible in im using, any tutorials in like this?


Anonymous said...

C# insert image to inline in RichTextBox

saliha bilal said...
This comment has been removed by the author.
saliha bilal said...

great help.. I also added some buttons for each emoticon and using same hashtable to insert into richTextBox.. e.g. for smile button:
private void btnSmile_Click(....){
for "sad" button
private void btnSad_Click(....){

void clickEmoticons(string emoti)
string emote = emoti;

lee woo said...

Words are but symbols for the relations of things to one another and to us; nowhere do they touch upon absolute truth. See the link below for more info.


Made Sutaman said...

thanks :)

Unknown said...

I tried to use that on my chat program but sadly when I send those values (of the smiles ":)" for example) it doesn't show anything an the client form stops working. When I type other words it works perfectly fine.
Can anyone help me plaese?

Anonymous said...


Namindu Ranatunga said...

Please tell me how to write this part in code


Post a Comment