Click here to Skip to main content
13,295,243 members (63,076 online)
Click here to Skip to main content
Add your own
alternative version


126 bookmarked
Posted 14 Mar 2008

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

, 14 Mar 2008
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.

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

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

You may also be interested in...


Comments and Discussions

QuestionHow to Handle click event in label textbox button inside Powerful DesignSurface (Extended) Class Pin
amit narayan sinha2-Nov-17 22:28
memberamit narayan sinha2-Nov-17 22:28 
QuestionCan you Upload the Sample again? Pin
ManuelSoftware17-Feb-16 4:43
memberManuelSoftware17-Feb-16 4:43 
QuestionWhat for WPF Canvas? Pin
Fruit Teklu8-Feb-16 2:05
memberFruit Teklu8-Feb-16 2:05 
AnswerRe: What for WPF Canvas? Pin
jogibear99883-Jun-16 21:03
memberjogibear99883-Jun-16 21:03 
QuestionHow can I enable/disable grid option & zoom in/out & ViewSize in the menu Pin
Hyun-woo Jang3-Nov-14 16:47
memberHyun-woo Jang3-Nov-14 16:47 
QuestionWarning possible Trojan in the .exe file of the downloadable code Pin
BillWoodruff12-Oct-13 20:48
memberBillWoodruff12-Oct-13 20:48 
AnswerRe: Warning possible Trojan in the .exe file of the downloadable code Pin
Member 103794886-Nov-13 15:22
memberMember 103794886-Nov-13 15:22 
QuestionCould i contact you? Pin
Spessotto9-Oct-13 1:51
memberSpessotto9-Oct-13 1:51 
QuestionEvents of Controls Pin
jone.cunha9-Jan-13 8:06
memberjone.cunha9-Jan-13 8:06 
Questionis it possible to run the designer surface at runtime Pin
ginnas28-Sep-12 4:26
memberginnas28-Sep-12 4:26 
GeneralAwesome ! Pin
Mazen el Senih7-Apr-12 4:08
memberMazen el Senih7-Apr-12 4:08 
GeneralMy vote of 5 Pin
Member 84305988-Mar-12 23:15
memberMember 84305988-Mar-12 23:15 
GeneralExcellent Pin
Anandm12315-Sep-11 20:23
memberAnandm12315-Sep-11 20:23 
GeneralMy vote of 5 Pin
nossarrio6-Jul-11 6:09
membernossarrio6-Jul-11 6:09 
QuestionGr8 and simple sample Pin
alan brett powell26-Jun-11 3:00
memberalan brett powell26-Jun-11 3:00 
GeneralMy vote of 5 Pin
alan brett powell26-Jun-11 2:58
memberalan brett powell26-Jun-11 2:58 
I have spent hours and hours trying to figure out the designer surface many hours on google and stack overflow. This sample code got me exactly what I wanted in 2 hours I have implemented the solution I needed. Gr8
Generalcreate DesignSurface using .Designer.cs file or .resx file Pin
vindanak11-May-11 19:46
membervindanak11-May-11 19:46 
GeneralGreat Pin
thepbac3-Jun-10 16:47
memberthepbac3-Jun-10 16:47 
QuestionHow to use Up,Down Key to move control Pin
heroyct26-May-10 17:06
memberheroyct26-May-10 17:06 
AnswerRe: How to use Up,Down Key to move control Pin
Xinapstrink31-Jul-13 5:51
professionalXinapstrink31-Jul-13 5:51 
GeneralRe: How to use Up,Down Key to move control Pin
jiangma12-Mar-17 20:37
memberjiangma12-Mar-17 20:37 
GeneralHosting a Form Designer (persisting a CodeDOMDesignerLoader) Pin
Member 460531013-Apr-10 4:26
memberMember 460531013-Apr-10 4:26 
GeneralRe: Hosting a Form Designer (persisting a CodeDOMDesignerLoader) Pin
mr_neuromante11-Sep-10 0:08
membermr_neuromante11-Sep-10 0:08 
GeneralRe: Hosting a Form Designer (persisting a CodeDOMDesignerLoader) Pin
mr_neuromante11-Sep-10 0:26
membermr_neuromante11-Sep-10 0:26 
GeneralGreat Example Pin
TotalQuazar13-Jan-10 5:57
memberTotalQuazar13-Jan-10 5:57 
AnswerRe: Great Example Pin
Paolo Foti21-Feb-10 23:21
memberPaolo Foti21-Feb-10 23:21 
Generalabout web form designer Pin
wyj8066615-Jun-09 3:15
memberwyj8066615-Jun-09 3:15 
AnswerRe: about web form designer Pin
Paolo Foti21-Feb-10 23:52
memberPaolo Foti21-Feb-10 23:52 
GeneralEditare una form esistente Pin
allenbradley28-Apr-09 1:36
memberallenbradley28-Apr-09 1:36 
AnswerRe: Editare una form esistente Pin
Paolo Foti22-Feb-10 0:21
memberPaolo Foti22-Feb-10 0:21 
GeneralDisplaying control size and position at the bottom-right corner (like Visual Studio does) Pin
Member 291388410-Apr-09 3:17
memberMember 291388410-Apr-09 3:17 
AnswerRe: Displaying control size and position at the bottom-right corner (like Visual Studio does) Pin
Paolo Foti22-Feb-10 1:10
memberPaolo Foti22-Feb-10 1:10 
QuestionDoes your implementation solve the memory leak in the base DesignSurface? Pin
tribbles17-Feb-09 12:45
membertribbles17-Feb-09 12:45 
AnswerRe: Does your implementation solve the memory leak in the base DesignSurface? Pin
Paolo Foti25-Mar-09 5:20
memberPaolo Foti25-Mar-09 5:20 
Generalwithout TabOrderHooker Pin
aport@bupt10-Dec-08 22:27
memberaport@bupt10-Dec-08 22:27 
GeneralRe: without TabOrderHooker Pin
Paolo Foti22-Feb-10 1:14
memberPaolo Foti22-Feb-10 1:14 
QuestionSmart Tags Pin
danreber3-Oct-08 11:05
memberdanreber3-Oct-08 11:05 
QuestionRe: Smart Tags [modified] Pin
danreber3-Oct-08 11:10
memberdanreber3-Oct-08 11:10 
AnswerRe: Smart Tags Pin
venkeey9-Oct-08 14:52
membervenkeey9-Oct-08 14:52 
GeneralSerialization Pin
Michaelgor28-Sep-08 10:52
memberMichaelgor28-Sep-08 10:52 
AnswerRe: Serialization Pin
Paolo Foti15-Oct-08 0:40
memberPaolo Foti15-Oct-08 0:40 
GeneralRe: Serialization Pin
Fadik14-Jul-09 23:59
memberFadik14-Jul-09 23:59 
GeneralFantastic code Pin
gshea5-Sep-08 5:06
membergshea5-Sep-08 5:06 
GeneralRe: Fantastic code Pin
Paolo Foti22-Sep-08 4:06
memberPaolo Foti22-Sep-08 4:06 
QuestionHow to handle ComboBox Tasks pane Pin
dkalyan1-Sep-08 22:23
memberdkalyan1-Sep-08 22:23 
AnswerRe: How to handle ComboBox Tasks pane Pin
Paolo Foti22-Sep-08 4:03
memberPaolo Foti22-Sep-08 4:03 
GeneralContext Menu on Surface Pin
dkalyan22-May-08 0:11
memberdkalyan22-May-08 0:11 
AnswerRe: Context Menu on Surface Pin
Paolo Foti29-May-08 7:06
memberPaolo Foti29-May-08 7:06 
GeneralRe: Context Menu on Surface Pin
dkalyan1-Jun-08 22:18
memberdkalyan1-Jun-08 22:18 
GeneralDraging Controls From one panel to surface Pin
dkalyan14-May-08 20:30
memberdkalyan14-May-08 20:30 

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.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.171207.1 | Last Updated 14 Mar 2008
Article Copyright 2008 by Paolo Foti
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid