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:
| Table of Contents | ||||
|---|---|---|---|---|
|
Settings
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 in the Layout section with specified coordinates will change, while others remain fixed. The coordinates that are checked will adjust during resize actions. In this example, the width of the object changes proportionally to the container’s resizing. In practical terms, this means the 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.
Placement
Determines the positioning of the display on the screen (e.g., Center, TopLeft).
Center: Positions the display in the center of the parent container or screen. Useful for modal dialogs or popups.
TopLeft: Positions the display in the top-left corner of the parent container or screen. Suitable for notifications or menus.
TopRight: Positions the display in the top-right corner of the parent container or screen. Commonly used for alerts or status indicators.
BottomLeft: Positions the display in the bottom-left corner of the parent container or screen. Often used for chat widgets or secondary tools.
BottomRight: Positions the display in the bottom-right corner of the parent container or screen. Frequently used for toast notifications or shortcuts.
Target
Specifies the container for the display. For example, Window places the display in a new window.
Mouse: Positions the display relative to the current location of the mouse pointer. This is useful for context-sensitive displays, such as tooltips or popup menus, where the display appears near the cursor for convenience.
Window: Positions the display relative to the application window or screen. This option is typically used for dialog boxes or popups that need a fixed location, independent of mouse movements.
Dialog Buttons
Sets which buttons appear in a dialog (e.g., OK, OKCancel, YesNo, YesNoCancel, None).
OK: Displays a single OK button, allowing users to acknowledge or confirm the dialog.
OKCancel: Displays OK and Cancel buttons, enabling users to confirm or cancel an action.
YesNo: Displays Yes and No buttons, offering users a binary choice.
YesNoCancel: Displays Yes, No, and Cancel buttons, providing a choice with an option to cancel.
None: Removes all buttons, leaving the dialog for informational purposes only.
Additional Options
CloseButton and DragBar: Enables or disables the close button and drag functionality in the title bar.
Stays open on page change: Ensures the display remains open even when navigating to a new page in the application.
Stays open after losing focus: Keeps the display open even when the user clicks outside its boundaries.
Title: Allows adding a title to the display. The input box specifies the text, and the color box sets its appearance.
Title background: Configures the background color of the title bar.
In this section:
| Page Tree | ||||
|---|---|---|---|---|
|