Click here to Skip to main content
11,431,829 members (64,323 online)
Click here to Skip to main content

Creating Property Editors in DesignTime for VS.Net Easily (UITypeEditor Helper)

, 18 Mar 2007
Rate this:
Please Sign up or sign in to vote.
This is a base class to help easily create UITypeEditors. It is used to edit control properties in a DropDown window or a Modal-Form in design mode in the Visual Studio IDE

Introduction

This is ready-to-use code which helps you create your own UITypeEditors for design time editing of control properties in a DropDown or a ModalForm window at design mode in the Visual Studio IDE. To use it, inherits a class from it and add this attribute to your control property(ies):

<Editor(GetType(MyPropertyEditor), 
        GetType(System.Drawing.Design.UITypeEditor))>

Some samples are shown in the following images:

ListBox DropDown Editor TreeView DropDown Editor
Fig.1) Using a ListBox Editor Fig.2) Using a TreeView Editor

UserControl DropDown Editor

Fig.3) Using a UserControl Editor
ModalForm Editor
Fig.4) Using a Modal-Form Editor

The "PropertyEditorBase" Class

It is an abstract (MustInherit) class which is itself inherited from System.Drawing.Design.UITypeEditor. because using the UITypeEditor class requires some special code, we can put them into a base (helper) class and use it more easily later.

For example when the user presses the Esc key, the edit process should be canceled and previous property values should be returned to the IDE PropertyGrid. Or you always require to get the IWindowsFormsEditorService service with a line of code similar to:

IEditorService = 
   DirectCast(provider.GetService(GetType(IWindowsFormsEditorService)),
                                  IWindowsFormsEditorService )

These jobs are not so clear for a developer who wants to write a UITypeEditor quickly. I won't speak more this and will just provide the base helper class you may use to simplify this process. (if you want to see just How To Use it, see This Section of the article.)

Here is the code:

Imports System.Drawing
Imports System.Drawing.Design
Imports System.Windows.Forms
Imports System.Windows.Forms.Design
Imports System.ComponentModel


