Click here to Skip to main content
15,391,859 members
Articles / Programming Languages / C#
Posted 14 Mar 2008


142 bookmarked

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

Rate me:
Please Sign up or sign in to vote.
4.93/5 (54 votes)
14 Mar 2008CPOL3 min read
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:


Image 2

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 ) );

Image 3

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:


Image 4

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.

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

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

Comments and Discussions

QuestionDoubleClick on component Pin
Edoz3-Sep-21 7:17
MemberEdoz3-Sep-21 7:17 
QuestionPlease assist with Help on moving to runtime or serialization Pin
Tommyboii10-Jul-19 0:47
MemberTommyboii10-Jul-19 0:47 
QuestionHow to Handle click event in label textbox button inside Powerful DesignSurface (Extended) Class Pin
amit narayan sinha2-Nov-17 21:28
Memberamit narayan sinha2-Nov-17 21:28 
QuestionCan you Upload the Sample again? Pin
MX eSolutions17-Feb-16 3:43
MemberMX eSolutions17-Feb-16 3:43 
QuestionWhat for WPF Canvas? Pin
Fruit Teklu8-Feb-16 1:05
MemberFruit Teklu8-Feb-16 1:05 
AnswerRe: What for WPF Canvas? Pin
jogibear99883-Jun-16 20:03
Memberjogibear99883-Jun-16 20:03 
QuestionHow can I enable/disable grid option & zoom in/out & ViewSize in the menu Pin
Hyun-woo Jang3-Nov-14 15:47
MemberHyun-woo Jang3-Nov-14 15:47 
QuestionWarning possible Trojan in the .exe file of the downloadable code Pin
BillWoodruff12-Oct-13 19:48
mveBillWoodruff12-Oct-13 19:48 
AnswerRe: Warning possible Trojan in the .exe file of the downloadable code Pin
Member 103794886-Nov-13 14:22
MemberMember 103794886-Nov-13 14:22 
QuestionCould i contact you? Pin
Spessotto9-Oct-13 0:51
MemberSpessotto9-Oct-13 0:51 
QuestionEvents of Controls Pin
Jone Cunha9-Jan-13 7:06
professionalJone Cunha9-Jan-13 7:06 
Questionis it possible to run the designer surface at runtime Pin
ginnas28-Sep-12 3:26
Memberginnas28-Sep-12 3:26 
GeneralAwesome ! Pin
Mazen el Senih7-Apr-12 3:08
professionalMazen el Senih7-Apr-12 3:08 
GeneralMy vote of 5 Pin
Member 84305988-Mar-12 22:15
MemberMember 84305988-Mar-12 22:15 
GeneralExcellent Pin
Anandm12315-Sep-11 19:23
MemberAnandm12315-Sep-11 19:23 
GeneralMy vote of 5 Pin
nossarrio6-Jul-11 5:09
Membernossarrio6-Jul-11 5:09 
QuestionGr8 and simple sample Pin
alan brett powell26-Jun-11 2:00
Memberalan brett powell26-Jun-11 2:00 
GeneralMy vote of 5 Pin
alan brett powell26-Jun-11 1:58
Memberalan brett powell26-Jun-11 1:58 
Generalcreate DesignSurface using .Designer.cs file or .resx file Pin
vindanak11-May-11 18:46
Membervindanak11-May-11 18:46 
GeneralGreat Pin
thepbac3-Jun-10 15:47
Memberthepbac3-Jun-10 15:47 
QuestionHow to use Up,Down Key to move control Pin
heroyct26-May-10 16:06
Memberheroyct26-May-10 16:06 
AnswerRe: How to use Up,Down Key to move control Pin
Jean A Brandelero31-Jul-13 4:51
MemberJean A Brandelero31-Jul-13 4:51 
GeneralRe: How to use Up,Down Key to move control Pin
jiangma12-Mar-17 19:37
Memberjiangma12-Mar-17 19:37 
GeneralHosting a Form Designer (persisting a CodeDOMDesignerLoader) Pin
\\Coders\Rob13-Apr-10 3:26
Member\\Coders\Rob13-Apr-10 3:26 
GeneralRe: Hosting a Form Designer (persisting a CodeDOMDesignerLoader) Pin
mr_neuromante10-Sep-10 23:08
Membermr_neuromante10-Sep-10 23:08 

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

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