Click here to Skip to main content
13,863,289 members
Click here to Skip to main content
Add your own
alternative version


131 bookmarked
Posted 14 Mar 2008
Licenced CPOL

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

AnswerRe: Draging Controls From one panel to surface Pin
Paolo Foti16-May-08 2:54
memberPaolo Foti16-May-08 2:54 
GeneralRe: Draging Controls From one panel to surface Pin
dkalyan19-May-08 3:35
memberdkalyan19-May-08 3:35 
GeneralRe: Draging Controls From one panel to surface Pin
Paolo Foti19-May-08 6:27
memberPaolo Foti19-May-08 6:27 
GeneralRe: Draging Controls From one panel to surface Pin
dkalyan21-May-08 22:33
memberdkalyan21-May-08 22:33 
GeneralRe: Draging Controls From one panel to surface Pin
Quico8-Dec-11 18:28
memberQuico8-Dec-11 18:28 
QuestionNice, but what about DesignSurfaceManager? Pin
Member 27922689-May-08 0:33
memberMember 27922689-May-08 0:33 
AnswerRe: Nice, but what about DesignSurfaceManager? Pin
Paolo Foti14-May-08 3:16
memberPaolo Foti14-May-08 3:16 
GeneralExcelent Pin
jmptrader17-Mar-08 4:36
memberjmptrader17-Mar-08 4:36 
AnswerRe: Excelent Pin
Paolo Foti18-Mar-08 0:08
memberPaolo Foti18-Mar-08 0:08 
GeneralRe: Excelent Pin
ignatius aris27-Aug-08 16:41
memberignatius aris27-Aug-08 16:41 

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 | Cookies | Terms of Use | Mobile
Web02 | 2.8.190214.1 | Last Updated 14 Mar 2008
Article Copyright 2008 by Paolo Foti
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid