Building a Form’s LayoutLast Updated: 12/07/2015 Introduced in Verision: 2.0 |
The form layout defines the visual structure of a form’s fields, labels and other components both in the workspace of the Form Designer and in the form when a user views it. The layout can be set when creating a form or can be changed when editing it.The Form Designer includes five standard layouts: Canvas, Grid, Vertical Stack, Horizontal Stack and Tabs.
To change a form’s layout, select the Surface component in the Explorer panel, then select the layout from the Properties panel’s Container Type drop-down list.
Example
Creating a form and demonstrate types of form layouts.
To begin, select a project folder and click the Create Form drop down button and the choose the Create From.option.
Give the form a name and click OK.
By default, our new form will have the least restrictive layout type – Canvas. The layout type displays in the Properties panel, in the Layout section, in the Container Type drop-down list.
Forms with the Canvas layout may have their components placed anywhere on the workspace. We locate a component under the Components panel, then drag it to the workspace.
To change the layout, we expand the Explorer panel at the bottom-right corner of the workspace.
We select Surface.
Next, we locate the Layout section in the Properties panel. In the Container Type drop-down list, we select the Grid layout.
The Grid layout allows us to set guidelines to help with the formatting of our form by resizing each row and column in the grid. 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.
Note that the components we added to the Canvas layout now appear as one section of the grid. Containers like Canvas and Grid are themselves components. By expanding the Container category in the Components pane, we can add any container to any layout. Further, we can edit any of the components within the Canvas or even the Canvas itself.
We change the layout to Vertical Stack.
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.
We change the layout again to Horizontal Stack.
The Horizontal Stack layout allows us to set components one after another, horizontally. Each added component will automatically be resized to the height of the workspace. We must manually resize the width of a component.
Finally, we change the layout to Tabs.
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.
