Here’s an image to demonstrate what I mean:

(This image is borrowed from SharpSpell, but you get the point)

Overview

The .NET framework provides means to subclass native Win32 windows and controls by inheriting from the NativeWindow class.

This is exactly what we need to do, and here is the basic outline of our inherited class:

using System; using System.Collections.Generic; using System.Text; using System.Windows.Forms; using System.Drawing; namespace CodedBlog { public class CustomPaintTextBox : NativeWindow { private TextBox parentTextBox; private Bitmap bitmap; private Graphics textBoxGraphics; private Graphics bufferGraphics; // this is where we intercept the Paint event for the TextBox at the OS level protected override void WndProc(ref Message m) { switch (m.Msg) { case 15: // this is the WM_PAINT message // invalidate the TextBox so that it gets refreshed properly parentTextBox.Invalidate(); // call the default win32 Paint method for the TextBox first base.WndProc(ref m); // now use our code to draw extra stuff over the TextBox this.CustomPaint(); break; default: base.WndProc(ref m); break; } } public CustomPaintTextBox(TextBox textBox) { this.parentTextBox = textBox; this.bitmap = new Bitmap(textBox.Width, textBox.Height); this.bufferGraphics = Graphics.FromImage(this.bitmap); this.bufferGraphics.Clip = new Region(textBox.ClientRectangle); this.textBoxGraphics = Graphics.FromHwnd(textBox.Handle); // Start receiving messages (make sure you call ReleaseHandle on Dispose): this.AssignHandle(textBox.Handle); } private void CustomPaint() { // code goes here, see below } } }

Now we need to write the custom paint routine. In order to draw underlines underneath words, we need to know where these words are in the first place. We can get these values using Win32 API functions.

I will not go into detail with these API functions because the code is pretty long and doesn’t make the object of this article. You can download the support class here: Native Win32 Methods for measuring text inside a TextBox (nativemethods.zip)

The custom paint method

This is the CustomPaint() method:

private void CustomPaint() { // get the index of the first visible line in the TextBox int curPos = TextBoxAPIHelper.GetFirstVisibleLine(textBox); curPos = TextBoxAPIHelper.GetLineIndex(textBox, curPos); // clear the graphics buffer bufferGraphics.Clear(Color.Transparent); // * Here’s where the magic happens // For simplicity we’ll just draw a line underneath a character range. // This will be from character 1 to character 5 in this sample. // You can of course modify this to underline specific words. Point start = TextBoxAPIHelper.PosFromChar(textBox, 1); Point end = TextBoxAPIHelper.PosFromChar(textBox, 5); // The position above now points to the top left corner of the character. // We need to account for the character height so the underlines go // to the right place. end.X += 1; start.Y += TextBoxAPIHelper.GetBaselineOffsetAtCharIndex(textBox, 1); end.Y += TextBoxAPIHelper.GetBaselineOffsetAtCharIndex(textBox, 5); // Draw the wavy underline. DrawWave(start, end); // Now we just draw our internal buffer on top of the TextBox. // Everything should be at the right place. textBoxGraphics.DrawImageUnscaled(bitmap, 0, 0); }

We use the DrawWave() method to draw a wavy line (zig-zag) from one point to another – you can customize it to your needs:

private void DrawWave(Point start, Point end) { Pen pen = Pens.Red; if ((end.X – start.X) > 4) { ArrayList pl = new ArrayList(); for (int i = start.X; i <= (end.X – 2); i += 4) { pl.Add(new Point(i, start.Y)); pl.Add(new Point(i + 2, start.Y + 2)); } Point [] p = (Point[])pl.ToArray(typeof(Point)); bufferGraphics.DrawLines(pen, p); } else { bufferGraphics.DrawLine(pen, start, end); } }

Now to use this class, you just need to instantiate it by passing a TextBox control to the constructor. Make sure you keep a reference to it at the module level so it doesn’t get eaten by the Garbage Collector.

CustomPaintTextBox customUnderlines = new CustomPaintTextBox(textBox1);

I haven’t really tested this stripped out version of the class, but it should work. Most of it is taken directly from the SharpSpell source code.

I hope this article helps you understand how to owner draw native Win32 controls using the .NET framework. If you have any questions please leave a comment.

[tags]Windows.Forms, C#, User Interface, .NET Framework, Win32[/tags]

The trick is to try to replicate the content of the TextArea as best as possible using a DIV that is positioned directly underneath the textbox. The TextArea’s background is then set to transparent, and the DIV shows up through it.

We then send the text in the TEXTAREA to the server using AJAX calls, retrieve misspellings and suggestions, and we then recreate the DIV on the client using CSS to display the underlines.

[tags]SharpSpell, Spell Checker, JavaScript, AJAX[/tags]

Since everyone seems to be doing it ¹, I decided to start my own blog to write about my day to day experiences with web development and programming.

¹. yes, I realize that I’m starting way too late on the blogging phenomenon timeline, but better late than never right ² ?
². what better way to start a blog than with a cliché?

Who am I?

My name is Andrei Alecu and I’m a C# developer with over 5 years of experience in .NET, owner and lead developer of Tachyon Labs, a company that started as an outsourcing studio but later developed as a .NET component developer and web development company. Tachyon Labs is also the company behind SharpSpell, a real-time spell checker control for ASP.NET and WinForms.

We ³ first launched SharpSpell back in 2004, and I was the sole developer of my company back then. The thing about SharpSpell was that it was the first real-time wavy underline spell checker for the Web.

This amazing ⁴ functionality was actually implemented by chance. I was approached by Dave Frank of the Best of the Web directory, looking to buy a spell check product for their administrative back-end. He eventually suggested that a real-time spell check function like in Microsoft Word would add huge value to the product, but in my own mind I thought something like that would never be possible using pure HTML and JavaScript in a web-browser. Flash maybe, but pure HTML never.

After a couple of months of work, I managed to get the first working version of a wavy underline spell checker using JavaScript and Internet Explorer’s DOM model. The code was really messy, but the tech demo made a great impact on the community and I received many words of praise from both interested parties and random people thinking how cool it was.

Since then the component was rewritten several times, and is now at a state where I could safely say, without false modesty, that it is the most technologically advanced spell check component on the market.

Over the following blog posts I’ll describe how I managed to overcome the obstacles I came across when first writing SharpSpell, and other development experiences and setbacks I came across.

³. I
⁴. It was definitely “amazing” back then, when AJAX was just a term you heard about in technology news feeds, but there weren’t many concrete examples of what it was and did.