Overview
Define display object parameters such as mode, where you can select if it is a page, a popup, or a dialog. Customize the background, width, height, and borders. The "OnResize" setting in a graphical user interface (GUI) determines the behavior of an element (such as a panel, window, or image component) when the size of the container it is placed in changes. The options shown in the dropdown menu are typical of many software development frameworks, and each of them probably has the following behavior:
These properties are displayed in the Properties Sidebar on the right side of the Draw environment.
On this page:
Properties
Mode
Selects the display mode. Refers to how a display or user interface element behaves and interacts with other elements on the screen. It determines how the display is rendered, responds to user actions, and coexists with other displays or interfaces.
Page: Closes the last active page listed on the Displays → Layouts page when a new page is opened.
Popup: Overlays the current display on top of other displays without closing them. Automatically closes when a new page is opened.
Dialog: Opens a modal dialog that disables all underlying controls until the dialog is closed, requiring user interaction to proceed.
Background
Selects the background color for the display.
Color: Fills the background using a selected color.
Theme: Fills the background using a predefined palette associated with the selected theme. Read more Themes.
HPG: Fills the background using a predefined palette associated with the High-Performance Graphic (HPG).
Image: Fills the background using a selected image.
Width
Enters the display width in WPF units.
Height
Enters the display height in WPF units.
On Resize
Controls how the content within a display or window adjusts when the window is resized. The options available are:
StretchFill: Stretches the content to fill the entire space available when the window or display is resized. The aspect ratio of the content is not preserved, meaning the content may become distorted to fit the new dimensions.
StretchUniform: Stretches the content uniformly while preserving its original aspect ratio. The content scales to fit the window or display as closely as possible without distortion, but there may be empty space if the aspect ratio does not match.
Responsive: Adjusts the layout and size of the content dynamically in response to the window or display size changes. The content reorganizes or resizes itself to ensure it remains usable and visually appealing, typically without distortion.
When using Responsive layouts, the checkboxes on the Layout Section specified with coordinates will be changed, will ones are fixed. The coordinates that are Checked, are they ones that will be changed on the resize action. In this example, the Width of object will change proportionally to the changes of container, in practical terms it means that margin between the right edge of the element and the right border of the display remains constant.
NoAction: Leaves the content unchanged when the window or display is resized. The content retains its original size and position, meaning it may not fill the new space or may appear clipped if the display area is reduced
ResizeChildren: Adjusts the layout and size of the content dynamically in response to the window or display size changes. All elements in the display will have its top, left, width and heath properties changed accordingly the resize of the container painel.
Border
Selects the border type for the display. The options available are:
None: Removes the border entirely. The display or content will have no visible boundary, blending directly into the surrounding area.
Thin: Applies a thin border around the display or content. The border is minimal, providing a subtle outline that distinguishes the content from its surroundings.
Double: Applies a double line border around the display or content. The border consists of two parallel lines, offering a more pronounced and decorative boundary.
Flat3D: Applies a border with a flat 3D effect. It gives the appearance of depth or elevation to the content, making it look slightly raised or recessed relative to the surrounding area.
Resize: Enables a resizable border around the display or content. Users can interact with this border to resize the display area, adjusting its dimensions as needed.
In this section: