Overview
A layout defines the size of the application window and the basic arrangement of display components in the runtime application. Be sure to plan how you want to use displays. For example, consider whether you want a menu bar, toolbar, or other elements to always display at the top of your application window.
You may need only one layout to handle the information in the application.
The last display listed in the Layout tab is the one that is replaced when you change the display. For example, new projects include a default layout called Startup. The MainPage display that is listed last is the default area that changes when you tell the application to open a display.
On this page:
Understanding Layout
Definition
Layouts are structures that determine the organization of UI components on a screen. They provide scaffolding for positioning elements like menus, content sections, and modules within an application or website.
Purpose
The purpose of Layouts is to establish flow within digital spaces, guiding users through content and functionalities. They act as the blueprint for creating interfaces for interaction and engagement.
Function
Layouts serve as the backbone of UI design, orchestrating hierarchy and prominence of elements. They group items, delineate areas, and manage space to prevent clutter. Layout design breaks down information into sections, facilitating user comprehension and action.
Operation
Layouts provide a grid-based or flexible framework for UI elements. Designers and developers map components to these frameworks, which adjust and align based on rules. This arrangement ensures the interface maintains its form and function across displays.
Application
Layouts are used in digital interfaces from desktop applications to mobile apps and web pages. Their application is important in platforms like e-commerce, digital dashboards, educational software, and any interactive service that requires a clear presentation of information.
Usage
Go to Displays → Layouts.
Configuring Layouts
Creating Layouts
Creating a new layout: go to Displays → Layouts and click the 'Insert new' button on the data grid control to open the 'New Layout' popup window. Then, define the name for the layout and select its layout Engine (Portable, WPF Only, or HMLT Only).
Customizing Panels
On Displays → Layouts, after creating a new layout, you can customize the layout by editing Header and Footer behaviors.
Panels
Header: edit options (Stretch, Left, Center, and Right)
Menu: adjust automatically based on header and footer behavior
Content: adjust automatically based on header and footer behavior
Submenu: adjust automatically based on header and footer behavior
Footer: edit options (Stretch, Left, Center, and Right)
It allows many layout possibilities. In addition, it offers an option to add a resizer bar for the Menu region.
Working with Layouts
Using Layouts
Properties Reference
Layouts properties
ID | A unique identifier for an element or object within a system. |
VersionID | Refers to the specific version of an element or object, for tracking changes or updates. |
Region | Denotes a specific area within an application or page for content or actions. |
Docking | Related to the attachment of an element or window to a portion of the screen. |
Page | Refers to a particular page within an application or a website. |
Mobile | Indicates if an element or feature is available or optimized for mobile devices. |
MobileLandscape | Refers to the layout or display of an application on a mobile device in horizontal orientation. |
HorizontalAlign | Alignment of an element along the horizontal axis (left, center, right). |
Splitter | A UI control that allows users to adjust the size of adjacent panes or areas. |
Row | Represents a horizontal grouping of data or controls in a grid or table. |
RowSpan | Indicates the number of rows a cell should span across in a grid or table. |
Column | A vertical division in a grid or table, like a column in a spreadsheet. |
ColumnSpan | Indicates the number of columns a cell should extend over in a grid or table. |
DateCreated | The date and time when the element or object was created. |
DateModified | The date and time when the element or object was last modified. |
Description | A text description of the element or object, detailing its purpose or contents. |
To create a layout:
- Go to Displays → Layouts.
- Click New.
- Enter or select information, as needed.
- Click OK.
Column | Description |
|---|---|
Layout name | Enter a name for the layout. |
Layout | Select the layout type:
|
Description | Enter a description of this layout. |
Displays allowed in this layout |
|
- Click Add Row to add a row for a display.
The displays you add here are the first displays the layout uses.
Enter or select information, as needed.
Column | Description |
|---|---|
Page | Select a display you want to include in the layout. Only page displays are available for use in a layout. |
Docking | Select the docking location for this display:
|
HorizontalAlign | Select the horizontal alignment for this layout:
|
VerticalAlign | Select the vertical alignment for this layout:
|
Margins | Set the margin for this layout. |
Splitter | -------------- |
Stretch |
|
MobilePage | Select Object Dialog: Asset Path and ObjectName. |
Left | Set the left position of the layout |
Top | Set the top position of the layout |
Target Layout size (on Edit Displays Layouts) | Select the default resolution for new layouts in the project. This does not affect existing layouts. |
Default Size when creating new Pages | Select the default resolution for new pages in the project. This does not affect existing pages. |
In this section: