Creating Designers for Custom ASP.NET Server Controls
Over the past few months I have started building a number of custom ASP.NET server controls, something I had only before done once before. What I am finding is that I'm really enjoying the process, in part, I think, because it is a “closer to the metal” programming paradigm than just regular ASP.NET Web application programming. For those who aren't familiar, you can create your own custom Web controls with compiled code. This can be useful for extending the functionality of an existing Web control, or building your own custom Web controls that aren't available with ASP.NET by default. For example, in Easily Adding Functionality to ASP.NET Server Controls I look at how to extend the default Calendar Web control to use client-side script so that the day the mouse is hovering over is highlighted. Some wonderful examples of (free) custom ASP.NET server controls can be found at MetaBuilders.com.
When creating server controls, you can also optionally build a Designer class. The Designer class provides a rich GUI experience in the Visual Studio .NET designer. If you use VS.NET then you are already familiar with the WYSIWYG Design tab - you can drag and drop a Web control, set its properties, and blam-o, the control's visual changes due to the property changes are automatically reflected in the designer.
Unfortunately, I haven't been able to find much online information on creating Designer classes. Yes, there is G. Andrew Duthie's article Adding Design-Time Support to ASP.NET Controls, and there are assorted tidbits I've found on other sites, but nothing incredible comprehensive. The best resource I've found thus far is Chapter 15 of Developing Microsoft ASP.NET Server Controls & Components. (BTW, this book is a must have for anyone serious about ASP.NET server control development.) I've also found it helpful to look at the Designer classes created by other individuals.
One thing that I didn't find out until today (which is neatly tucked away on the last page of Chapter 15 in the aforementioned book), is how to debug Designer classes. If there is a bug in your Designer class, when someone drags and drops your custom server control from the Toolbox onto the Design tab, a little box will appear saying there is some error in displaying the control. That's it! No hint or clues as to what might be causing the problem. Debugging the Designer class, however, is possible, with the following steps:
- In the Designer class Project, access the Project's Property dialog box by right-clicking on the Project name in the Solution Explorer and choosing Properties.
- Go to the Debugging settings in the Configurations Properties folder and choose the Debug Mode as Program.
- Set the Start Application as devenv.exe (you may need to include the path to the file - this is the Visual Studio .NET IDE EXE file...)
- Set a breakpoint in your Designer class at an appropriate location...
- Hit F5 to start debugging, this will open up another instance of VS.NET
- Create a new ASP.NET Web application and add to the References folder the assembly that contains the Designer class.
- Drag and drop your custom control from the Toolbox onto the Design tab - you should be taken to the breakpoint in your Designer class.
Also, if you find looking at others' Designer classes as a good education tool, I invite you to check out an open-source project I started up last month called skmMenu. It's an ASP.NET menu control, with full source code available for free, including a Designer class. You can find it on the GotDotNet Workspaces. Also there will (eventually) be two articles about skmMenu up on the MSDN ASP.NET Dev Center.