Jason Prickett's Blog : WinForms

WinForms: Subclassing the TextBox inside a ComboBox

Jason Prickett — Mon, 24 Apr 2006 21:04:00 GMT

I learned something new today and decided to share it here.

Problem:

I have a form with a ComboBox that has a style of DropDown. This style allows the user to type anything into the ComboBox. To aid the user AutoComplete is turned on. But when the user used Ctrl+Z or Undo from the context menu. The value was not returned to its original value. The last autocompleted value was put back into the ComboBox. Generally, this meant that only the last character typed was removed. I wanted to control how Undo worked on the ComboBox.

Solution:

I tried subclassing the ComboBox and overriding WndProc in the ComboBox, but the EM_UNDO and EM_CANUNDO messages didn’t go there. So, I guessed that I had to subclass the TextBox inside the ComboBox. In windows, the ComboBox is a composite control made up of a TextBox, button, and a listbox.

Obstacle #1: WinForms doesn’t seem to expose the TextBox window in any public manner. For this reason, I resorted to calling a native method GetWindow to get the first child window of the combobox, which is the textbox.

Obstacle #2: GetWindow just returns a handle, what do I do with that? WinForms has a class called NativeWindow. It allows you to override the WndProc of any control given just the handle. So, I build a class called ComboTextBox that derived from NativeWindow and overrode WndProc for EM_UNDO and EM_CANUNDO.

Obstacle #3: Ctrl+Z worked great, just like I had planned. But the context menu for the ComboBox was not behaving. It was ignoring my ComboTextBox class or so I thought. I loaded Spy++ and took a look at the messages that the context menu was sending. I was surprised to find out that the context menu doesn’t send EM messages at all. It was sending WM_UNDO instead. So, I changed my WndProc to catch that message as well.

Here is the code that I ended up with (I think I got the clean up code correct, but I haven’t done much testing, yet):

class ComboBoxInternal : ComboBox

{

private ComboTextBox m_textBox;

private string m_undoValue;

public ComboBoxInternal()

{

}

public void Undo()

{

// code to undo to previous value

this.Text = m_undoValue;

}

public bool CanUndo()

{

// code to check if Undo is allowed

// for now return true

return true;

}

protected override void OnGotFocus(EventArgs e)

{

base.OnGotFocus(e);

m_undoValue = this.Text;

}

protected override void OnHandleCreated(EventArgs e)

{

base.OnHandleCreated(e);

m_textBox = new ComboTextBox(this);

}

protected override void OnHandleDestroyed(EventArgs e)

{

m_textBox.Dispose();

m_textBox = null;

base.OnHandleDestroyed(e);

}

#region ComboTextBox class

/// <summary>

/// Internal class to perform subclassing on the textbox

/// inside the Combo Box.

/// </summary>

private class ComboTextBox : NativeWindow, IDisposable

{

private IntPtr m_handle;

private ComboBoxInternal m_owner;

#region Unmanaged Code

[DllImport("user32")]

private static extern IntPtr GetWindow(IntPtr hWnd, int wCmd);

private const int GW_CHILD = 5;

private const int EM_CANUNDO = 0x00C6;

private const int EM_UNDO = 0x00C7;

private const int WM_UNDO = 0x0304;

#endregion

public ComboTextBox(ComboBoxInternal comboBox)

{

m_owner = comboBox;

m_handle = GetWindow(comboBox.Handle, GW_CHILD);

base.AssignHandle(m_handle);

}

protected override void WndProc(ref Message m)

{

switch (m.Msg)

{

case EM_CANUNDO:

m.Result = (IntPtr)(m_owner.CanUndo() ? 1 : 0);

break;

case WM_UNDO:

case EM_UNDO:

m_owner.Undo();

m.Result = (IntPtr)1;

break;

default:

base.WndProc(ref m);

break;

}

#region IDisposable Members

public void Dispose()

{

base.ReleaseHandle();

m_handle = IntPtr.Zero;

m_owner = null;

}

#endregion

}

#endregion

}

There is one remaining question that I need to figure out. What message or mechanism is being used to determine if Undo should be enabled on the context menu. Spy doesn’t seem to show any message that I think could be it. And there is not a WM_CANUNDO. For now this remains a mystery. If I wanted to handle more complicated Undo scenarios like multiple levels of undo, this would be more important to me. If you know the answer, please share it ;)

