Click here to Skip to main content
Click here to Skip to main content

Have a Great DesignTime Experience with a Powerful DesignSurface (Extended) Class

, 14 Mar 2008 CPOL
Rate this:
Please Sign up or sign in to vote.
Use design facilities (TabOrder, UndoEngine, SnapLines / Grid alignment) to design WinForms


The article describes a DesignSurface inherited class which adds some design facilities (TabOrder, UndoEngine, SnapLines / Grid alignment) to the .NET 2.0 class. This class is hosted inside a DLL Assembly and ready to use inside any .NET solution.


The .NET 2.0 Framework introduces the DesignSurface class which implements what the user perceives as a designer. This class is an improvement over the .NET 1.0 one, but it is still missing some design facilities which are very useful for the user who wants to design Forms. I'm talking about: TabOrder, UndoEngine and SnapLines/Grid alignment. All these features can be added with little effort (except maybe the TabOrder), nevertheless I want to make life a little easier for anyone who wants to make her/his own "designer".


You should be familiar with basic C# programming and with some concepts used by the .NET designer (especially if you dive into the source code).

How to Use DesignSurfaceExt

In short:

using DesignSurfaceExt;


Form frm = new Form();
    IDesignSurfaceExt surface = new DesignSurfaceExt.DesignSurfaceExt();
    surface.CreateRootComponent( typeof( Form ), new Size( 400, 400 ) );
    surface.CreateControl( typeof( Button ), new Size( 100, 40 ), new Point( 10, 10 ) );
    TextBox t1 = (TextBox) surface.CreateControl( typeof( TextBox ), 
        new Size( 300, 20 ), new Point( 10, 80 ) );
    t1.Text = "Hello World by DesignSurfaceExt";
    surface.GetView().Parent = frm;

The above code snippet simply creates a new DesignSurfaceExt instance. Use it via its interface to create the root component and any .NET control you desire, finally host the designsurface into a control, for example a Form; that all folks!

Tiny Form Designer, a Simple Demo Project to Show You the Power of the DesignSurfaceExt

Obviously you can do anything you want as I show you in the DemoConsole Project where I created a Tiny Form Designer! With this little designer, you can switch through four design surfaces hosted by four TabPages: one lets you align the controls using SnapLines facility; one using the "old" Grid; one using the Grid without snapping to the grid itself; and the last doesn't offer any alignment facility at all. Move the controls which have been programmatically deployed; cut and copy or cut and paste from one surface to another; undo and redo your actions and change the TabIndex of the controls with TabOrder facility.

The Interface

The really useful features are exposed through interface IDesignSurfaceExt but, if you prefer, you can ignore it and use the DesignSurfaceExt instance itself.

public interface IDesignSurfaceExt {

    //- perform Cut/Copy/Paste/Delete commands
    void DoAction( string command );

    //- de/activate the TabOrder facility
    void SwitchTabOrder();

    //- select the controls alignment mode
    void UseSnapLines();
    void UseGrid ( System.Drawing.Size gridSize );
    void UseGridWithoutSnapping ( System.Drawing.Size gridSize );
    void UseNoGuides();

    //- method useful to create control without the ToolBox facility
    IComponent CreateRootComponent ( Type controlType, Size controlSize );
    Control CreateControl ( Type controlType, Size controlSize, Point controlLocation );

    //- Get the UndoEngineExtended object
    UndoEngineExt GetUndoEngineExt();

    //- Get the IDesignerHost of the .NET 2.0 DesignSurface
    IDesignerHost GetIDesignerHost();

    //- the View of the .NET 2.0 DesignSurface is just a Control
    //- you can manipulate this Control just like any other WinForms Control
    //- (you can dock it and add it to another Control just to display it)
    //- Get the View
    Control GetView();


The SnapLines/Grid Alignment Guides

The use of the Snaplines to align the controls hosted by the DesignSurface is achieved by setting the right Property:


If you prefer to use the Grid to align the controls hosted by the DesignSurface, you must specify the size of the grid when calling the right Property:

surface.UseGrid ( new System.Drawing.Size ( 16, 16 ) );

You can also align the control with no guides at all:

surface.UseGridWithoutSnapping ( new System.Drawing.Size ( 32, 32 ) );

The TabOrder

And what about the Taborder? Simply call the interface method to activate and deactivate the facility:


The UndoEngine

Now the UndoEngine! Get it via the Property: GetUndoEngineExt() and use it calling the Undo/Redo actions:


Cut/Copy/Paste/Delete the Controls

Finally use the cut/copy/paste and delete as usual:

surface.DoAction( "Cut" );
surface.DoAction( "Copy" );
surface.DoAction( "Paste" );
surface.DoAction( "Del" );


DesignTime is something really different from RunTime but the .NET Framework lets us approach it in a relatively simple manner. Enjoy this, IMHO, useful class and let me know if you find it useful!


