Page History

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

maxLevel	3

Terminology

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

Solution toolbar

Document Toolbar

Draw toolbar

Object toolbar

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 Added	Undo	Undoes an operation/change. This button is available until you save changes.
Image Added

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.
	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.
	Copy	Copies a selected row (DataGrid) or objects (Drawing).
	Paste	Pastes a row (DataGrid) or objects (Drawing) that was copied or cut previously.
	Delete	Deletes selected row (DataGrid) or objects (Drawing).
	Print	Prints current table (DataGrid) or display (Drawing).
	Save Document on Git folder	Exports content to an external file as .csv (Tables) or .jpg (Displays) file.
	Import Document from Git folder	Imports an external file to the current table. See Copying and Pasting Rows for more details.
	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.
	Next Reference	Navigates to the subsequent reference or item in a given list or sequence.
	Previous Reference	Navigates to the preceding reference or item in a given list or sequence.
	New Tag	Allows creation of a new tag in the real-time database.
	Tag Properties	Shows the properties of the tag selected in the text box.
	Object Selection	Enables the user to choose a specific item from a set of objects or elements within the interface.
	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.
	Feedback	Give your opinion in the feedback tab of the Tatsoft website.
	Documentation	Acess the documentation on the website.

Document toolbar

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

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	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.
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.
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.
Edit Properties	Opens properties dialog window of the selected object
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.
Rectangle	Creates a rectangle object.
Ellipse	Creates an ellipse object.
Polygon	Creates a polygon object.
Connectors
PolyLine	Creates a polyline object.
GridLine	Creates a gridline object.
Button	Creates a button object.
LabelBox	Creates a label box.
TextTool
Text Output	Creates a text output object.
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.
Industrial icons	Insert an industrial icons to be used in the project.
Insert an Image	Insert an image to be used in the project.
Insert a Component	Insert a component in the draw.
Open Symbol Library	The symbol library includes both built-in and user-defined symbols.
Add Symbol	Creates New Symbol with Selected Elements.
Edit Symbol	Edit Selected Symbol.
Break Symbol	Break apart Selected Symbol to its elements.

Object toolbar

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

Commands	Description
Expand Components Panel	Expand and collapse components panel.
Grid definition	Adjusts the underlying grid used for aligning elements.
Screen Zoom	Allows for zooming in or out on the screen view.
Group	Binds multiple elements together to be treated as one.
Ungroup	Separates elements that were grouped together.
Union	Combines two or more shapes into a single shape.
Intersect	Creates a shape from the overlapping areas of two shapes.
Exclude	Creates a shape by removing the overlapping areas of two shapes.
Exclusive-Or	Forms a shape from the non-overlapping parts of two shapes.
AlignLeft	Aligns selected elements to the left.
AlignHorizontalCenter	Aligns selected elements to the horizontal center.
AlignRight	Aligns selected elements to the right.
AlignTop	Aligns selected elements to the top.
AlignVerticalCenter	Aligns selected elements to the vertical center.
AlignBottom	Aligns selected elements to the bottom.
Move To The Front	Moves selected elements to the front of the layer stack.
Move To The Back	Moves selected elements to the back of the layer stack.
Change Z-Order	Adjusts the layering order of selected elements.
Resize Width	Resizes the width of selected elements.
Resize Height	Resizes the height of selected elements.
Rotate Clockwise	Click this option the rotate clockwise.
SpaceEvenlyHorizontal	Evenly spaces selected elements horizontally.
SpaceEvenlyVertical	Evenly spaces selected elements vertically.
FlipHorizontally	Flips the selected elements horizontally.
Flip Vertically	Flips the selected elements vertically.
Lock element	Prevents changes to the selected element.
Unlock element	Allows changes to a previously locked element.
Unlock All Elements	Allows changes to all previously locked elements.
Show All Elements	Reveals all elements, including hidden ones.
Hide Selected Element	Hides the currently selected element.

Drag and Drop

Components sidebar

CategoriesComponentDescriptionAlarmAreasUI components for alarm representation. Displays an organized structure of alarms by showing the existing alarm tree. Simply drag and drop onto the draw area to use.AlarmViewerDedicated to showing alarms. Monitors and manages alarms by displaying them in an organized window. Use by dragging and dropping onto the draw area.AssetsTreeRepresents asset hierarchies by visualizing the structure of assets. Drag and drop from the toolbar onto the draw area to use.DataGridTabular UI component that displays and manages data in a structured format with sorting and filtering functionality. Drag, drop, and configure as needed.BarChartVisualization tool that represents data in the form of vertical or horizontal bars for visual comparison. Drag, drop, and input data for display.DrillingChartSpecialized visualization component for showcasing trends in drilling data. Drag, drop, and configure to provide insights.GanttChartProject management tool to track and plan tasks over time by displaying tasks on a timeline. Drag, drop, and input task details to use.PieChartCircular visualization tool that compares parts of a whole by representing data in slices of a circle. Drag, drop, and input data values for visualization.TrendChartTool for analyzing data trends over time by plotting data points on a time axis. Drag, drop, and configure the data source to use.XY ChartCartesian chart that plots data based on X and Y values for comparing two variables. Drag, drop, and configure X and Y data sources to use.ChildDisplayComponent for nested UI representation. Showcases parent-child relationships in visual structures. Drag, drop, and configure associations to use.HTML5ControlWeb interface tool that embeds and manages HTML5 content with CSS and JavaScript. Drag and drop onto the draw area and integrate the desired content.PdfViewerDocument component for displaying PDF files. Renders PDF content for viewing. Drag, drop, and link the desired PDF file to use.ReportViewerAnalyzes and displays structured report data. Renders and manages generated reports. Drag and drop onto the draw area and link to the source to use.WebBrowserEmbedded tool for internet browsing or displaying web content. Renders web pages with navigation controls. Drag, drop, and optionally configure with a URL.TextBlockSimple text component that showcases static text without user interaction. Drag, drop, and input the desired text to display.TextBoxText input component that allows users to type and edit text. Drag and drop onto the draw area for user input.TimePickerSelection component for specific times, showing a time interface for users. Drag and drop onto the draw area for user interaction.Menu &Navigation components that organize application commands. Provides a list of selectable items. Drag and drop the Menu, then add MenuItems as needed.MapsGMapGeographical tool that displays map data using the GMap provider. Drag and drop onto the draw area and configure with location data.ShapesCircleBasic design elements that render specific shapes. Drag and drop the desired shape onto the draw area and position as needed.ShapesEllipseShapesHexagonShapesRectangle

Components sidebar

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	Definition	Purpose	Function	Usage
AlarmAreas	UI element for alarm representation.	Organizing alarms.	Show the alarm tree.	Drag and drop onto the draw area.
AlarmViewer	UI element for alarms.	Viewing alarms.	Display alarms in an interface.	Drag and drop onto the draw area.
AssetsTree	UI component for asset hierarchies.	Displaying asset structures.	Show asset structure.	Drag and drop onto the draw area.
DataGrid	Tabular UI component.	Showing structured data.	Display rows, columns with sorting/filtering.	Drag and drop onto the draw area.
BarChart	Graphical representation tool.	Visualizing data in bars.	Compare data sets using bars.	Drag and drop onto the draw area.
DrillingChart	Data visualization tool.	Displaying drilling trends.	Give insights into drilling operations.	Drag and drop onto the draw area.
GanttChart	Visualization tool for project tasks.	Tracking project tasks.	Show tasks, dependencies on a timeline.	Drag and drop onto the draw area.
PieChart	Circular data visualization tool.	Comparing parts of a whole.	Represent data in slices of a circle.	Drag and drop onto the draw area.
TrendChart	Data trend visualization tool.	Analyzing time-based patterns.	Plot data points on a time axis.	Drag and drop onto the draw area.
XY Chart	Cartesian chart.	Comparing two variables.	Plot data on X and Y axes.	Drag and drop onto the draw area.
ChildDisplay	UI for nested structures.	Showing nested hierarchies.	Represent parent-child UI relations.	Drag and drop onto the draw area.
HTML5Control	Embedded web content tool.	Displaying HTML5 content.	Render web elements with CSS and JS.	Drag and drop onto the draw area.
PdfViewer	Document viewer.	Showing PDF documents.	Display PDF content.	Drag and drop onto the draw area.
ReportViewer	Reporting tool.	Displaying reports.	Show and manage structured reports.	Drag and drop onto the draw area.
WebBrowser	Embedded browser.	Web browsing.	Render and navigate web pages.	Drag and drop onto the draw area.
WPFControl	Embedded WPF content tool.	Displaying WPF elements.	Render and manage WPF components.	Drag and drop onto the draw area.
ArcPointerCircular	UI element for circular pointers.	Indicating values on circular displays.	Point to values on circular gauges.	Drag and drop onto the draw area.
CenterValueCircular	Central value display for circular gauges.	Showing core values on circular gauges.	Display the central value in circular gauges.	Drag and drop onto the draw area.
CircularGauge	Round gauge UI component.	Visualizing data in a circular manner.	Show data values within a circular form.	Drag and drop onto the draw area.
Compass	Navigation tool.	Displaying directional information.	Indicate directions.	Drag and drop onto the draw area.
LinearGauge	Straight-line gauge UI component.	Displaying data linearly.	Represent data values on a straight scale.	Drag and drop onto the draw area.
SemiCircleCircular	Half-round gauge.	Displaying data in a semi-circular manner.	Represent data in a half-circle format.	Drag and drop onto the draw area.
BrushEditor	UI for editing graphical brushes.	Customizing brush styles.	Edit and visualize graphical brush designs.	Drag and drop onto the draw area.
Button	Interactive UI element.	Triggering actions.	Execute specified actions when pressed.	Drag and drop onto the draw area.
CheckBox	Togglable UI component.	Selections and toggling.	Allow binary choices.	Drag and drop onto the draw area.
ComboBox	Drop-down list component.	Selecting from a list.	Display a list and let users choose an item.	Drag and drop onto the draw area.
DatePicker	Date selection tool.	Picking dates.	Let users select specific dates.	Drag and drop onto the draw area.
DateTimePicker	Date and time selection tool.	Picking date and time.	Allow users to select specific dates and times.	Drag and drop onto the draw area.
ListBox	List display component.	Showcasing lists.	Display a list of items for user interaction.	Drag and drop onto the draw area.
MaskedTextBox	Formatted text input component.	Inputting text in a specific format.	Accept text input in a predefined pattern.	Drag and drop onto the draw area.
NumericTextBox	Number input component.	Inputting numerical values.	Allow users to type in numbers.	Drag and drop onto the draw area.
PushButton	Activatable UI element.	Triggering actions.	Execute specified actions upon activation.	Drag and drop onto the draw area.
RadioButton	Selectable UI component.	Making single choices from a set.	Allow selection among a set, only one can be active.	Drag and drop onto the draw area.
Slider	Value selection tool on a scale.	Adjusting values.	Let users adjust a value within a range.	Drag and drop onto the draw area.
TextBlock	Static text display component.	Displaying uneditable text.	Show static text content.	Drag and drop onto the draw area.
TextBox	Text input UI component.	Inputting and editing text.	Allow users to type and modify text.	Drag and drop onto the draw area.
TimePicker	Time selection tool.	Picking times.	Let users select specific hours and minutes.	Drag and drop onto the draw area.
Menu	List of choices component.	Offering a list of actions/choices.	Display a list of selectable items/actions.	Drag and drop onto the draw area.
MenuItem	Individual item in a menu.	Individual choice within a menu.	Represent a single selectable item within a menu.	Add to a Menu component.
PageSelector	Navigation tool.	Changing between pages.	Offer interface to navigate between different pages.	Drag and drop onto the draw area.
MapsGMap	Geographical map component.	Displaying geographical information.	Show geographical data using the GMap provider.	Drag and drop onto the draw area.
RangeCircularGauge	Range indicator for circular gauges.	Visualizing range on circular gauges.	Show a specified range within circular gauges.	Drag and drop onto the draw area.
Circle	Geometrical shape component.	Displaying a circle.	Render a circular shape.	Drag and drop onto the draw area.
Ellipse	Oval shape component.	Displaying an oval.	Render an oval shape.	Drag and drop onto the draw area.
Hexagon	Six-sided shape component.	Displaying a hexagon.	Render a hexagonal shape.	Drag and drop onto the draw area.
Rectangle	Four-sided shape component.	Displaying a rectangle.	Render a rectangular shape.	Drag and drop onto the draw area.

Components sidebar

Components

Description

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.

Alarm Areas

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

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.

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.

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.

3DPipeViewer

Creates a 3D Pipe Viewer object.

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

BarChart

Creates a Bar Chart object.

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

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.

PieChart

Creates a Pie Chart object.

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

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.

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

ChildDisplay

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.

PDFViewer

Creates a PDF Viewer object.

ReportViewer

Creates a Report Viewer object.

WebBrowser

Creates a Web Browser object.

WPF Control

Creates an external WPF component.

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.

CircularGaugeArcPointer

Creates a Circular Gauge Arc Pointer.

CircularGaugeCompass

Creates a Circular Gauge Compass.

CircularGaugeFullCircle

Creates a Circular Gauge Full Circle.

CircularGaugeRanges

Creates a Circular Gauge Ranges.

CircularGaugeSemiCircle

Creates a Circular Gauge Semi Circle.

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.

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.

CheckBox

Creates a Check box.

ComboBox

Creates a combo box.

ListBox

Creates a list box.

RadioButton

Creates a radio button object.

Slider

Creates a Slider.

DatePicker

Creates a Date Picker.

DateTimePicker

Creates a Date Time Picker.

DateTimeTextBox

Creates a Date Picker.

TimeTextBox

Creates a Time Text Box.

Button

Creates a Button object.

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.

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.

DatePicker

Creates a Date Picker.

DateTimePicker

Creates a Date Time Picker.

MaskedTextBox

Creates a Masked Text Box.

NumericTextBox

Creates a Numeric Text Box.

RadioButton

Creates a Radio Button.

Slider

Creates a Slider.

TextBox

Creates a Text Box.

TimePicker

Creates a Time Picker.

Calculator

Creates a Calculator object.

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

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.

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.

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.

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.

CircularPanel

Creates a Circular Panel object.

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

Menu

Creates a Menu.

MenuItem

Creates a Menu Item.

PageSelector

Creates a Page Selector object.Creates a menu item.

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

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 .

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	Definition	Purpose	Function	Usage
AlarmAreas	UI element for alarm representation.	Organizing alarms.	Show the alarm tree.	Drag and drop onto the draw area.
AlarmViewer	UI element for alarms.	Viewing alarms.	Display alarms in an interface.	Drag and drop onto the draw area.
AssetsTree	UI component for asset hierarchies.	Displaying asset structures.	Show asset structure.	Drag and drop onto the draw area.
DataGrid	Tabular UI component.	Showing structured data.	Display rows, columns with sorting/filtering.	Drag and drop onto the draw area.
BarChart	Graphical representation tool.	Visualizing data in bars.	Compare data sets using bars.	Drag and drop onto the draw area.
DrillingChart	Data visualization tool.	Displaying drilling trends.	Give insights into drilling operations.	Drag and drop onto the draw area.
GanttChart	Visualization tool for project tasks.	Tracking project tasks.	Show tasks, dependencies on a timeline.	Drag and drop onto the draw area.
PieChart	Circular data visualization tool.	Comparing parts of a whole.	Represent data in slices of a circle.	Drag and drop onto the draw area.
TrendChart	Data trend visualization tool.	Analyzing time-based patterns.	Plot data points on a time axis.	Drag and drop onto the draw area.
XY Chart	Cartesian chart.	Comparing two variables.	Plot data on X and Y axes.	Drag and drop onto the draw area.
ChildDisplay	UI for nested structures.	Showing nested hierarchies.	Represent parent-child UI relations.	Drag and drop onto the draw area.
HTML5Control	Embedded web content tool.	Displaying HTML5 content.	Render web elements with CSS and JS.	Drag and drop onto the draw area.
PdfViewer	Document viewer.	Showing PDF documents.	Display PDF content.	Drag and drop onto the draw area.
ReportViewer	Reporting tool.	Displaying reports.	Show and manage structured reports.	Drag and drop onto the draw area.
WebBrowser	Embedded browser.	Web browsing.	Render and navigate web pages.	Drag and drop onto the draw area.
WPFControl	Embedded WPF content tool.	Displaying WPF elements.	Render and manage WPF components.	Drag and drop onto the draw area.
ArcPointerCircular	UI element for circular pointers.	Indicating values on circular displays.	Point to values on circular gauges.	Drag and drop onto the draw area.
CenterValueCircular	Central value display for circular gauges.	Showing core values on circular gauges.	Display the central value in circular gauges.	Drag and drop onto the draw area.
CircularGauge	Round gauge UI component.	Visualizing data in a circular manner.	Show data values within a circular form.	Drag and drop onto the draw area.
Compass	Navigation tool.	Displaying directional information.	Indicate directions.	Drag and drop onto the draw area.
LinearGauge	Straight-line gauge UI component.	Displaying data linearly.	Represent data values on a straight scale.	Drag and drop onto the draw area.
SemiCircleCircular	Half-round gauge.	Displaying data in a semi-circular manner.	Represent data in a half-circle format.	Drag and drop onto the draw area.
BrushEditor	UI for editing graphical brushes.	Customizing brush styles.	Edit and visualize graphical brush designs.	Drag and drop onto the draw area.
Button	Interactive UI element.	Triggering actions.	Execute specified actions when pressed.	Drag and drop onto the draw area.
CheckBox	Togglable UI component.	Selections and toggling.	Allow binary choices.	Drag and drop onto the draw area.
ComboBox	Drop-down list component.	Selecting from a list.	Display a list and let users choose an item.	Drag and drop onto the draw area.
DatePicker	Date selection tool.	Picking dates.	Let users select specific dates.	Drag and drop onto the draw area.
DateTimePicker	Date and time selection tool.	Picking date and time.	Allow users to select specific dates and times.	Drag and drop onto the draw area.
ListBox	List display component.	Showcasing lists.	Display a list of items for user interaction.	Drag and drop onto the draw area.
MaskedTextBox	Formatted text input component.	Inputting text in a specific format.	Accept text input in a predefined pattern.	Drag and drop onto the draw area.
NumericTextBox	Number input component.	Inputting numerical values.	Allow users to type in numbers.	Drag and drop onto the draw area.
PushButton	Activatable UI element.	Triggering actions.	Execute specified actions upon activation.	Drag and drop onto the draw area.
RadioButton	Selectable UI component.	Making single choices from a set.	Allow selection among a set, only one can be active.	Drag and drop onto the draw area.
Slider	Value selection tool on a scale.	Adjusting values.	Let users adjust a value within a range.	Drag and drop onto the draw area.
TextBlock	Static text display component.	Displaying uneditable text.	Show static text content.	Drag and drop onto the draw area.
TextBox	Text input UI component.	Inputting and editing text.	Allow users to type and modify text.	Drag and drop onto the draw area.
TimePicker	Time selection tool.	Picking times.	Let users select specific hours and minutes.	Drag and drop onto the draw area.
Menu	List of choices component.	Offering a list of actions/choices.	Display a list of selectable items/actions.	Drag and drop onto the draw area.
MenuItem	Individual item in a menu.	Individual choice within a menu.	Represent a single selectable item within a menu.	Add to a Menu component.
PageSelector	Navigation tool.	Changing between pages.	Offer interface to navigate between different pages.	Drag and drop onto the draw area.
MapsGMap	Geographical map component.	Displaying geographical information.	Show geographical data using the GMap provider.	Drag and drop onto the draw area.
RangeCircularGauge	Range indicator for circular gauges.	Visualizing range on circular gauges.	Show a specified range within circular gauges.	Drag and drop onto the draw area.
Circle	Geometrical shape component.	Displaying a circle.	Render a circular shape.	Drag and drop onto the draw area.
Ellipse	Oval shape component.	Displaying an oval.	Render an oval shape.	Drag and drop onto the draw area.
Hexagon	Six-sided shape component.	Displaying a hexagon.	Render a hexagonal shape.	Drag and drop onto the draw area.
Rectangle	Four-sided shape component.	Displaying a rectangle.	Render a rectangular shape.	Drag and drop onto the draw area.

In this section:

In this section...

Page Tree

root	@parent
spaces	V10

Space shortcuts

Page tree

Versions Compared

Old Version 42

New Version 43

Key

Overview

Terminology

Solution toolbar

Document Toolbar

Draw toolbar

Object toolbar

Drawing Properties

Toolbars

Solution toolbar

Toolbars

Solution toolbar

Document toolbar

Draw toolbar

Object toolbar

Components sidebar

Components sidebar

Components sidebar

Examples