WinForms AutoLayout Basics – Button

Jason Prickett — Thu, 06 Apr 2006 23:46:00 GMT

I know. I know. You know everything there is to know about buttons. But, please bear with me. In my last post, I created a form that had two buttons, OK and Cancel. The form was very simple, but there are actually issues with the buttons on the form. The main problem is that the buttons don’t AutoSize. When the form is localized and “Cancel” turns into something that has 20 letters, the button size won’t change automatically. The new text will be truncated.

So how do we get the buttons ready for localization? Let’s take the previous post’s example as a starting point and test it out.

In the Load event for the form, add the following line of code:

buttonCancel.Text = “xxxxx Cancel xxxxx”;

Now run the form. Notice that the buttonCancel’s size did not change and that the text was truncated.

Let’s fix it.

Change the AutoSize property of buttonCancel and buttonOK to true.
Run the form again and see what happens now. Notice that buttonCancel got larger. This happened because the AutoSize property of the button was true and the column it is in is set to AutoSize. Notice also that buttonOK was moved over to make room for buttonCancel. In fact, the entire first column shrank to make room. This is because the first column is set to Percent. Any change in the AutoSize or Absolute style columns is absorbed by the Percent columns.
In the Load event for the form, add the following line of code (do not remove or change the first line you added):

buttonCancel.Text = “Cancel”;

Run the form again and see what happens now. Notice that buttonCancel is bigger than it needs to be. This is because the AutoSizeMode is GrowOnly. The button will only grow and never shrink to fit its contents. It is still big enough for the text “xxxxx Cancel xxxxx”.

Let’s fix it.

Change the AutoSizeMode property of buttonCancel and buttonOK to GrowAndShrink.
Run the form again and see what happens now. Notice that the buttons start off smaller. In fact, they shrank in the designer as well. This is exactly what we told the buttons to do but it isn’t very pretty. Typically you want the buttons to have a little padding around the text and a minimum size.

Let’s fix it.

Change the Padding property of buttonCancel and buttonOK to 10,0,10,0. This gives a little padding around to the left and right of the text.
Change the MinimumSize property of buttonCancel and buttonOK to 75,23. This is the default size that buttons are created with and is typically the smallest you would want a button to be.
Run the form again and see what happens now. Now the buttons shrink only to the minimum size that we gave them.

To summarize, Buttons should be put into a TableLayoutPanel and have the following properties set:

AutoSize = true

AutoSizeMode = GrowAndShrink

MinimumSize = (75, 23)

Padding = (10, 0, 10, 0)

Of course, the above suggestions don’t hold true for every dialog, but probably most.

WinForms AutoLayout Basics: TableLayoutPanel

Jason Prickett — Wed, 05 Apr 2006 22:57:00 GMT

So, you are designing a form in Visual Studio and you need the form to size dynamically to its contents. If you try every property on every control you might figure out how to do this. But you would be better off if you had an example. Check out this post and the ones that follow: http://blogs.msdn.com/permanenttan/archive/2006/03/07/545445.aspx. Tan did a lot of the hard work for you. Make sure you thank him :)

But the point of my post is to explain some of the controls and properties that you need to understand before trying this on your own.

Today: TableLayoutPanel

The TableLayoutPanel control is important to understand because every dialog you create will probably use it (once you understand how it works).

Basically, it’s a table with columns and rows. It’s similar to other tables you have used. The key properties are RowCount, ColumnCount, RowStyles, and ColumnStyles. But the TableLayoutPanel also adds properties to any control that resides in it. Those are Row, Column, RowSpan, and ColumnSpan (Cell is also added but is just a wrapper for Row and Column).

RowStyles and ColumnStyles are very similar. A style has a SizeType of AutoSize, Absolute, or Percent. AutoSize will shrink or expand to match its contents. Absolute keeps the row or column set to a fixed size, regardless of the size of the controls in it. Percent keeps the row or column set to a percent of the TableLayoutPanel’s height or width, respectively. Of course, Absolute and Percent require you to specify an amount.

When do you use AutoSize? Absolute? Percent?

Let’s work through an example step by step. I need to create a dialog that allows data entry of a name and a description. The name is a simple text box, but the description is a multi-line text box. The dialog has two buttons: OK and Cancel. It is important that the user be able to size the dialog in both directions and that the description stretch likewise in both directions. Here are the steps:

1. Create a new form in Visual Studio (I am using C#)

2. Set the padding on the form to 12,12,12,12. You may want to change the amount later, but use this for now.

3. Add a TableLayoutPanel to the form. Set Dock to Fill. It starts with two columns and two rows. Now, it’s decision time. Should the labels be on the left or on the top (assuming the language is English)? Should the buttons be at the bottom or on the right? For now I want the labels above the controls and the buttons on the bottom.

4. Keep the columns at two and add 4 more rows. How should you add rows? In the Designer there are two main ways: the Add Row menu item or the Edit Columns and Rows menu item on the Tasks menu of the TLP. For now simply select the Add Row menu four times. Four rows are added to the TLP with Absolute RowStyles (we will fix this later, making any of the rows autosize with nothing in them will cause them to disappear from the designer).

5. In row 0, column 0 put a label. Set the text to “Name:”. Set the Anchor to Left and Right. Set the Margin to 0,0,0,0.

6. In row 1, column 0 put a TextBox. Set the name to “tbName”. Set the Anchor to Left and Right. Set the Margin to 0,5,0,0.

7. In row 2, column 0 put a label. Set the text to “Description:”. Set the Anchor to Left and Right. Set the Margin to 0,6,0,0.

8. In row 3, column 0 put a TextBox. Set the name to “tbDescription”. Set the Anchor to Left, Top, Right and Bottom. Set the Margin to 0,5,0,0. Set MultiLine to True.

9. In row 4, leave it empty.

10. In row 5, column 0 put a button. Set the text to “OK”. Set the name to “buttonOK”. Set the Anchor to Bottom and Right. Set the Margin to 0,0,0,0. Set the DialogResult to OK.

11. In row 5, column 1 put a button. Set the text to “Cancel”. Set the name to “buttonCancel”. Set the Anchor to Bottom and Right. Set the Margin to 6,0,0,0. Set the DialogResult to Cancel.

12. Now that we have our controls in place, we can set the correct RowStyles and ColumnStyles. Select the TLP and choose Edit Columns and Rows from the Tasks menu.

13. It shows the columns by default. The second column is really just there for the Cancel button. We need to make it as small as possible and change the other controls to span across it. Set the style for the second column to AutoSize. This will cause the column to shrink to the width of the Cancel button (the only control in that column). Leave column one alone.

14. In the drop down, select Rows. We want the row that contains the Description text box to expand with the dialog. Set the style for the forth row (row 3 mentioned above) to Percent. We want the row that is empty to be exactly 10 pixels tall. Set the fifth row to Absolute (it should already be that), and set the amout to 10. All other rows should autosize to their contents. Set the first, second, third and sixth rows to AutoSize.

15. Once you click OK, your form should be close to what you want.

16. For the labels and textboxes, set the ColumnSpan to 2. This will cause them to stretch the entire width of the TLP.

17. Finally, let’s finish off the look of the form. Select the form. Set Text to “Edit Item”. Set AcceptButton to buttonOK. Set CancelButton to buttonCancel. Set ShowIcon to false. Set MinimizeBox to false. Set MaximizeBox to false.

Now we have a form to be proud of:

This is not a perfect form. If we localized it, we would still have some work to do, but the basics are there.

Try running the form and stretching it. The controls should behave as you would expect. If you size the form very small you may notice that the form could definitely use a minimum size.