  • 14th March, 2008 - First release


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Paolo Foti
Software Developer (Senior)
Italy Italy
I started coding in 1984 on a ZX Spectrum. From the Sinclair Basic I jumped straight to C++ (which I use since 1992). I wrote code in assembly 386, ANSI C++ (I love it) and VisualBasic 6.0 (urgh!!!); nowadays I write code in C# 4.0!

I was born in 1968 in Italy and I live in the north west of my country (near Venice). I work as a Project Leader/Senior Developer for an Italian software house.

Computer Science interests: I like coding 3D-GameEngine and OpenGL applications.

Sport and hobbies: Martial Arts, trekking, travels, reading and writing novels.

Comments and Discussions

QuestionHow can I enable/disable grid option & zoom in/out & ViewSize in the menu [modified] PinmemberHyun-woo Jang3-Nov-14 16:47 
QuestionWarning possible Trojan in the .exe file of the downloadable code PinmemberBillWoodruff12-Oct-13 20:48 
AnswerRe: Warning possible Trojan in the .exe file of the downloadable code PinmemberMember 103794886-Nov-13 15:22 
QuestionCould i contact you? PinmemberSpessotto9-Oct-13 1:51 
QuestionEvents of Controls Pinmemberjone.cunha9-Jan-13 8:06 
Questionis it possible to run the designer surface at runtime Pinmemberginnas28-Sep-12 4:26 
GeneralAwesome ! PinmemberMazen el Senih7-Apr-12 4:08 
GeneralMy vote of 5 PinmemberMember 84305988-Mar-12 23:15 
GeneralExcellent PinmemberAnandm12315-Sep-11 20:23 
GeneralMy vote of 5 Pinmembernossarrio6-Jul-11 6:09 
QuestionGr8 and simple sample Pinmemberalan brett powell26-Jun-11 3:00 
GeneralMy vote of 5 Pinmemberalan brett powell26-Jun-11 2:58 
Generalcreate DesignSurface using .Designer.cs file or .resx file Pinmembervindanak11-May-11 19:46 
GeneralGreat Pinmemberthepbac3-Jun-10 16:47 
QuestionHow to use Up,Down Key to move control Pinmemberheroyct26-May-10 17:06 
AnswerRe: How to use Up,Down Key to move control PinprofessionalXinapstrink31-Jul-13 5:51 
GeneralHosting a Form Designer (persisting a CodeDOMDesignerLoader) PinmemberMember 460531013-Apr-10 4:26 
GeneralRe: Hosting a Form Designer (persisting a CodeDOMDesignerLoader) Pinmembermr_neuromante11-Sep-10 0:08 
GeneralRe: Hosting a Form Designer (persisting a CodeDOMDesignerLoader) Pinmembermr_neuromante11-Sep-10 0:26 
GeneralGreat Example PinmemberTotalQuazar13-Jan-10 5:57 
AnswerRe: Great Example PinmemberPaolo Foti21-Feb-10 23:21 
Generalabout web form designer Pinmemberwyj8066615-Jun-09 3:15 
AnswerRe: about web form designer PinmemberPaolo Foti21-Feb-10 23:52 
GeneralEditare una form esistente Pinmemberallenbradley28-Apr-09 1:36 
AnswerRe: Editare una form esistente PinmemberPaolo Foti22-Feb-10 0:21 
GeneralDisplaying control size and position at the bottom-right corner (like Visual Studio does) PinmemberMember 291388410-Apr-09 3:17 
AnswerRe: Displaying control size and position at the bottom-right corner (like Visual Studio does) PinmemberPaolo Foti22-Feb-10 1:10 
QuestionDoes your implementation solve the memory leak in the base DesignSurface? Pinmembertribbles17-Feb-09 12:45 
AnswerRe: Does your implementation solve the memory leak in the base DesignSurface? PinmemberPaolo Foti25-Mar-09 5:20 
Generalwithout TabOrderHooker Pinmemberaport@bupt10-Dec-08 22:27 
GeneralRe: without TabOrderHooker PinmemberPaolo Foti22-Feb-10 1:14 
QuestionSmart Tags Pinmemberdanreber3-Oct-08 11:05 
QuestionRe: Smart Tags [modified] Pinmemberdanreber3-Oct-08 11:10 
AnswerRe: Smart Tags Pinmembervenkeey9-Oct-08 14:52 
GeneralSerialization PinmemberMichaelgor28-Sep-08 10:52 
AnswerRe: Serialization PinmemberPaolo Foti15-Oct-08 0:40 
GeneralRe: Serialization PinmemberFadik14-Jul-09 23:59 
GeneralFantastic code Pinmembergshea5-Sep-08 5:06 
GeneralRe: Fantastic code PinmemberPaolo Foti22-Sep-08 4:06 
QuestionHow to handle ComboBox Tasks pane Pinmemberdkalyan1-Sep-08 22:23 
AnswerRe: How to handle ComboBox Tasks pane PinmemberPaolo Foti22-Sep-08 4:03 
GeneralContext Menu on Surface Pinmemberdkalyan22-May-08 0:11 
AnswerRe: Context Menu on Surface PinmemberPaolo Foti29-May-08 7:06 
GeneralRe: Context Menu on Surface Pinmemberdkalyan1-Jun-08 22:18 
GeneralDraging Controls From one panel to surface Pinmemberdkalyan14-May-08 20:30 
AnswerRe: Draging Controls From one panel to surface PinmemberPaolo Foti16-May-08 2:54 
GeneralRe: Draging Controls From one panel to surface Pinmemberdkalyan19-May-08 3:35 
GeneralRe: Draging Controls From one panel to surface PinmemberPaolo Foti19-May-08 6:27 
GeneralRe: Draging Controls From one panel to surface Pinmemberdkalyan21-May-08 22:33 
GeneralRe: Draging Controls From one panel to surface PinmemberQuico8-Dec-11 18:28 

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
Web01 | 2.8.150414.1 | Last Updated 14 Mar 2008
Article Copyright 2008 by Paolo Foti
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid