Configure general display properties.
How-to Guides → Pillars → Operator → Displays → Workspace → Dashboards | Settings | Properties | Tags
Display Settings (Reference) 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
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 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
The display-level OnResize property governs how a display adapts when the area it is rendered into changes size. Five values are available:
| OnResize value | Effect | Aspect Ratio | Use for |
|---|---|---|---|
| StretchFill | Fills the entire area; may distort | Not preserved | Background art, decorative full-bleed image |
| StretchUniform | Scales as one unit, keeping proportions | Preserved | Process diagram, P&ID, equipment mimic |
| Responsive | Elements reposition / resize individually per their locks | Element-specific | Canvas with a dominant control; docked Header / Footer / Menu |
| NoAction | Fixed size; content outside the rendered area is clipped | Original maintained | Popup, Dialog, Form |
| ResizeChildren | All elements scale proportionally as one unit | All elements scale | Viewer and text-led pages |
Responsive Layout
When using Responsive:
- Check layout coordinates to enable
- Checked properties adjust during resize
- Maintains relative positioning
Choosing the right value
Each value maps cleanly to a display role. Pick the row that matches the display you are building. This mirrors the decision tree on the Responsive Design and RESS concept page, which is the how-to companion to this reference.
| Display role | OnResize value | Why |
|---|---|---|
| Canvas whose prominent element should resize — DataGrid, TrendChart, AlarmViewer, asset tree | Responsive (+ element locks on that element) | The display fills the client area and the dominant control stretches with it. Set the per-element locks below on the control that should grow; small labels and nav icons keep no locks and stay put. |
| Process diagram, P&ID, drawing or mimic | StretchUniform | Preserves aspect ratio so pipes, vessels, and connections stay visually correct under non-square viewports. |
| Viewer / text-led page where everything scales together | ResizeChildren | All elements scale proportionally as one unit, keeping text and its surrounding layout in proportion. |
| Header / Footer / Menu (docked regions) | Responsive + LockedHeight (Header / Footer) or Responsive + LockedWidth (Menu) | The region stays responsive so its content reflows, while the docked band height (Header / Footer) or rail width (Menu) is pinned to native pixels. Match the Header native Width to the Layout Width so it does not compress horizontally. |
| Popup, Dialog, Form | NoAction | The carefully tuned pixel layout stays exactly as designed; these surfaces are sized to their content, not to a resizable client area. |
| Background art, decorative full-bleed image | StretchFill | Fills the viewport edge to edge; distortion is acceptable because no measurements are conveyed. Not a sensible default for any display whose elements convey measurements or relative positions. |
Docked Header / Footer / Menu use Responsive, not NoAction. A docked region is set to Responsive together with LockedHeight (Header / Footer band) or LockedWidth (Menu / SubMenu rail) so the band stays a fixed thickness while its content still reflows to the available width. Setting a docked Header to NoAction is the wrong knob — it freezes the whole region instead of pinning only the thickness.
Resize lock properties
Six flat properties refine resize behavior. The four element-level locks are set per element in the Properties panel and are honored only when the display’s OnResize is Responsive; under StretchUniform, StretchFill, ResizeChildren or NoAction they have no effect. The two display-level locks pin a docked region while it stays Responsive.
| Property | Scope | Effect |
|---|---|---|
| IsWidthAlign | Element | STRETCH — the element’s width grows with its container |
| IsHeightAlign | Element | STRETCH — the element’s height grows with its container |
| IsLeftAlign | Element | MOVE — the element tracks the container’s right edge (keeps a fixed right margin) |
| IsTopAlign | Element | MOVE — the element tracks the container’s bottom edge (keeps a fixed bottom margin) |
| LockedWidth | Display | Pins a docked Menu / SubMenu rail to its native width; the rail keeps its pixel width instead of stretching horizontally |
| LockedHeight | Display | Pins a docked Header / Footer band to its native height; the band keeps its pixel thickness instead of stretching vertically |
Set all six locks through the Designer Properties panel, not by hand-editing display XAML.
NoAction note. When a Display is rendered into an area smaller than its design size, NoAction does not scale — content outside the rendered area is clipped. This is the desired behavior for pixel-exact layouts but means the design size should match the smallest expected rendering target.
Precision note. A Layout region’s "Header set to Stretch" refers to the region’s HorizontalAlign = Stretch — how the region fills its Layout column — which is a different knob from the display’s OnResize = StretchUniform. Do not conflate region HorizontalAlign with OnResize=StretchUniform; they govern different things.
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...