LIDOR SYSTEMS

Advanced User Interface Controls and Components

Layout WinForms using Table

November 2005

Objectives

  • To explain how to use Table layout engine to organize and order WinForms in tabular format

Contents

Introduction
Basics
Advanced operations with table
Creation of nested tables
Conclusion
Introduction

Did you find yourself wasting time in reordering controls while designing user interface layout? Isn't be much simple if you use table (like table in Word, Excel or HTML table)? In this article I will explain how to use the power of table layout engine which is part of LidorSystems.Collector library.

Basics

To start working with table you need to insert Page control from the toolbox on Form. After that, right click on the Page to insert table. A dialog is shown in which you enter basic parameters of the table, and a new table object is created.


Table Layout Engine in Docking Windows, Tabbed documents and Table layout for WinForms

Page control can have only one table object present. Table consist of cells ordered in columns and rows. Each cell can contain only one control at a time, but you can move controls from one cell to another with drag&drop. Cells can be resized, merged, split to form another cells. They have the ability to align their content in nine positions and most important they can lock content position and size. Content of cells can be control of any type that can be accepted by the Form, including Collector controls.

To add controls to the table simply drop it from the toolbox to the selected cell or copy/paste existing controls on your Form. When control is added, cell automatically adjust the size to the control size. This is because by default every cell has SizeType property value set to AutoSize. This property can receive two more values: Fixed and Free. Additionaly when you resize cells, their content will also resize. To prevent cells from resizing, SizeType property value of column or row, in which cell belong, must be set to Fixed.


Table Layout Engine in Docking Windows, Tabbed documents and Table layout for WinForms

 

For additional space you can insert columns or rows before or after selected cell. Selection of cells can be done either from the context menu by selection of columns or rows or with mouse dragging. After some cells are selected they can align their content in nine positions by setting their alignment type.



Table Layout Engine in Docking Windows, Tabbed documents and Table layout for WinForms
Advanced operations with table

The power of table lies in cells abillity to be resized, merged, splitted, autosized to accomodate their content. This way  you can quickly and easily adjust positions and size of your controls that maintain persistent. Further more cell content can be locked with setting the SizeType property value to Fixed.

Some controls need more space and cannot be added only in one cell. To create space for this controls first select some cells and then click on the Merge cells item from the context menu. Sometimes you will need to split cell to create additional cells. This can be done by selecting the cell that you want to split and click on the Split cell option from the context menu, upon which you will be asked of whether you want to split cell in number of rows or columns.



Table Layout Engine in Docking Windows, Tabbed documents and Table layout for WinForms

 

When you resize cells, if you feel that autosizing of controls is annoying to you, change SizeType of cells to Free. This way the size of controls will not be affected by resizing operations and in each cell you can set control to occupy smaller space of cell and further make control alignment to any side of the cell.

When you are done with placement of controls to the table and you want cells to have persistent size while changing the size of parent Page control (in which table object is placed), from the properties window expand the TableObject property and set the AutoSize property value to True. Further more lock rows or columns to prevent their cells from resizing.

Creation of nested tables

Sometimes the desired layout cannot be arranged by using simple table structure, even if there is merged or splitted cells. Solution to this problem is in creation of nested tables within cells.

To create nested table, add Page control to selected cell. Then in this page create table with custom number of columns and rows. Put some controls to this table. This way you can manage tables separatelly from one another, although they are nested.


Table Layout Engine in Docking Windows, Tabbed documents and Table layout for WinForms

 

Conclusion

Table layout engine through operations with each cell, row and column gives you possiblity to quickly form, align and arrange WinForms in tabular format in order to achieve the best look for your application.