Overview
Drawing Properties are sets of attributes that define the appearance of the selected element in the display. They allow fine-tuning the appearance and behavior of each element, including options for fill, line, opacity, and various display parameters like mode, background, and resizing behavior.
Those properties are shown at the Properties SIdeBarSideBar, at the right side of the Draw environment.
On this page:
| Table of Contents | ||||
|---|---|---|---|---|
|
Properties Expander
The properties are organized in expander controls.
According to the Selected Element, or selected elements, the expanders as visible or not, according the properties in that section can be applied to the selected element.
The visible expanders are shown based on the selected elements, appearing only if all selected elements have the corresponding properties. However, the Find UI Element, Appearance, and Display settings boxes are always visible, as they pertain to general display settings rather than any specific element.
Drawing Properties
Element: Displays the TYPE of the selected object.
Uid: Allows putting a string (or number)
for a custom identification
of the element.
Replace Element: This option is available only when selecting a symbol in the Drawing area. It allows you to replace the UI element while retaining tag links and their dynamics. There are two ways to use it: (1) right-click the selected symbol and choose Replace Element, or (2) go to the Displays/Draw section in the right panel. Under Drawing Properties, click the button next to Symbol UID to open the dialog where you will select the new symbol to replace it.
Appearance
Theme: Changes the runtime Theme preview in the drawing area. This configuration is not used when running the solution. The initial Theme the solution will use is defined at Displays Client Settings, and it can be changed in the runtime setting the property Client.Theme.
Text Shadow (Draw Only): When checked it will apply a Shadow in all TextBlock elements in the display. This configuration affects only the drawing tool, it doesn't change the appearance in the runtime. The reason to use this checkbox is to facilitate to locate some Texts, when the FontColor is to close to the Background color of the display.
The other properties are Fill, Line, Stroke and Opacity.
Connections
Rectangles, Elipses, and combination of Shapes elements, can have the properties to act as a connector.
When that property of the shape is enabled, using a PolyLine, or a GridLine, you can connect the two shapes, to the PolyLine will adjust automatically when moving the objects.
Layout
Set position and size using parameters: Left, Top, Width, Height.
The CheckBoxes on the side of the layout coordinates are used when creating displays with OnResize property set to Responsive.
When set, it will change that layout element, proportionally, when the displays is resized.
For example, if you've set the width checkbox, when resizing the display in runtime, the width of that element will also resize proportionally.
Transform
Apply visual effects: DropShadow, Rotation, Skew. Customizable parameters for each effect.
Display Settings
Define display object parameters as mode where can select if is a page, a popup or a dialog. Customize background, width and height, 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 you sent are typical of many software development frameworks and each of them probably has the following behavior:
Border Radius
Adjust corner curvature with X (horizontal) and Y (vertical) values. Available only for Rectangle objects.
Text
Manage text content and appearance. Options include font, localization, and text wrapping.
Connections
Decide if an object connects elements. Checkbox to enable/disable.
Contents Align
Manage content alignment within an object: options like left, right, and center.
Dynamics
ClipboardTools for dynamic properties. Buttons to fetch and apply configurations.
Layout
Set position and size using parameters: Left, Top, Width, Height.
GET button: Copy the dynamic properties of the selected element to an internal clipboard.
APPLY button: Apply the dynamics in the internal clipboard to the selected elements.
EDIT button: Open the dynamics window, allowing you to edit the dynamics for the selected components.
You can hide some dynamics from being applied, right-click on the text showing the dynamic name under the buttons.
Replace Tags/Strings
Replace tags and strings . Selections from object namespaces with multiple replace options.
Text
Manage text content and appearance. Options include font, localization, and text wrapping.
on the select elements in the displays. In the example below, it would automatically change all mentions of "Button" to "Button New" the the selected elements.
Draw Tool Options
Highlight Location: When using the Direct Select Cursor (Black Arrow), or using the Display TreeView, this CheckBox allows to add lines to clearly identify the location of the element in the display.
Apply Shadow on TextBlocks: When checked it will apply a Shadow in all TextBlock elements in the display. This configuration affects only the drawing tool, it doesn't change the appearance in the runtime. The reason to use this checkbox is to facilitate to locate some Texts, when the FontColor is to close to the Background color of the display.
Display Settings
Set up properties of the current display.
Read more at Display Settings
Transform
Apply visual effects: DropShadow, Rotation, Skew. Customizable parameters for each effect.
In this section:
| Page Tree | ||||
|---|---|---|---|---|
|