Overview
A layout defines the size of the application window's size and arranges 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 When planning your displays, decide if you need elements like a menu bar , toolbar, or other elements to always display or toolbar consistently appearing at the top of your application window. You may need only one layout to handle Sometimes, a single layout suffices for managing the information in the application.
The last display listed in the Layout tab In the layout, the Content display is the one that is replaced when you change the displaychanges upon an open display command. For exampleinstance, many new projects include solutions incorporate a default 'Startup' 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. In this layout, the 'MainPage' display, listed in the Content area, is what changes when the application receives a command to open a new display, while the header and menu areas remain unchanged.
On this page:
| Table of Contents | ||||
|---|---|---|---|---|
|
Configuring Layouts
Understanding Layout
DefinitionLayouts are pre-defined structures that determine the organization of UI components organize displays frames on a screen. They provide scaffolding for , positioning elements like menusthe header, menu, 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
Click..
Customizing Panels
Working with Layouts
Using Layouts
section, submenu, and footer. They organize information on pages and act as a blueprint for interfaces. You can select an existing Layout to edit or create a new one.
Creating New Layouts
To create a new Layout:
Navigate to Displays → Layouts.
Click the
button on the data grid control to open the 'New Layout' popup window.Define the name for the layout and a description.
Press Ok button to finish the layout creation and close the popup window.
Customizing Layouts Panel
On Displays → Layouts, after creating a new layout, you can customize it by defining the display objects for layout regions. The Layout Panel organizes information into displays by configuring regions such as Header, Menu, Content, Submenu, and Footer.
The displayed objects on each Layout are selected from the data grid below the panel. Each selected object is defined on the Layout Region configuration items and its respective values for Page, Mobile, and MobileLandscape.
The Header and Footer regions can be aligned with Stretch, Left, Center, or Right options.
In contrast, the Menu, Content, and Submenu regions adjust automatically based on the Header and Footer settings.
A resized bar can also be added to the Menu region for dynamic adjustment, facilitating a structured layout and enhanced navigation.
Mapping Pages to Layout Regions
To use a Layout, you must map a page to a region on data grid. This procedure ensures that your layout displays relevant information based on the underlying data.
Navigate to Displays → Layouts.
Create or Select a Layout:
Under the Page header, click on the empty and then "...".
The Select Object Dialog window will open. Choose the desired option.
| Tip | ||
|---|---|---|
| ||
By default, the Web, Mobile, and Landscape clients will use the page configured for the section (if that page is portable or web-compatible), even if the configuration field is left blank. If you do not want that page to be used, you need to remove it by adding an underscore (_) instead of just leaving the configuration blank. For example, if you defined a page for the Menu section that you don't want to have an equivalent on the Mobile client, just add the underscore character (_) in the field for Menu Mobile. When running the solution on that type of client, the system will not open any page for that section. |
Previewing Layouts Displays
Previewing layouts provides a crucial step in the development process, allowing you to catch design flaws or functional issues early. By following these steps, you ensure that your layouts meet your application’s visual and usability standards.
Navigate to Displays → Layouts.
Choose the layout you want to preview from the available options. Ensure that the layout is already mapped to the relevant page and data region (as discussed previously).
Under the Layout Panel table, there will be four different previews: Desktop Web Preview; Desktop on Windows WPF; Mobile; and Mobile Landscape.
Inspect the arrangement of components, colors, fonts, and overall design. Ensure that the layout aligns with your application’s requirements.
Working with Layouts
Configuring the Startup Layouts
To configure the solution startup to load a Layout, go to the Displays → Client Settings. Under Initial Execution Conditions, select the desired Layout item from the Layout menu. The drop-down menu reflects the layouts defined in the Layouts page.
Refer to Displays Client Settings for more details.
Changing Layouts in Runtime
The runtime method Client.OpenLayout("<layoutName>") replaces the current Layout on the Client Window, loading the new one.
Changing Displays in Runtime
If you don't need to change all the Layout panels, only the Content (main region), it's not necessary to create or open new layouts.
The methods Client.OpenDisplay("MyDisplay") and Display.MyDisplay.Open() will open the MyDisplay page using the current layout, just replacing the page in the Content Region, to the new display.
Layout Configuration Table
Properties Reference
Layouts properties
- 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:
- Left
- Top
- Right
- Bottom
HorizontalAlign
Select the horizontal alignment for this layout:
- Left
- Center
- Right
VerticalAlign
Select the vertical alignment for this layout:
- Top
- Center
- Bottom
Margins
Set the margin for this layout.
Splitter
--------------
Stretch
- Stretch
- Top
- Center
- Button
MobilePage
Select Object Dialog: Asset Path and ObjectName.
Left
| 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. |
Layout Settings Table | |
|---|---|
Property | Description |
ID | Unique identifier for each Layout Region. |
VersionID | Specifies the panel version. Increases with each change made to the panel. |
Region | Denotes specific areas within an application or page for content or actions. Header: This region appears at the top of the layout and includes the logo, site title, main navigation links, search bar, and possibly user account controls. Its purpose is to contain the key navigation elements. Its functionality is to identify the site or app and facilitate primary navigation and quick access. Content: This region typically contains the primary information or functionalities that users interact with, such as text, images, forms, and other interactive elements. Purpose: This is the main area where the core content is displayed. Functionality: This region is central to user interaction and displays critical information. Menu: This region includes links or buttons that navigate to different sections or pages within the application or website. It often appears on the left side of the screen. Purpose: It contains the main navigation menu. Functionality: It provides primary navigation and helps users move between major sections. Example: Left-side Menu panel. Submenu: This region provides additional navigation options or links related to the main content, often displayed to the right of the main content area. Purpose: It houses optional or secondary navigation elements. Functionality: It enhances user navigation by providing context-specific links or actions. Example: The right-side Submenu panel. Footer: This region is located at the bottom of the layout and includes copyright information, contact links, social media icons, and other ancillary information. Its purpose is to display supplementary information and links. Its functionality is to provide supporting information and site-wide links. Examples include the privacy policy, terms of service, site map, and back-to-top links. |
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. |
Specifies which display to assign to each region of WPF and HTML5 pages. | |
Mobile | Specifies which display to assign to each region of a mobile client. |
MobileLandscape | Specifies which display to assign to each region of a mobile client |
| 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 (stretch, 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 |
panel was created. | |
DateModified | The date and time when the |
panel was last modified. | |
Description | A text description |
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:
- DockPanel—Select to position displays in relation to the layout and other displays.
- Canvas—Select to position displays in an absolute position by entering the position in WPF units (device-independent pixels; one WPF = 1/96 inch).
Description
Enter a description of this layout.
Displays allowed in this layout
- Portable - Displays compatible with WPF and HTML5.
- WPF - Displays that requires WPF or portable displays.
- HTML5 - Displays that requires HTML5 or portable displays.
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
. |
In this section:
| Page Tree | ||||
|---|---|---|---|---|
|