email article printer friendly get the code more resources

Create a Custom UI Value Editor
Leverage inheritance to add developer-friendly features to a popup button control.
by Bill Storage

August 2003 Issue

Technology Toolbox: VB.NET

In last month's Desktop Developer column, I showed you a simple approach to building a popup button control with inheritance and GDI+, and emphasized its ease-of-use features for other developers who use the control. Now, you'll use the same control to advance this theme another step—by adding a UI value editor to last month's code. You'll tap the power of inheritance in .NET again, without using any Windows API or black-belt techniques.

The ImageButton control I showed you how to design last month uses three different images, obtained from an associated .NET ImageList control. You gave the ImageButton a design-time–only CurrentImageIndex to allow control users to cycle through the three images at design time. This feature is necessary because ImageIndex properties have integer values—the ordinal position of the related image. The integer value isn't particularly friendly at design time if the ImageList includes many images; a visual representation of the selected value would be better. So, I'll show you how to change the design-time display of the Up, Down, and HoverImageIndex properties to show both the ordinal value and the actual ImageList image at that position in the Properties browser ( download the sample code here).

This task involves informing VS.NET that your ImageIndex properties supply their own design-time editor, which appears in the Properties browser. In pre-.NET days, this required implementing IPerPropertyBrowsing, which was essentially impossible in VB. The technique you'll use requires no tricks, API calls, or anything of the sort.

The first task is to code a means of showing all the images from an ImageList in a vertical strip when the user selects ImageButton's Up, Down, or HoverImageIndex in the Properties browser. Do this by building a quick ImageBar control (see Figure 1). It doesn't need a slick programming interface, because you're the only person who ever uses the ImageBar directly. ImageBar simply draws an array of vertically arranged images, along with a number indicating each one's position. The drawing technique—a few lines of GDI+ in the OnPaint procedure—is similar to the one you used in the ImageButton itself, without the concern for mouse-button state (see Listing 1). ImageBar has a single event—IndexChanged. You must supply this event for the UI value editor, so that the Properties dropdown list closes after the user makes an ImageIndex selection.

You must make one small change to the ImageButton control code. You need to add an <Editor> attribute to the Up, Down, and HoverImageIndex properties to tell .NET that these properties use a custom editor. This causes a dropdown to appear for these properties in the Properties browser. The Editor constructor takes two arguments: your custom editor's type, and the .NET editor type from which your editor class derives—UITypeEditor, in this case:

<Editor(GetType(ImageButtonEditor), _
   GetType(UITypeEditor))

The inheritance introduction/refresher in last month's column will serve you here too. Your editor must override two methods of the UITypeEditor base class from which your editor derives—GetEditStyle and EditValue—in order to cooperate with the Properties browser (see Listing 2). This code isn't particularly difficult, but you probably haven't seen anything like it yet. The GetEditStyle and EditValue procedures you write for this project can serve as a template for all future UI value editors you build.