Design-Time Integration—UI Type Editors

Microsoft .NET Framework, ASP.NET, Visual C# (CSharp, C Sharp, C-Sharp) Developer Training, Visual Studio

CSharp-Online.NET:Articles

C# Articles

Design-Time Integration of Windows Forms Components Components Integration Basics Extender Property Providers Type Converters UI Type Editors Drop-Down UI Type Editors Modal UI Type Editors Custom Designers Where Are We?

© 2004 Chris Sells

UI Type Editors

ExpandableObjectConverters help break down a complex multivalue property into a nested list of its atomic values. Although this technique simplifies editing of a complicated property, it may not be suitable for other properties that exhibit the following behavior:

• Hard to construct, interpret, or validate, such as a regular expression

• One of a list of values so large it would be difficult to remember all of them

• A visual property, such as a ForeColor, that is not easily represented as a string

Actually, the ForeColor property satisfies all three points. First, it would be hard to find the color you wanted by typing comma-separated integers like 33, 86, 24 or guessing a named color, like PapayaWhip. Second, there are a lot of colors to choose from. Finally, colors are just plain visual.

In addition to supporting in-place editing in the Property Browser, properties such as ForeColor help the developer by providing an alternative UI-based property-editing mechanism. You access this tool, shown in Figure 9.27, from a drop-down arrow in the Property Browser.

Figure 9.27. Color Property Drop-Down UI Editor

The result is a prettier, more intuitive way to select a property value. This style of visual editing is supported by the UI type editor, a design-time feature that you can leverage to similar effect. There are two types of "editor" you can choose from: modal or drop-down. Drop-down editors support single-click property selection from a drop-down UI attached to the Property Browser. This UI might be a nice way to enhance the clock control's Face property, allowing developers to visualize the clock face style as they make their selection, shown in Figure 9.28.

Figure 9.28. Custom View Drop-Down UI Editor

You begin implementing a custom UI editor by deriving from the UITypeEditor class (from the System.Drawing.Design namespace):

public class FaceEditor : UITypeEditor { ... }

The next step requires you to override the GetEditStyle and EditValue methods from the UITypeEditor base class:

public class FaceEditor : UITypeEditor {
  public override UITypeEditorEditStyle GetEditStyle(
    ITypeDescriptorContext context)
  {...}
 
  public override object EditValue(
    ITypeDescriptorContext context,
    IServiceProvider provider,
    object value)
   {...}
}

As with type converters, the appropriate UI type editor, provided by the GetEditor method of the TypeDescription class, is stored with each property. When the Property Browser updates itself to reflect a control selection in the Designer, it queries GetEditStyle to determine whether it should show a drop-down button, an open dialog button, or nothing in the property value box when the property is selected. This behavior is determined by a value from the UITypeEditorEditStyle enumeration:

enum UITypeEditorEditStyle {
  DropDown, // Display drop-down UI
  Modal, // Display modal dialog UI
  None, // Don't display a UI
  }

Not overriding GetEditStyle is the same as returning UITypeEditorEditStyle.None, which is the default edit style. To show the drop-down UI editor, the clock control returns UITypeEditorEditStyle.DropDown:

public class FaceEditor : UITypeEditor {
  public override UITypeEditorEditStyle GetEditStyle(
   ITypeDescriptorContext context) {
   
   if( context != null ) return UITypeEditorEditStyle.DropDown;
     return base.GetEditStyle(context);
     }
   ...
   }

ITypeDescriptorContext is passed to GetEditStyle to provide contextual information regarding the execution of this method, including the following:

• The container and, subsequently, the designer host and its components

• The component design-time instance being shown in the Property Browser

• A PropertyDescriptor type describing the property, including the TypeConverter and UITypeEditor assigned to the component

• A PropertyDescriptorGridEntry type, which is a composite of the PropertyDescriptor and the property's associated grid entry in the Property Browser

Whereas GetEditStyle is used to initialize the way the property behaves, EditValue actually implements the defined behavior. Whether the UI editor is drop-down or modal, you follow the same basic steps to edit the value:

1. Access the Property Browser's UI display service, IWindowsFormsEditorService.

2. Create an instance of the editor UI implementation, which is a control that the Property Browser will display.

3. Pass the current property value to the UI editor control.

4. Ask the Property Browser to display the UI editor control.

5. Choose the value and close the UI editor control.

6. Return the new property value from the editor.