''' <span class="code-SummaryComment"><summary>
</span>
''' This is a UITypeEditor base class usefull for simple editing of control 
''' properties in a DropDown or a ModalForm window at design mode (in 
''' Visual Studio IDE). To use this, inherits a class from it and add this
''' attribute to your control property(ies): 
''' <span class="code-SummaryComment"><Editor(GetType(MyPropertyEditor), 
'''         GetType(System.Drawing.Design.UITypeEditor))>  
</span>
''' <span class="code-SummaryComment"></summary>
</span>
Public MustInherit Class PropertyEditorBase
    Inherits System.Drawing.Design.UITypeEditor

    ''' <span class="code-SummaryComment"><summary>
</span>
    ''' The driven class should provide its edit Control to be shown in the 
    ''' DropDown or DialogForm window by means of this function. 
    ''' If specified control be a Form, it is shown in a Modal Form, otherwise 
    ''' in a DropDown window. This edit control should return its final value 
    ''' at GetEditedValue() method. 
    ''' <span class="code-SummaryComment"></summary>
</span>
    Protected MustOverride Function GetEditControl(ByVal PropertyName As _
      String, ByVal CurrentValue As Object) As Control

    ''' <span class="code-SummaryComment"><summary>The driven class should return the New Edited Value at this 
</span>
    ''' function.<span class="code-SummaryComment"></summary>
</span>
    ''' <span class="code-SummaryComment"><param name="EditControl">
</span>
    ''' The control shown in DropDown window and used for editing. 
    ''' This is the control you pass in GetEditControl() function.
    ''' <span class="code-SummaryComment"></param>
</span>
    ''' <span class="code-SummaryComment"><param name="OldValue">The original value of the property before 
</span>
    ''' editing<span class="code-SummaryComment"></param>
</span>
    Protected MustOverride Function GetEditedValue(ByVal EditControl As _
      Control, ByVal PropertyName As String, _
               ByVal OldValue As Object) As Object

    Protected IEditorService As IWindowsFormsEditorService
    Private WithEvents m_EditControl As Control
    Private m_EscapePressed As Boolean

    ''' <span class="code-SummaryComment"><summary>
</span>
    ''' Sets the edit style mode based on the type of EditControl: DropDown or
    ''' Modal(Dialog). 
    ''' Note that the driven class can also override this function and 
    ''' explicitly set its value.
    ''' <span class="code-SummaryComment"></summary>
</span>
    Public Overrides Function GetEditStyle(ByVal context As _
                               ITypeDescriptorContext) As UITypeEditorEditStyle
        Try
            Dim c As Control
            c = GetEditControl(context.PropertyDescriptor.Name, _
                context.PropertyDescriptor.GetValue(context.Instance))
            If TypeOf c Is Form Then
                Return UITypeEditorEditStyle.Modal 'Using a Modal Form
            End If
        Catch
        End Try
        'Using a DropDown Window (This is the default style)
        Return UITypeEditorEditStyle.DropDown
    End Function

    'Displays the Custom UI (a DropDown Control or a Modal Form) for value 
    'selection.
    Public Overrides Function EditValue(ByVal context As ITypeDescriptorContext,_
      ByVal provider As IServiceProvider, ByVal value As Object) As Object

        Try
            If context IsNot Nothing AndAlso provider IsNot Nothing Then

                'Uses the IWindowsFormsEditorService to display a drop-down
                'UI in the Properties window:
                IEditorService = DirectCast( _
                provider.GetService(GetType(IWindowsFormsEditorService)), _
                                    IWindowsFormsEditorService)

                If IEditorService IsNot Nothing Then

                    Dim PropName As String = context.PropertyDescriptor.Name

                    'get Edit Control from driven class
                    m_EditControl = Me.GetEditControl(PropName, value) 

                    If m_EditControl IsNot Nothing Then

                        m_EscapePressed = False    

                        'Show given EditControl
                        If TypeOf m_EditControl Is Form Then
                            IEditorService.ShowDialog(CType(m_EditControl, Form))
                        Else
                            IEditorService.DropDownControl(m_EditControl)
                        End If

                        If m_EscapePressed Then    'return the Old Value 
                                                   '(because user press Escape)
                            Return value
                        Else 'get new (edited) value from driven class and 
                             'return it
                            Return GetEditedValue(m_EditControl, PropName, value)
                        End If

                    End If 'm_EditControl

                End If 'IEditorService

            End If 'context And provider

        Catch ex As Exception
            'we may show a MessageBox here...
        End Try
        Return MyBase.EditValue(context, provider, value)

    End Function

    ''' <span class="code-SummaryComment"><summary>
</span>
    ''' Provides the interface for this UITypeEditor to display Windows Forms 
    ''' or to display a control in a DropDown area from the property grid 
    ''' control in design mode.
    ''' <span class="code-SummaryComment"></summary>
</span>
    Public Function GetIWindowsFormsEditorService() As _
                                                   IWindowsFormsEditorService
        Return IEditorService
    End Function

    ''' <span class="code-SummaryComment"><summary>Close DropDown window to finish editing</summary>
</span>
    Public Sub CloseDropDownWindow()
        If IEditorService IsNot Nothing Then IEditorService.CloseDropDown()
    End Sub

    Private Sub m_EditControl_PreviewKeyDown(ByVal sender As Object, _
                                 ByVal e As PreviewKeyDownEventArgs) _
                                      Handles m_EditControl.PreviewKeyDown
        If e.KeyCode = Keys.Escape Then m_EscapePressed = True
    End Sub

End Class

How To Use

It has two MustOverride (abstract) functions which should be defined by driven class. these are:

Function GetEditControl(ByVal PropertyName As String, _
                        ByVal CurrentValue As Object) As Control

and

Function GetEditedValue(ByVal EditControl As Control, _
                        ByVal PropertyName As String, _
                        ByVal OldValue As Object) As Object

The first should return the control to be used in property editor window (eg. a simple list box) and the second should return the new value for the property under edition. the driven class may use parameter information of these functions to return the proper value. For example in the ListBox sample, the initial item of the DropDown listbox is selected based on the CurrentValue of the property.

ListBox Editor Sample

Here is a sample control which uses this helper base class to define an Editor for its 'myProperty' property:

Imports System.ComponentModel

Public Class XTextBoxA
    Inherits TextBox

    Private m_myProperty As String = ""

    'This property uses our custom UITypeEditor: myListBoxPropertyEditor
    <EditorAttribute(GetType(myListBoxPropertyEditor), 
     GetType(System.Drawing.Design.UITypeEditor))> _
    Public Property myProperty() As String
        Get
            Return m_myProperty
        End Get
        Set(ByVal value As String)
            m_myProperty = value
        End Set
    End Property

End Class



' ////////////////////////////////////////////////////////////////////////////
'   myListBoxPropertyEditor => using a ListBox as EditControl
' ////////////////////////////////////////////////////////////////////////////
'
Public Class myListBoxPropertyEditor
    Inherits PropertyEditorBase

    Private WithEvents myListBox As New ListBox 'this is the control to be used 
                                                'in design time DropDown editor

    Protected Overrides Function GetEditControl(ByVal PropertyName As String, _
      ByVal CurrentValue As Object) As Control

        myListBox.BorderStyle = System.Windows.Forms.BorderStyle.None

        'Creating ListBox items... 
        'Note that as this is executed in design mode, performance is not 
        'important and there is no need to cache listbox items if they can 
        'change each time.
        myListBox.Items.Clear()    'clear previous items if any
        myListBox.Items.Add("AAA")
        '... Add other items...

        'Select current item based on CurrentValue of the property:
        myListBox.SelectedIndex = myListBox.FindString(CurrentValue)
        myListBox.Height = myListBox.PreferredHeight

        Return myListBox

    End Function


    Protected Overrides Function GetEditedValue(ByVal EditControl As Control, _
       ByVal PropertyName As String, ByVal OldValue As Object) As Object
        Return myListBox.Text 'return new value for property
    End Function


    Private Sub myTreeView_Click(ByVal sender As Object, ByVal e As _
                                     System.EventArgs) Handles myListBox.Click
        Me.CloseDropDownWindow() 'when user clicks on an item, the edit 
                                 'process is done.
    End Sub

End Class

You should call the CloseDropDownWindow method to close the DropDown editor window in an appropriate event. For a ListBox this is the ListBox "Click" event but for a TreeView it may be the TreeView "DblClick" event.

Note:

You can use this base class to define Editors which use any special controls. For example you may define a custom UserControl which shows some images (instead of a text-style Enum list) for setting a property which controls the graphical view of your main control.

download the source code to see all four samples shown in Fig.1 to Fig.4

See Also:

SmartTagDesigner Article: Helps developers to build customized design-time extensions for components and controls through smart tag designer panels.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

S.Serpooshan
Web Developer
United States United States
No Biography provided

Comments and Discussions

 
GeneralMy vote of 5 Pin
kevininstructor12-Dec-13 7:56
memberkevininstructor12-Dec-13 7:56 
GeneralMy vote of 5 Pin
Ron Hubenthal24-Sep-10 14:02
memberRon Hubenthal24-Sep-10 14:02 
QuestionUpdating Designer when Property Changed Pin
stixoffire22-Apr-09 10:31
memberstixoffire22-Apr-09 10:31 
GeneralThis example is excellent but... Pin
Member 472644830-Nov-08 3:23
memberMember 472644830-Nov-08 3:23 
GeneralDesign-Time Property Question Pin
Elkay9-Jul-08 10:41
memberElkay9-Jul-08 10:41 
QuestionFilter Listbox data [modified] Pin
aguidas12-Sep-07 9:09
memberaguidas12-Sep-07 9:09 
GeneralModal form doesn't work Pin
aermec31-Jul-07 21:28
memberaermec31-Jul-07 21:28 
GeneralRe: Modal form doesn't work Pin
micTronic16-Oct-07 2:43
membermicTronic16-Oct-07 2:43 
GeneralRe: Modal form doesn't work Pin
micTronic16-Oct-07 3:17
membermicTronic16-Oct-07 3:17 
GeneralRe: Modal form doesn't work fixed Pin
errorfunktion8-Nov-08 8:43
membererrorfunktion8-Nov-08 8:43 
GeneralThanks & C# version Pin
Wiebe Tijsma22-Jun-07 7:55
memberWiebe Tijsma22-Jun-07 7:55 
GeneralRe: Thanks & C# version [modified] Pin
Wiebe Tijsma15-Aug-07 2:39
memberWiebe Tijsma15-Aug-07 2:39 
GeneralBroken download link Pin
Lukky6-Mar-07 7:42
memberLukky6-Mar-07 7:42 
GeneralFixed Pin
Chris Maunder18-Mar-07 12:19
adminChris Maunder18-Mar-07 12:19 
GeneralRe: Fixed Pin
Lukky26-Mar-07 3:09
memberLukky26-Mar-07 3:09 
GeneralSource Pin
hipsvin26-Jan-07 2:38
memberhipsvin26-Jan-07 2:38 
GeneralThanks Pin
Polymorpher21-Jan-07 12:21
memberPolymorpher21-Jan-07 12:21 
GeneralWell done Pin
siroman14-Jan-07 21:39
membersiroman14-Jan-07 21:39 
GeneralWill add a reference to your article Pin
visualhint10-Jan-07 6:13
membervisualhint10-Jan-07 6:13 
GeneralRe: Will add a reference to your article Pin
S.Serpooshan13-Jan-07 9:40
memberS.Serpooshan13-Jan-07 9:40 
Generalvery nice Pin
devnet2479-Jan-07 23:28
memberdevnet2479-Jan-07 23:28 
GeneralRe: very nice Pin
S.Serpooshan10-Jan-07 3:03
memberS.Serpooshan10-Jan-07 3:03 
GeneralRe: very nice Pin
devnet24710-Jan-07 10:45
memberdevnet24710-Jan-07 10:45 
GeneralRe: very nice Pin
S.Serpooshan11-Jan-07 21:50
memberS.Serpooshan11-Jan-07 21:50 
GeneralRe: very nice Pin
devnet24712-Jan-07 20:02
memberdevnet24712-Jan-07 20:02 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.150428.2 | Last Updated 18 Mar 2007
Article Copyright 2007 by S.Serpooshan
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid