Summary
Displaying images in a RichTextBox is a common requirement, with limited solutions available. Pasting through Clipboard or embedding into RTF content only supports static images. This article describes how to insert Windows control objects into a RichTextBox and use them to host images. It is a straightforward -- but flexible and usable -- solution. An attached demo project shows a simple example of the result:
Introduction
Quite often here at EE, I come across questions about how to insert images into a RichTextBox. Especially for developers working with Instant Messaging (IM) projects, emotion icons are inevitable elements besides handling chat text messages. A crying picture sounds much louder than pale text like "I'm crying", "I want to cry". However, RichTextBox is basically the only choice left for programmers, unless you write your own reader or browser. Using a web browser control is actually not a bad option. We may discuss it in the following articles (but not this one).
There are two "standard" ways of displaying static images in a RichTextBox. The CodeProject article, Insert Plain Text and Images into RichTextBox at Runtime, describes two ways of implementing in much detail:
- Copying an image to the Clipboard and pasting the data into the target
RichTextBox.
- Reading the RTF specification and inserting image data through a metafile wrapped with RTF tags.
Molesting the content of Clipboard is really annoying, and not good programming practice. For example, I'm used to copying words as a backup while typing, and I'll definitely copy the whole article again before I post it to a forum. In case anything goes wrong, I have the Clipboard as an emergency backup tool.
Actually, it's trivial to restore the original Clipboard data after pasting the image, and a responsible developer should do it:
public void InsertImage()
{
...
string lstrFile = fileDialog.FileName;
Bitmap myBitmap = new Bitmap(lstrFile);
object orgData = Clipboard.GetDataObject
Clipboard.SetDataObject(myBitmap);
DataFormats.Format myFormat = DataFormats.GetFormat (DataFormats.Bitmap);
if(NoteBox.CanPaste(myFormat)) {
NoteBox.Paste(myFormat);
}
else {
MessageBox.Show("The data format that you attempted site" +
" is not supportedby this control.");
}
Clipboard.SetDataObject(orgData )
...
}
The fatal problem of both of the above solutions is that they disable the animation of a GIF image. An animated GIF file contains multiple frames of images. "Copy & Paste" just reads the first frame of the image so the animation stops. While "RTF tagging" transforms the image data into a huge string, and the RTF specification does not extend enough to support getting the next active frame from a string.
Insert Windows Controls
Picture boxes can display animated images. And a user control can contain other controls. So there is nothing unconventional about inserting controls into a RichTextBox for any possible purpose. There are two issues that need to be addressed before it would be working:
- First, an inner control stays still in the parent control, and...
- Second, the input text will go behind the control instead of wrapping around it.
We need to make inner controls move along with the text while the RichTextBox is scrolling, and we need to leave enough space for the inner controls to prevent overlapping -- and covering up the nearby text as shown here:
To resolve the above issues, the start point of the text can be used as a reference point to decide the control's position relative to the text. When the content moves from PosA to PosB, the PictureBox must move to a new position as well, which is easily calculated:
thePictureBox.newPosition = PosB - PosA + thePictureBox.oldPosition = PosB - Delta
The RichTextBox.GetPositionFromCharIndex method allows us to retrieve the beginning position (PosA) of the text with a character index of zero. We need to store this value and, in the VScroll event, use the same method to retrieve the new start position (PosB) of the text. Then we can set the new position of the inner controls.
The call to GetPositionFromCharIndex is a little expensive. Consider that tens or even hundreds of images could be inserted into the RichTextBox during a session of chat, so frequent calls to the function would make scrolling very sluggish.
An alternative call to get the new position is a Win32 API GetScrollPos(). In most cases, the value obtained from GetScrollPos() is almost exactly the negated value to the one coming from GetPositionFromCharIndex... with a couple of points differentiation, which makes no difference to the naked eye. However, further tests reveal that the number returned from GetScrollPos() does not change if the user clicks on the slider bar and drags. The new position value can only be retrieved after the user releases the mouse button. So the pictures do not move while scrolling, and then they fly to the new positions only after the scrolling stops. We have to send messages to notify the position change while dragging. So we must add some more coding logic. Finally, the call to get the position in VScroll is:
private void TRichTextBox_VScroll(object sender, EventArgs e)
{
Point pt = new Point();
SendMessage(this.Handle, EM_GETSCROLLPOS, 0, ref pt);
foreach (MetaInfo one in ControlList)
{
one.TheControl.Location =
new Point(one.TheControl.Location.X, -pt.Y - one.DeltaY);
}
}
Using the code
All the deductive procedure is to make using the technique easy and simple. Firstly, derive your RichTextBox from TRichTextBox in Form1.Designer.cs:
private Trestan.TRichTextBox richTextBox1;
this.richTextBox1 = new Trestan.TRichTextBox();
Secondly, wherever you need to use a PictureBox to display an image, simply call richTextBox1.AddControl to add it in the list:
PictureBox thePic = new PictureBox();
thePic.Image = theImage;
thePic.Size = theImage.Size;
this.richTextBox1.AddControl(thePic);
That's it! TRichTextBox takes care of everything else for you.
Bonus / Notes
- GDI+ seems more delicate than GDI functions. Some images can be loaded by GDI functions, but will crash in GDI+. So a simple sanity check is called before setting the image to
PictureBox, in which multiple frames are read one by one, and the image will be discarded if any exception is caught.
- A self-management function
RemoveSome(), which will automatically truncate messages received in earlier time using the length of the text and the number of images received as thresholds.
- Most interestingly, you are not limited to adding only
PictureBox controls into a TRichTextBox; you can insert virtually any kind of control into it. And they will all scroll with the text as an integrated part of the content. As illustrated in the following picture, a button is affixed to each line of the message. Thus the TRichTextBox gains more potential to become a client side reader in a P2P forum with no centralized website.
Final result:
