In the vertical toolbar in Edit>Draw, one of the options is the choice of WPF Components, which can be installed for use in the manufacture of screens.

Configuring WPF components

When you choose the icon in the form of folder,

it opens a window showing all components, which are already distributed with the Action.NET. To create an instantiation on the screen currently being edited, simply click (select) the desired component and close the window by clicking the button OK.
The figure shows this WPF component selection window.

The following sections provide instructions for configuring some WPF components, already distributed.

Setting up a circular panel

Double-click a circular panel object on the screen to set it up. Table 17 describes the configuration of the Circular panel.

Field	Description
Control Name	Sets a name for the control, so it can be accessed in the CodeBehind script. See "Code Behind - Screen Scripts" .
Columns	For each value you want to include, select a section and configure the settings to the right of the list, which are described below. The panel displays a section for each column.
Image	Choose in Resources an image to display.
Preview	Read-only. Selected image display.

Setting up a Pie Chart

Double-click a PieChart object on the screen to set it up. Table 18 describes the pie chart setting.

Field	Description
Control Name	Sets a name for the control, so it can be accessed in the CodeBehind script. See "Code Behind - Screen Scripts".
ChartType	Select the chart type.
Data Items	For each value you want to include, select a section and configure the settings on the right side of the list that are described below.. The chart shows a section for each data item..
FieldName	Enter a name for the data item.
LinkedValue	Enter a tag name as the data source for the data item.
Brush	Click to select the color for the data item.

Setting up a BarChart

Double-click a BarChart object on the screen to set it up. Table 19 describes the bar chart configuration.

Field	Description
Control Name	Set a name for the control, so that it can be accessed in the CodeBehind script. See "Code Behind - Screen Scripts"
Type	Select the chart type.
Data Source	Enter the dataset table name or query to use for the chart.
Grid Lines	Click to select the color of the grid lines.
Window	Click to select the color for the bottom of the window with the chart.
Labels	Click to select the color for the labels.
Show Horizontal Labels 45°	Select to show the horizontal axis labels at a 45° angle.
Show value over bar	Select to display the value of the bar above the bar.
Data Items	For each column in the data source that you want to include, mark a bar and configure the settings on the right side of the list, which are described below. The chart displays a bar for each definition line.
FieldValue	Name of the column in the database.
Min.	Type a tag to set the minimum value.
Max.	Enter a tag to set the maximum value
Brush	Click to select the color for the data item.

Setting up an Alarm Window

Double-click an Alarm Window object on a screen to set it up. Table 20 describes the configuration of the alarm window.

Field	Description
Control Name	Set a name for the control so that it can be accessed in the CodeBehind script. See Code Behind - Screen Scripts"
Maxlines	The maximum number of rows displayed in the window.
List	Select the type of alarms that will be displayed in the window: OnlineAlarms - Displays only active alarms. Alarms are displayed only while the alarm item is in the alarm state. AlarmHistory - Displays only past alarms. Events - Shows only SystemEvents ( Edit> Alarms> Groups ). AlarmHistory + Events - Displays past alarms and SystemEvents
Merge Hi and HiHi Lines	Combine alarms configured as Hi and HiHi in a single line.
History Interval/ To	Enter the start and end dates of the interval for which alarms should be included.
Show Column Titles	Select to display column titles.
Ack by Page	Enter a tag name, which when triggered recognizes the alarms in the alarm window.
Show Group Control, Label	Type the text to display above the column titles.
AllowSort	Select to allow users to sort the data by column.
Allow Column Reorder	Select to allow users to change the order of columns.
Filter	Enter a SQL query to limit the alarms displayed.
Refresh	Enter a tag name that will trigger an update of the alarm data.
Display Millisecond	Select to include milliseconds at alarm time.
Ack Selected Line	Configure settings to recognize an alarm.
Columns	For each column in the column list, select the column and configure the settings on the right side of the list, which are described below
Visible	Select this option for the column to appear in the alarm window.
Allow Filter	Select the option so that users can filter in this column
Show in Column Chooser	Select to include the column in the column selector, which allows users to select, at run time, the columns to be shown
Title	Type the text for the column title.
Width	Type the width of the initial column in Monitor-independent (WPF) units.
Sort	Choose how to sort initially by this column.

Setting up the Trend Window (Legacy)

Double-click a Trend Window object on the screen to set it up. Table 21 describes the configuration of the trend window.

WARNING - This control has been replaced by the one presented in the next item. Not recommended your
use in new projects.

Field	Description
Control Name	Set a name for the control so that it can be accessed in the CodeBehind script. See "Code Behind - Screen Scripts"
0(online) 1(history)	- the control shows the data in real time (online.) - the control shows the history data. For example: Tag.onLineHist.
OnlineTrigger	The update rate of online trend control. For example, 00:00:01 or {Tag.trendTimeSpan}.
HistoryDateTime	The starting point for trend ing historical control. For instance {Tag.initialTrendHistory}.
Max Samples	Sets the maximum number of samples that will be collected from the database.
Window	Sets the background color of the trend control.
Labels	Set the color of trend control labels
Cursor Enable	Turn the vertical cursor display on (checked) or off (unchecked).
CursorPosition (%)	Indicates the position of the cursor, where 0 means start position and 100 means end position. For example: Tag.cursorPos.
Cursor Output	Indicates the value of the X-axis for the current cursor position. For example, Tag.cursorOut.
Cursor Color	Sets the color of the cursor.
Pens Legend	Sets the position of the feather legend frame in the trend control.
Y Axis
Range	Sets the minimum and maximum values for the Y axis.
Labels	Sets the amount of horizontal grid lines.

X Axis

Format	The format of the Y axis values. "Tag Formats" . For example, N1 (number with a decimal place).

Interval	Sets the time interval of the X-axis.
Labels	Sets the amount of vertical grid lines
Format	The X-axis format is defined by two fields: first-line format and second-line format. This is especially useful for defining labels for tags that require two lines of information. For valid date and time formats see "Tag Formats" . For example, t (time) for the format of the first line, d (abbreviated date) for the format of the second line.
Pens
Visible	Shows (1) or hides (0) the selected penalty. Ex 1 or {showPen1}.
Tag	Sets the tag that will provide the value for the penalty
Hi	Minimum value of the linear scale for the value of the tag, according to the range of the Y axis.
Max	Maximum value of the linear scale for the tag value, according to the range of the X axis.
Pen	Choose the model, color, and line thickness of the pen.
Mark	Sets the brand format for each point of the trendline.
CursorValue	Set the tag that will receive the actual value of the Y axis, according to the cursor position. For example: Tag.pen1CursorValue.
FieldName	Sets the name of the feather.

Using the scale on the Y-axis

Considering:
Y-axis Min = 0; Y Max axis = 100;
Trend control allows many feathers to be displayed together. When your feathers don't have the same scale, you can use the tips below to adjust your data on the same chart, for better visualization:

If a penalty has a lower scale, from 0 to 1, for example, you can set the Max property of the penalty at 1, so when the actual tag value is 1, the value 100 will be displayed on the chart. (scale 100/1).
If a penalty has a larger scale, from 0 to 1000, for example, you can set the Max property of the penalty to 1000, so when the actual tag value is 1000, the value 100 will be displayed on the chart. (Scale 1/10).

Setting up the Trend Window

The information in this item refers to a new Graphical Trend object made available from version an-2014.2.
This graphic trend object is chosen with the icon

Double-click a Trend Window object on the screen to set it up. The Table describes the configuration of the trend window.

Field	Description
Control Name	Set a name for the control so that it can be accessed in the CodeBehind script. See "Code Behind - Screen Scripts".
Bind to Tag	Choose a property of an object on the button so that the setting of this trend object is saved in this property..
Bind Pens to tag	Choose a property from an object in which the feather values will be saved.
Orientation	You can choose the chart orientation: Horizontal; Vertical from top to bottom or Vertical from bottom to top.
Window	Sets the background color of the trend control.
Labels	Set the color of trend control labels
Grid Lines	Set the color of the grid lines of the chart
Grid Lines Stroke	Sets the format of grid lines, full, dashed, etc. and their thickness.
Cursor Settings	Press the Settings button to set up to two cursors for the chart. A primary and a secondary. For each of them can be defined: whether enabled or not, the color and shape of the line, a legend (Tooltip), and whether or not to be shown along with the cursor the current values of the quantities in x and y.
Mouse Actions	Check this option if you want to receive notifications according to mouse actions.
Marker tooltips	Check this option if you want seam shown tooltips in the point marks.
Y Axis
Y scale for each pen	Check this option if you want to assign your own scales to each penalty. In this case the "Range" will be defined in the aabixo feather table.

Y Range	Sets the minimum and maximum values for the Y axis.
Labels	Sets the amount of horizontal grid lines.
Format	The format of the Y axis values. "Tag Formats" For example, N1 (number with a decimal place).
Stack Y scales	Check this option so that the scales appear vertically on one over the other. If you don't mark the scales, they appeared side by side.
Merge similar Y scales	Mark so that if the scales are similar only to show one of them.
Legend	Sets the position of the feather legend frame in the trend control.

X Axis
Duration	Sets the time interval of the X-axis. Choose this option if the X-axis is time
XY Chart	Choose this option if the X-axis is not time. In this case set the minimum and maximum values for the X axis.
Labels	Sets the amount of vertical grid lines
Format	The X-axis format is defined by two fields: first-line format and second-line format. This is especially useful for defining labels for tags that require two lines of information. For valid date and time formats see "Tag Formats". For example, t (time) for the format of the first line, d (abbreviated date) for the format of the second line.
Navigation controls	Check this option if you want it to appear, below the X-axis icons for the chart navigation control: Zoom in, zoom out, pan to the left, scroll to the right, reset values, and occupy the entire screen.
Pens	The buttons allow, add new pen, delete a pen and still change the order of the lines with definition of feathers. For each row the following data must be defined.
TagName	Sets the tag that will provide the value for the penalty
PenSettings	Clicking on the cell pops up window for color and line format settings, if padding below the line, and symbols on the dots.

