ASP.NET 控件開發系列（六）：UITypeEditor 實作屬性值下拉選單與繪製預覽

UITypeEditor 讓屬性在 PropertyGrid 中呈現自訂下拉介面或繪製預覽圖示（如 ColorPicker 的色塊、Dock 的圖示），大幅提升設計時體驗。

兩大功能模式

繪製預覽：撲克花色圖示範例

[Editor(typeof(CardTypesEditor), typeof(UITypeEditor))]
public class CardTypes { public CardType Value { get; set; } }

public class CardTypesEditor : UITypeEditor
{
    public override bool GetPaintValueSupported(ITypeDescriptorContext context) => true;

    public override void PaintValue(PaintValueEventArgs e)
    {
        string bmpName = null;
        var card = (CardTypes)e.Value;
        switch (card.Value)
        {
            case CardType.Hearts: bmpName = "Hearts.bmp"; break;
            case CardType.Spades: bmpName = "Spades.bmp"; break;
            case CardType.Diamonds: bmpName = "Diamonds.bmp"; break;
            case CardType.Clubs: bmpName = "Clubs.bmp"; break;
        }
        if (bmpName != null)
        {
            using (var bmp = new Bitmap(typeof(CardTypesEditor), bmpName))  // 嵌入資源
            {
                e.Graphics.DrawImage(bmp, e.Bounds);
            }
        }
    }
}

圖片需設為嵌入資源，尺寸 16x16，BMP 格式。

下拉編輯器：自訂介面（概念）

public override object EditValue(ITypeDescriptorContext context, IServiceProvider provider, object value)
{
    var edSvc = (IWindowsFormsEditorService)provider.GetService(typeof(IWindowsFormsEditorService));
    var control = new MyCustomDropDownControl((MyType)value);
    edSvc.DropDownControl(control);
    return control.SelectedValue;
}

標記屬性關聯編輯器

public class MyControl : WebControl
{
    [Editor(typeof(MyCustomEditor), typeof(UITypeEditor))]
    public MyType MyProperty { get; set; }
}

進階：TypeConverter 配合

• TypeConverter 負責字串↔物件轉換、標準值列表（下拉文字清單）
• UITypeEditor 負責視覺化編輯介面
• 兩者可同時套用：[TypeConverter(typeof(MyConverter))] [Editor(typeof(MyEditor), typeof(UITypeEditor))]