Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Overview

This section presents how to navigate and use the most common tools in the main design area, the Draw Environment.

On this page:

Table of Contents
maxLevel3

Terminology

The Draw area has the following controls to create, format, and configure displays:

Solution toolbar 

Document Toolbar 

Draw toolbar 

On the left side of the Drawing tab. Use these buttons to draw shapes, add buttons, and create special windows.

Object toolbar 

Across the bottom of the Drawing tab. Use these buttons to group, combine, align, and lock the selected objects.

Drawing Properties 

The area on the left side displays the Graphical Element Properties. These settings may differ based on the type of object selected. The Appearance parameters dictate the brush style and color used when drawing objects in the display. Clicking the Fill option allows you to specify the colors, gradients, or objects used to fill the graphics.

Toolbars

Descrição

Solution toolbar

On the top, you have buttons to save the display, to select a new displays and other actions on the current display.

Icon

Command

Description

Image Removed

Undo

Undoes an operation/change. This button is available until you save changes.

Image Removed

Redo

Redoes a previously undone operation/change. This button is available until you save changes.

Image Removed

Cut

Cuts a selected row (DataGrid) or objects (Drawing). This command will delete any select row or object in order to paste it somewhere else.

Image Removed

Copy

Copies a selected row (DataGrid) or objects (Drawing).

Image Removed

Paste

Pastes a row (DataGrid) or objects (Drawing) that was copied or cut previously.

Image Removed

Delete

Deletes selected row (DataGrid) or objects (Drawing).

Image Removed

Print

Prints current table (DataGrid) or display (Drawing).

Image Removed

Save Document on Git folder

Exports content to an external file as .csv (Tables) or .jpg (Displays) file.

Image Removed

Import Document from Git folder

Imports an external file to the current table. See Copying and Pasting Rows for more details.

Image Removed

Find Elements

The Find Elements button on the toolbar accesses the object cross reference, which lets you find where objects are used in the Project and go directly to each location.

Image Removed

Next Reference

Navigates to the subsequent reference or item in a given list or sequence.

Image Removed

Previous Reference

Navigates to the preceding reference or item in a given list or sequence.

Image Removed

New Tag

Allows creation of a new tag in the real-time database.

Image Removed

Tag Properties

Shows the properties of the tag selected in the text box.

Image Removed

Object Selection

Enables the user to choose a specific item from a set of objects or elements within the interface.

Image Removed

Open a New Window to the Selected Document

Opens the document or file currently selected in a new window, allowing for parallel viewing or editing alongside the current content.

Image Removed

Feedback

Give your opinion in the feedback tab of the Tatsoft website.

Image Removed

Documentation

Acess the documentation on the website.

Document toolbar

Underneath there is the buttons to select new displays, or save, preview and document actions.

Icon

Command

Description

Save

Save As

New document

Preview document

Tree View document

Discard changes

Draw toolbar

On the left side of the Drawing tab. Use these buttons to draw shapes, add buttons, and create special windows.

Command

Description

Selection tool

Direct selection tool

Hand tool

Edit properties

Rectangle

Ellipse

Vertical Toolbar

Icon

Command

Description

Image Removed

 Selection Tool

  • Click on an object to select it.

  • CTRL+click selects multiple objects and object groups. Hold the CTRL key as you click on each object.

  • Shift+click to choose a main object from a group of selected objects

  • Click on an open area of the display and highlight several elements to select a group of elements 

  • Double-click on an object to open the "Dynamics configuration" window that provides settings for dynamic object properties.

Image Removed

 Direct Selection Tool

  • Use this tool to select an object inside a group and modify its properties. Click on the object once to select it.

  • You can also add, remove, and modify the points in a Polyline with the Direct Selection Tool.

    • To move the point, click on the point to select it and hold down the left mouse button. Drag the point to its new position.

    • Double-click on a point to add a new point adjacent to the selected point.

    • Right-click on a point to delete the selected point.

Image Removed

 Hand Tool

The Hand tool can be used to modify the view window. Click once on the display background and hold down the left mouse button. Then, move the display to the desired position. 

Image Removed

Edit Properties

Opens properties dialog window of the selected object

Image Removed

Geometric objects tools

Right-click to end the use of each tool.
To add, modify, and/or remove points after creating a polygon or polyline, use the Direct Selection Tool.

Image Removed

 Rectangle

Creates a rectangle object.

Image Removed

 Ellipse

Creates an ellipse object.

Image Removed

 Polygon

Creates a polygon object.

Image Removed

Connectors

Image Removed

 PolyLine

Creates a polyline object.

Image Removed

GridLine

Creates a gridline object.

Image Removed

 Button

Creates a button object.

Image Removed

 LabelBox

Creates a label box.

Image Removed

TextTool

Image Removed

 Text Output

Creates a text output object.

Image Removed

 Text Box

Creates a text input/output (I/O) object.
To link the I/O object with a tag, double-click the I/O object. Under the Dynamic configuration window, select the TextIO dynamic.

Image Removed

Industrial icons

Insert an industrial icons to be used in the project.

Image Removed

Insert an Image

Insert an image to be used in the project.

Image Removed

Insert a Component

Insert a component in the draw.

Image Removed

Open Symbol Library

The symbol library includes both built-in and user-defined symbols.

Image Removed

Add Symbol

Creates New Symbol with Selected Elements.

Image Removed

Edit Symbol

Edit Selected Symbol.

Image Removed

Break Symbol

Break apart Selected Symbol to its elements.

Icon

Components

Description

Assets

Image Removed

AlarmWindow

Creates an alarm window. Position the alarm window and double-click it to configure the alarm window settings.

For more information, see Configuring an Alarm Window.

Image Removed

Alarm Areas

Creates an Alarm Area control that allows you to view the existing alarm tree.

Image Removed

Assets Tree

This component allows you to view the same structure in Runtime that is defined in the Engineering Environment. To do so, go to your Draw Environment, and select the Assets Tree component from the toolbar.

Image Removed

DataGrid

Creates a data grid window. Position the data grid window and double-click it to configure the data grid window settings.

For more information, see Configuring a DataGrid Window.

Image Removed

TreeView

The Tree View object is a user interface component in that provides a hierarchical view of information, typically used for navigating nested lists or structures. It's primarily used to allow users to select tags from an organized and expandable tree-like structure, with options for filtering the tags and customizing their display names.

Charts

Image Removed

3DPipeViewer

Creates a 3D Pipe Viewer object.

For more information, see the 3D Pipe Viewer section in the User Interface Controls.

Image Removed

BarChart

Creates a Bar Chart object.

For more information, see the Bar Chart section in the User Interface Controls.

Image Removed

DrillingChart

Creates a drilling chart trend window. Position the trend window and double-click it to configure the trend window settings.

For more information, see Configuring the Trend Window.

Image Removed

PieChart

Creates a Pie Chart object.

For more information, see the Pie Chart section in the User Interface Controls.

Image Removed

TrendChart

Creates a trend window. Position the trend window and double-click it to configure the trend window settings.

For more information, see Configuring the Trend Window.

Image Removed

XY Chart

Creates a XY trend window.

CustomPieChart

Creates an Advanced Pie Chart object.

GanttChart

Gantt Chart for WPF is a MS Project-like Project Viewer with built-in grid, schedule and resource assignment constraints. Some of the key features of Gantt control are: drag support for increasing and decreasing the Start and Finish Date of the Task, Drag and Drop support for the task within a row and automatic data synchronization between Grid and Chart.

For more information, see the Gantt Control.

Timeline

Containers

Image Removed

ChildDisplay

Image Removed

HTML5 Control

The HTML5 Control object is a user interface component that provides a way to apply CSS styles and JavaScript functionality to elements within HTML5 applications. It is primarily used for customization and interactivity enhancement of web pages or elements within the application.

Image Removed

PDFViewer

Creates a PDF Viewer object.

Image Removed

ReportViewer

Creates a Report Viewer object.

Image Removed

WebBrowser

Creates a Web Browser object.

Image Removed

WPF Control

Creates an external WPF component.

Gauges

Image Removed

CircularGauge

The Circular Gauge control is available for HTML5 and WPF, and it allows visualizing data in the form of Circular Scale. 

For more information, see the [!] Circular Gauge.

Image Removed

CircularGaugeArcPointer

Creates a Circular Gauge Arc Pointer.

Image Removed

CircularGaugeCompass

Creates a Circular Gauge Compass.

Image Removed

CircularGaugeFullCircle

Creates a Circular Gauge Full Circle.

Image Removed

CircularGaugeRanges

Creates a Circular Gauge Ranges.

Image Removed

CircularGaugeSemiCircle

Creates a Circular Gauge Semi Circle.

Image Removed

LinearGauge

The Linear Gauge control allows visualizing data in the form of Linear Scale, and is designed to see a simple display of value compared to a scale and one or more ranges. Some of the key features of the Linear Gauge are: adding a scale to linear gauge using horizontal and vertical orientations, highlight the desired ranges of values in the gauge scale and adding multiple pointers to the linear scale.

CircularGaugeControl

Creates a Circular Gauge Control.

CircularGaugeRangeControl

Creates a Circular Gauge Range Control.

LinearGaugeControl

Creates a Linear Gauge Control.

Input

Image Removed

Button

The Button is a simple interface component that allows users to trigger an action or execute a specific function when clicked. It is used to create interactive buttons in web applications and can be configured with options such as the expression to be executed and the label displayed on the button.

Image Removed

CheckBox

Creates a Check box.

Image Removed

ComboBox

Creates a combo box.

Image Removed

ListBox

Creates a list box.

Image Removed

RadioButton

Creates a radio button object. 

Image Removed

Slider

Creates a Slider.

Image Removed

DatePicker

Creates a Date Picker.

Image Removed

DateTimePicker

Creates a Date Time Picker.

Image Removed

DateTimeTextBox

Creates a Date Picker.

Image Removed

TimeTextBox

Creates a Time Text Box.

Button

Creates a Button object.

Image Removed

Calendar

The Calendar object serves as a user interface component for selecting and displaying dates in HTML5 and WPF applications. Its primary function is to provide an interactive, configurable calendar interface that can reflect specific dates, enable date selection, and display calendar information such as week numbers or day names based on specified settings.

CheckBox

The Checkbox object is a user interface element in that allows users to make binary choices by either checking or unchecking the box. It is primarily used to enable or disable specific features, or to indicate whether a certain condition or option applies.

Image Removed

ColorPicker

The Color Picker object is a user interface component in that provides an interactive way for users to select and assign a specific color value. It's primarily used to allow users to customize the appearance of elements within an application or to select colors for various uses.

ComboBox

The Combo Box object is a user interface component in HTML applications that provides a drop-down list of options for users to select from. It is primarily used to condense a large list of selectable items into a compact, user-friendly format, allowing for a single selection from a predefined set of options.

page lists a suite of tools for design and interface creation for data visualization, such as dashboards, process displays, HMIs, and SCADA systems. It offers precise selection tools, versatile drawing capabilities for shapes and graphics, and advanced symbol management, text, and button design features that ensure clear and efficient graphical representations using real-time data.

On this page:

Table of Contents
maxLevel3
stylenone


Toolbars

The toolbar at the top provides functionalities like undoing, redoing, Git synchronization, and tag management. Directly below, the Document toolbar focuses on actions related to document management, such as saving and previewing content hierarchies. On the left, the Drawing toolbar offers tools for creating and manipulating graphical elements, from drawing basic shapes to configuring dynamics. At the top of the Draw area is the Object toolbar, which is designed for adjusting and aligning screen elements, with options ranging from zooming to layering and locking elements. The Components Panel is a guide to User Interface components, allowing users to drag and drop tools like charts and buttons onto their workspace. Lastly, the Drawing Properties table aids in customizing objects and detailing sections like appearance, layout, and content formatting to help users define every aspect of their designs.


Document toolbar

On the Draw Environment, underneath the Solution toolbar there are basic actions buttons such as those for saving modifications and adding new displays. The table outlines key document actions, from saving and creating new documents to previewing content hierarchies.

Action

Description

Image Added

Save

Retains the current modifications made to the document, ensuring no loss of recent edits.

Image Added

Save As

Allows users to store the document under a different name or location, creating a duplicate.

Image Added

New Document

Initiates a fresh, blank document for a new start.

Image Added

Preview Document

Provides a visual representation for users to review the document's final appearance.

Image Added

Tree View Document

Displays the document's content in a hierarchical format for structured navigation.

Image Added

Discard Changes

Reverts the document to its last saved state, discarding unsaved modifications.


Drawing toolbar

The Drawing toolbar is on the left side of the Draw area. Use these buttons to draw shapes, add buttons, create alarm windows, and more. The tools offer functionalities for selecting and manipulating graphical elements. The "Selection tool" facilitates the selection of individual or multiple objects and provides access to the "Dynamics configuration." The "Direct Selection tool" allows users to modify the properties of objects within a group and handle polyline points. The "Hand tool" adjusts the view through dragging. There are also tools for drawing basic shapes such as rectangles, ellipses, polygons, and polylines. Users can add gridlines, design buttons, manage text input/output, and work with symbols – creating, editing, or decomposing them into foundational elements.

Tool

Description

Image Added

Selection tool

Select individual or multiple objects; access "Dynamics configuration" with a double-click.

  • Click on an object to select it.

  • CTRL+click selects multiple objects and object groups. Hold the CTRL key as you click on each object.

  • Shift+click to choose a main object from a group of selected objects.

  • Click on an open area of the display and highlight several elements to select a group of elements.

  • Double-click on an object to open the "Dynamics configuration" window that provides settings for dynamic object properties.

Tip
titleMultiple Elements Selection

When multiple elements are selected, the one with the BLUE adorners is the Primary Selection. It is the last object to be included in the selection.

When performing alignment or resizing commands, that object serves as the reference, and some properties in the sidebar are applied only to this primarily selected object.


Image Added

Direct Selection tool

  • Use this tool to select an object inside a group and modify its properties. Click on the object once to select it.

  • You can also add, remove, and modify the points in a Polyline with the Direct Selection Tool.

    • To move the point, click on the point to select it and hold down the left mouse button. Drag the point to its new position.

    • Double-click on a point to add a new point adjacent to the selected point.

    • Right-click on a point to delete the selected point.

Image Added

Hand tool

Drag to adjust the view.

Image Added

Edit Properties

Display property dialog for chosen object.

Image Added

Rectangle

Draw a rectangle.

Image Added

Ellipse

Draw an ellipse.

Image Added

Polygon

Draw a polygon.


Image Added

PolyLine

Draw a polyline.

Image Added

GridLine

Add a gridline.

Image Added

Button with Themes Colors

Generate a button with theme-based colors.

Image Added

PushButton with Custom Colors

Generate a pushbutton with custom colors.

Image Added

Textblock Output

Introduce a text output section.

Image Added

TextBox Input or Output

Creates a text input/output (I/O) object. To link the I/O object with a tag, double-click the I/O object and change its Linked Value

Image Added

Create a New Symbol with Selected Elements

Convert chosen elements into a new symbol.

Image Added

Edit Selected Symbol

Access properties of the chosen symbol.

Image Added

Break apart Selected Symbols to its elements

Decompose the symbol into its foundational elements.



Object toolbar

The Object toolbar is on the top of the Draw area. This toolbar allows users to adjust and align elements on the screen, offering capabilities ranging from grid adjustments for alignment to zooming in or out for improved viewability. Users can group or ungroup elements, merge shapes in various ways (Union, Intersect, Exclude, Exclusive-Or), and align them based on different parameters (left, center, right, top, bottom). Layering is facilitated through options to move elements frontward or backward and adjust their Z-order. Resizing and rotation options, along with horizontal and vertical flipping, offer further customization. Finally, there are functions to lock or unlock elements, ensuring design integrity, and options to show or hide specific elements for better work clarity.

Control

Description

Image Added

Expand Components Panel

Expand components panel.

Image Added

Collapse Components Panel

Collapse components panel.

Image Added

Grid definition

Adjusts the underlying grid used for aligning elements.

Show/Hide Gridlines: You can choose to turn grids on and off. You can also adjust spacing (between grids) and thumb size.

Snap to Gridlines: This option disallows free movement of the objects - they'll necessary match the gridlines.

Show/Hide Rulers: You can turn on rulers to help guide your design.

Image Added

Screen Zoom

Allows for zooming in or out on the screen view.

Image Added

Group

Binds multiple elements together to be treated as one.

Image Added

Ungroup Resizing Children

Separates elements that were grouped together, keeping the children objects with their current sizes

Image Added

Ungroup Restoring Sizes

Ungroup the elements, restoring the children objects to their original sizes. 

Image Added

Union

Combines two or more shapes into a single shape.

Image Added

Intersect

Creates a shape from the overlapping areas of two shapes.

Image Added

Exclude

Creates a shape by removing the overlapping areas of two shapes.

Image Added

Exclusive-Or

Forms a shape from the non-overlapping parts of two shapes.

Image Added

AlignLeft

Aligns selected elements to the left.

Image Added

AlignHorizontalCenter

Aligns selected elements to the horizontal center.

Image Added

AlignRight

Aligns selected elements to the right.

Image Added

AlignTop

Aligns selected elements to the top.

Image Added

AlignVerticalCenter

Aligns selected elements to the vertical center.

Image Added

AlignBottom

Aligns selected elements to the bottom.

Image Added

Move To The Front

Moves selected elements to the front of the layer stack.

Image Added

Move To The Back

Moves selected elements to the back of the layer stack.

Image Added

Change Z-Order

Adjusts the layering order of selected elements.

Image Added

Resize Width

Resizes the width of selected elements.

Image Added

Resize Height

Resizes the height of selected elements.

Image Added

Rotate Clockwise

Click this option the rotate clockwise.

Image Added

SpaceEvenlyHorizontal

Evenly spaces selected elements horizontally.

Image Added

SpaceEvenlyVertical

Evenly spaces selected elements vertically.

Image Added

FlipHorizontally

Flips the selected elements horizontally.

Image Added

Flip Vertically

Flips the selected elements vertically.

Image Added

Lock element

Prevents changes to the selected element.

Image Added

Unlock element

Allows changes to a previously locked element.

Image Added


Unlock all elements

Allows changes to all previously locked elements.

Image Added

Show all elements

Reveals all elements, including hidden ones.

Image Added

Hide selected element

Hides the currently selected element.


Panels


Components Panels

This table provides a comprehensive overview of the User Interface (UI) components, ranging from data visualization tools like charts and gauges to standard interaction elements such as buttons and text boxes. Technically, each component has a distinct function, whether it's rendering graphical data, facilitating user input, or displaying information in structured formats. Functionally, users can easily integrate these components into their design by dragging and dropping them onto the draw area, allowing for an efficient design experience.

Component

Description

AlarmAreas

A UI element for alarm organization used for alarms management. It displays the alarm tree. Simply drag and drop onto the draw area.

AlarmViewer

An alarm window designed for alarms visualization. It efficiently displays alarms within an interface. Drag and drop to use.

AssetsTree

A UI component that displays asset hierarchies, giving a clear view of asset structures. To use, drag and drop onto the draw area.

DataGrid

A tabular UI component essential for showing structured data in rows and columns with sorting/filtering capabilities. Drag and drop to use.

BarChart

A graphical tool for visualizing data using bars to compare data sets. Use by dragging and dropping onto the draw area.

DrillingChart

A specialized visualization tool for displaying drilling trends, providing insights into drilling operations. Drag and drop to use.

GanttChart

A tool for visualizing and tracking project tasks, showcasing tasks and their dependencies on a timeline. Drag and drop to use.

PieChart

A circular tool that visualizes data, dividing it into slices to compare parts of a whole. Drag and drop to use.

TrendChart

A tool designed to analyze time-based data patterns by plotting data points on a time axis. Simply drag and drop to use.

XY Chart

A Cartesian chart for comparing two variables by plotting them on X and Y axes. Use by dragging and dropping onto the draw area.

ChildDisplay

A UI tool that shows nested hierarchies, effectively representing parent-child UI relations. Drag and drop to use.

HTML5Control

A tool for embedding and displaying HTML5 content with CSS and JS support. Drag and drop onto the draw area for usage.

PdfViewer

A specialized viewer for displaying PDF documents. Drag and drop onto the draw area to use.

ReportViewer

A dynamic tool for displaying and managing structured reports. Use by dragging and dropping onto the draw area.

WebBrowser

An embedded browser for web content rendering and navigation. Simply drag and drop to use.

WPFControl

A tool for embedding and displaying WPF elements and components. Use by dragging and dropping onto the draw area.

ArcPointerCircular

A UI element designed for circular pointers, used to indicate values on circular displays. Drag and drop to use.

CenterValueCircular

A display feature for circular gauges that showcases core values centrally. Drag and drop onto the draw area for usage.

CircularGauge

A gauge component that visualizes data in a circular format. Drag and drop to use.

Compass

A navigation tool essential for displaying directional information. Drag and drop onto the draw area to use.

LinearGauge

A straight-line gauge component useful for displaying data in a linear fashion. Drag and drop to use.

SemiCircleCircular

A half-round gauge that displays data in a semi-circular format. Drag and drop onto the draw area to use.

BrushEditor

A UI editor for customizing and visualizing graphical brush designs. Drag and drop onto the draw area to use.

Button

An interactive UI element that triggers specified actions when pressed. Use by dragging and dropping onto the draw area.

CheckBox

A togglable UI component used for binary choices. Drag and drop onto the draw area for usage.

ComboBox

A drop-down list component that lets users select an item from a list. Drag and drop to use.

DatePicker

A tool designed for users to select specific dates. Drag and drop onto the draw area for usage.

DateTimePicker

A combined tool for users to select specific dates and times. Drag and drop to use.

ListBox

A list display component that showcases items for user interaction. Drag and drop to use.

MaskedTextBox

A text input tool that accepts input in a predefined pattern or format. Drag and drop onto the draw area to use.

NumericTextBox

A text input component tailored for numerical values. Drag and drop onto the draw area to use.

PushButton

An activatable UI element that executes specific actions upon activation. Drag and drop to use.

RadioButton

A UI component for making single choices from a set, ensuring only one can be active at a time. Drag and drop to use.

Slider

A value selection tool on a scale, allowing users to adjust values within a range. Drag and drop to use.

TextBlock

A component for displaying uneditable, static text content. Drag and drop onto the draw area for usage.

TextBox

A text input UI tool that lets users type and modify text. Drag and drop onto the draw area to use.

TimePicker

A specialized tool allowing users to select specific hours and minutes. Drag and drop to use.

Menu

A list of selectable items or actions presented to the user. Drag and drop onto the draw area for usage.

MenuItem

An individual selectable item within a menu. Typically added to a Menu component for functionality.

PageSelector

A navigation tool for transitioning between different pages or views. Drag and drop to use.

MapsGMap

A geographical map component for displaying location data using the GMap provider. Drag and drop to use.

RangeCircularGauge

A gauge feature that showcases a specified range within circular gauges. Drag and drop onto the draw area to use.

Circle

A geometrical component used for displaying a circular shape. Drag and drop onto the draw area to use.

Ellipse

An oval-shaped component for visualization. Drag and drop onto the draw area for usage.

Hexagon

A six-sided geometric component used to display a hexagonal shape. Drag and drop onto the draw area to use.

Rectangle

A four-sided geometric component for displaying a rectangular shape. Simply drag and drop onto the draw area for usage.



Tags Panel

The Tags Panel allows you to drag and drop data points onto displays, quickly design real-time, data-driven interfaces with low coding, organize and manage data tags for efficient application development, and easily customize dashboards for monitoring and analytics purposes.

Button to Expand or Restore Panel Width

Image Added

Filter for Tag names

Image Added

Button to Collapse All Tags on Panel

Image Added


Drawing Properties

The table provides an overview of Drawing Properties sections utilized in object customization on draw environment. "Appearance" dictates the visual style, while "Border Radius" defines corner curvature. "Connections" indicates connectivity capabilities, and "Contents Align" manages internal content alignment. "Display Settings" prescribes the object's presentation mode, and "Dynamics Clipboard" offers tools for dynamic configurations. "Layout" establishes position and dimensions, while "Replace Tags/Strings" facilitates tag and string substitutions. The "Text" section handles content formatting, "Transform" applies visual effects, and "Type" determines the object's classification within systems. Each section encompasses specific parameters or options tailored to its purpose.

Property section

Description

Appearance

Customize object look using themes and properties: Fill, Line, Opacity. Includes TextShadow option.

Border Radius

Adjust corner curvature with X (horizontal) and Y (vertical) values.

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.

Display Settings

Set object presentation: Page, Popup modes. Customize background, size, borders.

Dynamics Clipboard

Tools for dynamic properties. Buttons to fetch and apply configurations.

Layout

Set position and size using parameters: Left, Top, Width, Height.

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.

Transform

Apply visual effects: DropShadow, Rotation, Skew. Customizable parameters for each effect.

Type

Classify objects for categorization within larger systems.



In this section:

Image Removed

DatePicker

Creates a Date Picker.

Image Removed

DateTimePicker

Creates a Date Time Picker.

Image Removed

MaskedTextBox

Creates a Masked Text Box.

Image Removed

NumericTextBox

Creates a Numeric Text Box.

RadioButton

Creates a Radio Button.

Slider

Creates a Slider.

TextBox

Creates a Text Box.

Image Removed

TimePicker

Creates a Time Picker.

Interaction

Image Removed

Calculator

Creates a Calculator object.

For more information, see the Calculator section in the User Interface Controls.

Image Removed

FileExplorer

The File Explorer object is a user interface component for WPF applications that provides a way for users to navigate, view, and select files and directories on a computer system from within the application. Its primary function is to facilitate file access and selection for various operations within a project.

Maps

Image Removed

ESRI Map

The ESRIMap Control is a user interface component in WPF applications that provides an interactive and configurable map display, primarily for projects involving geolocation. It is designed to integrate with the ArcGIS service for base map data and supports the addition of layers from WMS (Web Map Service) services for further map details.

Image Removed

Google Map

The Google Map Control is a user interface component for WPF applications that offers an interactive map display using various map providers for Geographic Information System (GIS) projects. It is primarily used for viewing geolocation information, navigating geographical data, and obtaining map details from selected providers like Google Maps or Bing Maps.

Image Removed

Maps

The Maps object is a user interface component for HTML5 applications that provides an interactive and customizable map display using various map providers. It's primarily used to display geolocation information, allow users to navigate geographic data, and customize map visuals according to specific geographical coordinates or settings.

Navigation

Image Removed

CircularPanel

Creates a Circular Panel object.

For more information, see the Circular Panel section in the User Interface Controls.

Image Removed

Menu

Creates a Menu.

Image Removed

MenuItem

Creates a Menu Item.

Image Removed

PageSelector

Creates a Page Selector object.Creates a menu item.

Horizontal Toolbar

Icons

Commands

Description

Image Removed

Expand Components Panel

Expand and collapse components panel.

Image Removed

Grid definition

Adjusts the underlying grid used for aligning elements.

Image Removed

Screen Zoom

Allows for zooming in or out on the screen view.

Image Removed

Group

Binds multiple elements together to be treated as one.

Image Removed

Ungroup

Separates elements that were grouped together.

Image Removed

Union

Combines two or more shapes into a single shape.

Image Removed

Intersect

Creates a shape from the overlapping areas of two shapes.

Image Removed

Exclude

Creates a shape by removing the overlapping areas of two shapes.

Image Removed

Exclusive-Or

Forms a shape from the non-overlapping parts of two shapes.

Image Removed

AlignLeft

Aligns selected elements to the left.

Image Removed

AlignHorizontalCenter

Aligns selected elements to the horizontal center.

Image Removed

AlignRight

Aligns selected elements to the right.

Image Removed

AlignTop

Aligns selected elements to the top.

Image Removed

AlignVerticalCenter

Aligns selected elements to the vertical center.

Image Removed

AlignBottom

Aligns selected elements to the bottom.

Image Removed

Move To The Front

Moves selected elements to the front of the layer stack.

Image Removed

Move To The Back

Moves selected elements to the back of the layer stack.

Image Removed

Change Z-Order

Adjusts the layering order of selected elements.

Image Removed

Resize Width

Resizes the width of selected elements.

Image Removed

Resize Height

Resizes the height of selected elements.

Image Removed

Rotate Clockwise

Click this option the rotate clockwise.

Image Removed

SpaceEvenlyHorizontal

Evenly spaces selected elements horizontally.

Image Removed

SpaceEvenlyVertical

Evenly spaces selected elements vertically.

Image Removed

FlipHorizontally

Flips the selected elements horizontally.

Image Removed

Flip Vertically

Flips the selected elements vertically.

Image Removed

Lock element

Prevents changes to the selected element.

Image Removed

Unlock element

Allows changes to a previously locked element.

Image Removed

Unlock All Elements

Allows changes to all previously locked elements.

Image Removed

Show All Elements

Reveals all elements, including hidden ones.

Image Removed

Hide Selected Element

Hides the currently selected element.

Examples

Here you will see examples showing the functionality of the commands of the horizontal toolbar.

The shapes used can be any object without dynamics, like polygons, ellipses, or rectangles.

 Image Removed

 
Union Image Removed and Intersect Image Removed 

Image Removed

Exclude Image Removed and Exclusive-Or Image Removed 

Image Removed

Lock element command. Image Removed: Select both rectangles then click it to lock. Now the rectangles can not be selected.

Image Removed

  • To unlock only one rectangle:
  • Click the Direct Selection Tool command Image Removed in the vertical toolbar.
  • Select the desired rectangle and click Unlock Element Image Removed . 
    Image Removed
  • To Unlock all elements, click Unlock All Elements command Image Removed .
In this section...

Page Tree
root@parent
spacesV10