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

Layout Table Control like HTML table, tr and td tags

, 28 Feb 2004
Rate this:
Please Sign up or sign in to vote.
Table Control to polish your forms layout.

Introduction

Have you ever worked on ASP.NET and than moved back to Windows programming using Windows forms? Did you miss something?

Well I did! Why are there no controls like the HTML <table>, <tr> and <td> tags (and controls) to polish your layout?

Microsoft will introduce them with the next version of Windows forms. If you do not want to wait, you might try this control.

Using the code

I have created three controls that will help you layout your Windows Forms applications using a HTML <table> like control without writing one line of code.

All you have to do is compile the TableControl project, add the TableControl.dll to your solution and add the TableControl Component to your Visual Studio Toolbox using Add/Remove Items... in the context menu.

After that you can use the TableControl just like any other Windows Forms control and drag it onto your form.

Add a couple of rows to the table and columns to the rows using the Collection Editor and you are all set. Drag any Windows Forms control to the columns and they will move just like HTML items added to a table.

To make your table useful, you have to specify how you want your rows and columns scaled. You have three choices: auto, percent, or pixel.

  • Auto will split the space available equally between the rows or columns - this is useful if you want to divide your form into a couple of sections.
  • Percent will give your row or column a defined percentage of the controls size - it allows to have smaller and wider rows or columns, that scale when resizing the form.
  • Pixel will give your row or column a fixed amount of pixels - which is useful for a row of buttons or a header that you want not to scale.

You can add rows, columns, set the type, width and height of the items added to the table.

The TableControl does not allow to add anything but a row to the table using the designer. And a row does not allow anything to be added but a column.

Points of Interest

I found it very easy to build a control and implement Visual Studio Designer support for custom collections.

All you have to do is implement the IList interface as I did for ColumnCollection and RowCollection. These Collections are used to keep references for all the rows (RowControl) and columns (ColumnControl) in my TableControl.

Since there is already a collection that keeps all the controls in a list, I implemented something like a "virtual" IList collection.

//
// A RowCollection is a proxy to the Controls collection inside
//
public class RowCollection : IList
{
    private TableControl parentTable;

    public RowCollection(TableControl parent)
    {
        this.parentTable = parent;
    }
    public bool IsReadOnly
    {
        get
        {
            return parentTable.Controls.IsReadOnly;
        }
    }

    object IList.this[int index]
    {
        get 
        {
            return this.parentTable.Controls[index];
        }
        set 
        {        
            throw new NotSupportedException("IList.this");
        }
    }
...

The RowCollection IList implementation always uses its parent's Controls collection to retrieve a row.

To use this collection with the Visual Studio Designer, you have to implement a public Indexer which allows you to access typed objects that are in the collection.

//
// This is the Indexer the designer is looking for...it will
// offer a collection editor for items of type RowControl
//
public RowControl this[int index]
{
    get
    {
        return parentTable.Controls[index] as RowControl;
    }
}

In my TableControl, the types TableControl, RowControl and ColumnControl are all derived from System.Windows.Forms.Panel. This adds support for borders and background colors - getting closer to an HTML table.

To make the TableControl easier to use in Visual Studio, I added public properties to the rows collection not only to the TableControl but also to the RowControl and the ColumnControl. This is really no trick since the collections are "virtual" anyway:

//
// This is the Indexer the designer is looking for...it
// will offer a collection editor for items of type RowControl
//
public RowCollection Rows
{
    get 
    {
        if (this.Parent is TableControl)
            return (this.Parent as TableControl).Rows;
        throw new ArgumentException("Row Control is not placed in a table.");
    }
}

This is really all you have to do to bring up the collection editor for the rows and columns from a table, row or column and have your own types inserted into your application's code:

To stop the designer from allowing other controls to be dragged directly into my table or my row, I added an override to my RowControl and TableControl implementation:

//
// Only allow a ColumnControl to be added 
//
protected override void OnControlAdded(ControlEventArgs e)
{
    if (e.Control is ColumnControl)
        base.OnControlAdded (e);
    else
        throw new ArgumentException("You cannot add a " + 
          "Control directly to a row. Please insert a Column.");
}

Finally, I do not want to allow anybody to drag a row or column to a form:

//
// Do not add RowControl and ColumnControl to the Toolbox,
// only TableControl can be added
//
ToolboxItem(false)]
public class RowControl : System.Windows.Forms.Panel
{
...

[ToolboxItem(true)]
public class TableControl : System.Windows.Forms.Panel
{
...

That's all.

History

First release.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

markusfi
Web Developer
Austria Austria
No Biography provided

Comments and Discussions

 
QuestionWhat is the license for this software? PinmemberHC7225-Apr-12 17:12 
QuestionCan't add the control to the toolbox uner VS2008 Pinmembersrjacob30-Mar-09 16:42 
Generaladd text in column of table PinmemberEEmaan30-May-07 1:19 
GeneralAnchor Bug PinmemberGianni Gardini 25-Sep-06 8:18 
GeneralBug Pinmember_iTcHy_21-Jun-05 2:36 
GeneralCouldn't build PinmemberLiamD9-Jun-05 5:24 
GeneralRe: Couldn't build PinsussBryan Baker20-Jun-05 13:15 
Generalyeah, that's good Pinmember_iTcHy_19-May-05 2:44 
QuestionDoes it support something like &quot;border-color&quot;, &quot;border-width&quot;, etc.? Pinmemberpercyboy7-Apr-05 20:32 
GeneralDesigner Serialization Pinmemberandrebrogli1-Mar-04 12:37 
GeneralGreat stuff... Pinmemberpikipoki1-Mar-04 11:37 
GeneralAny URL of the information... PinsitebuilderUwe Keim29-Feb-04 18:16 
GeneralRe: Any URL of the information... Pinmemberpikipoki1-Mar-04 11:39 
GeneralRe: Any URL of the information... Pinmemberjohn_coleman5-Apr-04 8:21 

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
Web03 | 2.8.141216.1 | Last Updated 29 Feb 2004
Article Copyright 2004 by markusfi
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid