Display Settings (Reference)
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.configure display-level properties including mode (Page/Popup/Dialog), resize behavior, borders, and placement options within the Drawing workspace.
Display Settings control:
- Display mode behavior
- Window properties
- Resize handling
- Border styles
- Dialog buttons
- Placement options
On this page:
Table of Contents maxLevel
2 minLevel 2 indent 10px exclude Steps style none
Access via Properties Sidebar → Display Settings when in Drawing workspace.
Display Modes
| Mode |
|---|
| Behavior | Use Case | |
|---|---|---|
| Page | Replaces current display | Main navigation screens |
| Popup | Non-modal overlay, auto-closes on navigation | Information panels |
| Dialog | Modal overlay, blocks interaction | User confirmations |
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.
Options
| Type | Description | Configuration |
|---|---|---|
| Color | Solid color fill | Color picker |
| Theme | Theme-based palette | Auto-updates with theme |
| HPG | High Performance Graphics | ISA 101 standard |
| Image | Image background | Select from resources |
Resize Behavior
| Option | Effect | Aspect Ratio |
|---|---|---|
| StretchFill | Fill entire space | Not preserved |
| StretchUniform | Scale uniformly | Preserved |
| Responsive | Dynamic layout adjustment | Element-specific |
| NoAction | Fixed size | Original maintained |
| ResizeChildren | Proportional scaling | All elements scale |
Responsive Layout
When using Responsive:
- Check layout coordinates to enable
- Checked properties adjust during resize
- Maintains relative positioning
Border Styles
| Style | Appearance | Use Case |
|---|---|---|
| None | No border | Clean interface |
| Thin | Minimal outline | Subtle separation |
| Double | Two parallel lines | Decorative boundary |
| Flat3D | Depth effect | Elevated appearance |
| Resize | Interactive border | User-adjustable |
Placement & Target
Placement Options
- Center - Centered in container
- TopLeft/TopRight - Corner positions
- BottomLeft/BottomRight - Lower corners
Target Options
- Mouse - Follows cursor position
- Window - Fixed window location
Dialog Configuration
Button Sets
- OK - Single confirmation
- OKCancel - Confirm or cancel
- YesNo - Binary choice
- YesNoCancel - Choice with escape
- None - Information only
Additional Options
- CloseButton - Enable/disable close
- DragBar - Allow window dragging
- Stays open on page change - Persist navigation
- Stays open after losing focus - Keep visible
- Title - Display title text
- Title background - Title bar color
In this section...
| Page Tree | ||||
|---|---|---|---|---|
|
In this section:
| Page Tree | ||||
|---|---|---|---|---|
|