MinValue	Minimum value of the linear scale for the value of the tag, according to the range of the Y axis.
MaxValue	Maximum value of the linear scale for the tag value, according to the range of the X axis.
Pen Label	Label with the title for the feather.
Auto	By marking this cell, the range will be automatic, according to the displayed values.

Using the scale on the Y-axis

Considering:
Y-axis Min = 0; Y Max axis = 100;
Trend control allows many feathers to be displayed together. When your feathers don't have the same scale, you can use the tips below to adjust your data on the same chart, for better visualization:

If a penalty has a lower scale, from 0 to 1, for example, you can set the Max property of the penalty at 1, so when the actual tag value is 1, the value 100 will be displayed on the chart. (scale 100/1).
If a penalty has a larger scale, from 0 to 1000, for example, you can set the Max property of the penalty to 1000, so when the actual tag value is 1000, the value 100 will be displayed on the chart. (Scale 1/10).

Setting up a DataGrid Window

Double-click a DataGrid window object on a screen to set it up. Table 23 describes the configuration of the DataGrid window. Critical fields that you must configure are shown with a *.
Table 23: Setting up a DataGrid window

Field	Description
Control Name	Set a name for the control so that it can be accessed in the CodeBehind script. See "Code Behind - Screen Scripts"
Data Source	Enter the dataset table or query name to use in the window
SelectedValues	Type a tag or tag array to receive the contents of the selected row.
SelectedIndex	Enter a tag to receive the number of the currently selected row. Line numbering starts with 0.
Linescount	Select a tag to receive the number of rows in the window.

Theme	Select the theme for the window.
BindindMode	Choose the mode of linking between data and table that should be used. See in http://msdn.microsoft.com/en-us/library/ system.windows.data.bindingmode.aspx.
AllowInsert	Select so that users can add rows.
Show Group Control, Label	Type the text to display in the column titles.
Show Column Titles	Select to display column titles.
AllowSort	Select to allow users to sort the data by column.
Auto Create Column	Select so that the system automatically includes all columns in the source table in the window. If selected, you do not have to configure all the columns with the options below.. To customize specific columns, add the column in the column list and set the settings on the right side, described below. Uncheck this option to manually configure each column that you want to include in the list using the settings on the right side, described below.
Filter	Type a SQL query to limit the data displayed.
Refresh	Enter a tag name that will trigger an update of the data.
Columns	To customize specific columns, add the column in the column list and set the settings on the right side, described below.
Visible	Select to have the column appear in the DataGrid window
Editable	Select to allow users to edit the column.
Show in Column Chooser	Select to include the column in the column selector, which allows users to select the columns to show.
FieldName	Type a name for the column.
FieldType	Select the data type of the column.
Title	Type a text for the column header.
Width	Type the width of the initial column in Monitor-independent (WPF) units.
Sort	Choose how to initially sort the column.

Appearance and Transformation

These settings can be made for controls on a screen. Define the appearance of a control and a way to rotate or distort.

Appearance

Fill - When you click on the comic, a window appears
of choosing the brush for filling the control, which includes colors, gradients, and texture. If you prefer to use an image for padding, in this window there is a Image that allows you to choose images and their configuration.
Line - The same window appears, described above, for choosing the contour line of the control.
Stroke - Clicking on the figure, a window appears to choose the "Stroke", i.e. line format, full po, dotted, dashed, etc.
Opacity - Determines the opacity of the control fund, fractional number between 0 and 1. 0 is transparent and 1 is opaque.

Transform

The arrow defines rotation of the control. Choose the angle of rotation on the ruler below.
The icon defines distortion of the control. Choose distortion angles on the X and Y axes of the screen plane

Changing multiple controls

The functionality of Replace is offered when selecting multiple controls on a Screen.
If you want to change a set of Tags or Texts on one screen, select all of them and use the functionality Replace, as shown in the two figures below.

The figure below shows selection of several objects:

When you press the Tags option, the tags used in these controls are shown. If we change the tags on the right, they will be overlaid on the screen by their left-wing correspondents.

In the case of texts, all strings used in the selected objects will be displayed in a similar way to the one presented above, to be changed.

On this page:

Action.NET - Documentation v9.2

Objects for the graphical interface

Configuring WPF components

Setting up a circular panel

Setting up a Pie Chart

Setting up a BarChart

Setting up an Alarm Window

Setting up the Trend Window (Legacy)

Using the scale on the Y-axis

Setting up the Trend Window

Using the scale on the Y-axis

Setting up a DataGrid Window

Appearance and Transformation

Transform

Changing multiple controls