How to Pick Layout (Overview of Layouts)

Last Updated: 03/28/2018 Introduced in Version: 2.0

There are several layout options when working with forms and pages. This topic provides a description of what each layout provides and shows an example. The layout options are the same for forms and pages. The layout defines the visual structure of a form and page both in the respective Designer workspace and in the form or page when a user views it. Layouts are often used in conjunction with one another; for example, putting a grid layout inside of a stack panel, or a curve panel, or grid inside of a grid.

1-form-controls 
 
Canvas Layout
 
The Canvas layout is the most basic layout. It provides a container that acts like a background; form and/or page controls can be layered on top of the canvas. The color, border width, corner radius (to provide curved corners), and size are the properties available for this layout. Forms and pages with the Canvas layout may have their components placed anywhere on the workspace. The screenshot below shows a canvas on top of a grid layout.
2-canvas-layout 
 
 

Curve Panel Layout

The Curve Panel layout is similar to the canvas layout, providing a container that also acts as a background on which form and/or page controls are placed. The difference is that the border can be given a color and given varying thickness values, and varying corner radius values can also be used. This gives the ability to create a unique background appearance than the basic canvas layout. The screenshot below shows a curve panel on top of a grid layout. Containers like Canvas and Grid are themselves components.    
 
3-curved-penal
 

Grid Layout

The Grid layout contains rows and columns that form a grid. It provides granular control over the placement and size of form and page content. This is especially relevant when the form or page size is not explicitly defined; when a user resizes the form or page, there is potential for content to “float.” Components added to a section of the grid will be automatically set to the size of that section. Resizing the section will also resize the component, as well as the sections of the grid in the same row or column. The grid layout can be useful when the form or page has a lot of content and/or sophisticated design requirements since the grid can provide uniformity in placement, spacing, and padding. Grids can be nested, grid inside of another grid, for even more control over layout.
 
When using the grid layout, it is recommended to plan the content for the form or page. This is so you can set the approximate number of columns and rows, their padding, and sizing. Best practice is to first set up the grid with the desired layout and then add the components to its cells.
 
 4-data-grid 
 

Header Container Layout

The Header Container layout acts as a “header” for a page or form. Use it for differentiating instructions for a form, for example, or have “fine print” inside of a Header Container that is collapsed by default.
 
5-header-container 
 
In the Properties panel for the Header Container, the Settings > Part Type drop-down list offers the following options:
 
 6-types-to-select
 
  • BaseContent – This is the default, and gives the appearance that the Header Container is its own distinguished section of the form or page.
  • Container – Makes the Header Container transparent.
  • Child – Shrinks the title bar to make it appear secondary to the default BaseContent setting.
  • Chromeless – Makes the Header Container transparent, and strips away the header so the container renders like it doesn’t have any appearance-related properties.

Here is what the Header Container, set to use the default BaseContent part type looks like when run:

 

 7-run-head-container

Horizontal Split Panel Layout

The Horizontal Split Panel layout provides two panels, so the layout is separated horizontally. When the form or page runs, the user can move the divider left or right. The ability to move the divider is helpful when the user needs more space to get a better view of the content. Only two panels are available, and by default, they are set to 50%.
 
 8-horizontal-split
 

Horizontal Stack Layout

The Horizontal Stack layout allows for components to be set one after another, horizontally. Each added component automatically resizes to the height of the workspace; the width of a component can be manually adjusted.
 9-horizontal-stack
 
Adding to the Horizontal Stack is done by dragging and dropping components from the TForm Control into the stack. The width of the component is easily adjusted by dragging the yellow border lines.
 
 10-drag-the-border-line
 

Scroll Panel Layout

The Scroll Panel Layout provides a container that offers horizontal and vertical scroll bars for when the content of the container is bigger than the container itself. This is useful for small forms or pages, or forms or pages that do not have a lot of space to accommodate a full-sized text area for comments, for example.
11-scroll-bar 
 
 

Tab Layout

 
The Tabs layout allows us to place components on tabs. We click a tab at the top of the workspace to add components to it. To rename a tab, we locate the Layout section in the Properties panel, select a tab from the list and click Edit. We may also add or remove tabs as needed.
 
The Vertical Stack layout allows us to set components one after another, vertically. Each added component will automatically be resized to the width of the workspace. We must manually resize the height of a component.
 
Finally, we change the layout to Tabs.
 
 
 
 

Additional Resources