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

6 comments:

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 vb.net?please... im using vb.net, any tutorials in vb.net like this?

thanks...

Anonymous said...

C# insert image to inline in RichTextBox

Post a Comment