Coded - Web Development and Programming Blog

This article describes how SharpSpell is able to modify existing TextBox controls to display wavy red underlines below misspelled words.

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.

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.

Technorati Tags: Windows.Forms, C#, User Interface, .NET Framework, Win32