Design Time Integration - VS.NET IDE Enhancements

Article
11/08/2006

Introduction

Each and every project deals with adding some custom properties to the classes provided by Framework Class Library. This can be achieved by inheriting the base class and providing more functionality to it by adding properties and methods. This is quite usual in all the projects. This suits well in UI class libraries. For example we might need to add some more properties to the System.Windows.Forms.Form class which meets our requirement. For this we will create our own class which inherits from System.Windows.Forms.Form class and we will provide our own implementation to it. Normally the developers will try to assign values to the custom properties through code. If the property is simply a text property , then they can use the property window to assign values to the properties in design time. But if we want to do some complex logic like, fetching values from database then we cannot use the default feature provided by vs.net. In these situations we need to provide a UI in the property window. In this article we will discuss about this.

Namespaces Used

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

Let’s Define Our Problem
Let’s say in our project, each and every form should set the SQL server table which is used as the primary table for some security settings. For this we need create a class which inherits from System.Windows.Forms.Form class and we need to add a property to get the table name. Let’s name the property as “Primary Table”. For this we need to provide a UI in the property window, so that the implementers will use the same to select the table from SQL Server.

Solution to our problem

VS.Net has been designed in such a way that we can plug-in various custom components to solve our own problems. VS.Net is an unmanaged code and it allows us to plug-in managed components and run the same with in that. This is one of the beauty of the architecture used in VS.NET IDE.

About System.Drawing.Design.UITypeEditor

This is the class which helps us to create a component which can be plugged in as an UI for our property in the properties window of VS.NET. We need to create a class which inherits from this class and we can provide our own implementations by overriding some methods. Let’s start creating our pluggable component and let’s name the component as SQLObjectPicker.
1. Create a class library project using vs.net and name the project as IDECustomComponents.
2. In the project add a reference to System.Drawing.Design.dll.
3. Create a class named SQLObjectPicker.
4. Inherit the class from System.Drawing.Design.UITypeEditor class.
5. In the class override the follwing functions.
a. GetEditStyle
b. EditValue

Imports System.Drawing.Design
Public Class SQLObjectPicker
Inherits UITypeEditor

Public Overloads Overrides Function GetEditStyle(ByVal context As System.ComponentModel.ITypeDescriptorContext) _
As System.Drawing.Design.UITypeEditorEditStyle
Return UITypeEditorEditStyle.Modal
End Function

Public Overloads Overrides Function EditValue(ByVal context As System.ComponentModel.ITypeDescriptorContext, _
ByVal provider As System.IServiceProvider, ByVal value As Object) As Object
‘ Our custom code goes here..
End Function
End Class

6. Now we will create a form which will populate all the tables from sql server and show it in combo box. For that add system.windows.forms.dll reference
7. Create a new winform named “MyPicker”. In the form we need to connect to SQL server and get the tables. But in this article let’s hardcode the values in the form Load Event.
8. In the Edit Value sub-routine of SQLObjectPicker class copy the following lines of code. In this method we will show our custom picker.

Public Overloads Overrides Function EditValue(ByVal context As System.ComponentModel.ITypeDescriptorContext, _
ByVal provider As System.IServiceProvider, _
ByVal value As Object) As Object
Try
Dim obj As New MyPicker
obj.ShowDialog()
Value = obj.cboTables.Text
Return value
Catch ex As Exception
MsgBox(ex.ToString())
End Try
End Function

Creating a base UI class which has the Primary Table property.

1. In the same project add another winform and name the form as CustomFormBase and add the follwing property

How will VS.NET identify that for this property, it should show a custom picker?

This is through attributes. As soon as we place the following attribute to the property, vs.net calls the appropriate component specified in the attribure.
In our case SQLObjectPicker is the component.

<BrowsableAttribute(True), EditorAttribute(GetType(SQLObjectPicker,GetType(System.Drawing.Design.UITypeEditor))>_

That’s it Our Custom picker is ready. Create a project and create a form which inherits from CustomFormBase. In the propery window we can see our PrimaryTable property with a button. As soon as we click on the button, our table picker will popup.

Conclusion

1. Don’t let the code to directly inherit from the class provided by FCL, at least have one level of inheritance and start the coding from that level (where ever applicable). This will helps us to get one level of control over all the classes which inherits your class.
2. These types of pickers will increase the developers productivity
3. These pickers will give professional look to our applications.
4. This is best suited for projects which deals with developing a framework which will be used for development by developers.