Na barra de ferramentas vertical em Edit>Draw, uma das opções é a escolha de Componentes WPF, que podem ser instalados para o uso na confecção de telas.

Configurando componentes WPF

Quando se escolhe o ícone com a forma de pasta

abre-se uma janela mostrando todos os componentes, que já são distribuídos com o Action.NET. Para criar uma instancia sobre a tela atualmente sendo editada, basta clicar (selecionar) o componente desejado e fechar a janela clicando o botão Ok.
A figura mostra esta janela de seleção de componentes WPF.

As seções seguintes apresentam instruções para a configuração de alguns componentes WPF, já distribuídos.

Configurando um painel circular

Dê um duplo clique em um objeto painel circular na tela para configurá-lo. a Tabela 17 descreve a configuração do painel Circular.

Campo	Descrição
Control Name	Define um nome para o controle, desta forma ele poderá ser acessado no script CodeBehind. Ver "Code Behind - Scripts de Telas" .
Columns	Para cada valor que você deseja incluir, selecione uma seção e configure as definições, à direita da lista , que estão descritas a seguir. O painel exibe uma seção para cada coluna.
Image	Escolha em Resources uma imagem para exibir.
Preview	Somente leitura. Exibição de imagem selecionada.

Configurando um Gráfico de Pizza

Dê um duplo clique em um objeto PieChart na tela para configurá-lo. A Tabela 18 descreve a configuração de gráfico de pizza.

Campo	Descrição
Control Name	Define um nome para o controle, então ele pode ser acessado no script CodeBehind. Ver "Code Behind - Scripts de Telas".
ChartType	Selecione o tipo de gráfico.
Data Items	Para cada valor que você deseja incluir, selecione uma seção e configure as definições, ao lado direito da lista, que estão descritas a seguir.. O gráfico mostra uma seção para cada item de dados..
FieldName	Digite um nome para o item de dados.
LinkedValue	Digite um nome de tag como fonte de dados para o item de dados.
Brush	Clique para selecionar a cor para o item de dados.

Configurando um Gráfico de Barras (BarChart)

Dê um duplo clique em um objeto BarChart na tela para configurá-lo. A Tabela 19 descreve a configuração de gráfico de barras.

Campo	Descrição
Control Name	Defina um nome para o controle, para que ele possa ser acessado no script CodeBehind. Ver "Code Behind - Scripts de Telas"
Type	Selecione o tipo de gráfico.
Data Source	Entre o nome do Dataset Table ou query para usar para o gráfico.
Grid Lines	Clique para selecionar a cor das linhas de grade.
Window	Clique para selecionar a cor para o fundo da janela com o gráfico.
Labels	Clique para selecionar a cor para os rótulos.
Show Horizontal Labels 45°	Selecione para mostrar os rótulos do eixo horizontal em angulo de 45°.
Show value over bar	Selecione para exibir o valor da barra acima da barra.
Data Items	Para cada coluna, existente na fonte de dados, que você deseja incluir, marque uma barra e configure as definições ao lado direito da lista, que estão descritas a seguir. O gráfico exibe uma barra para cada linha de definição.
FieldValue	Nome da coluna no banco de dados.
Min.	Digite uma tag para definir o valor mínimo.
Max.	Digite uma tag para definir o valor máximo
Brush	Clique para selecionar a cor para o item de dados.

Configurando uma Janela de Alarmes

Dê um duplo clique em um objeto Janela de Alarme em uma tela para configurá-lo. A Tabela 20 descreve a configuração da janela de alarme.

Campo	Descrição
Control Name	Defina um nome para o controle, para que ele possa ser acessado no script do CodeBehind. Ver Code Behind - Scripts de Telas"
MaxLines	O número máximo de linhas exibidos na janela.
List	Selecione o tipo de alarmes que serão exibidos na janela: OnlineAlarms - Exibe apenas os alarmes ativos. Os Alarmes são exibidos somente enquanto o item de alarme está no estado de alarme. AlarmHistory - Exibe somente alarmes passados. Events - Mostra apenas os SystemEvents ( Edit> Alarms> Groups ). AlarmHistory + Events - Exibe alarmes passados e SystemEvents
Merge Hi and HiHi Lines	Combinar alarmes configurados como Hi e HiHi em uma única linha.
History Interval/ To	Introduza as datas de início e fim do intervalo para o qual os alarmes devem ser incluídos.
Show Column Titles	Selecione para exibir os títulos das colunas.
Ack by Page	Digite um nome de tag, que quando disparado, reconhece os alarmes na janela de alarmes.
Show Group Control, Label	Digite o texto a ser exibido acima dos títulos das colunas.
AllowSort	Selecione para permitir que usuários classifiquem os dados por coluna.
Allow Column Reorder	Selecione para permitir que os usuários alterem a ordem das colunas.
Filter	Digite uma consulta SQL para limitar os alarmes exibidos.
Refresh	Digite um nome de tag que irá desencadear uma atualização dos dados de alarme.
Display Millisecond	Selecione para incluir milissegundos na hora do alarme.
Ack Selected Line	Configure definições para reconhecer um alarme.
Columns	Para cada coluna na lista de colunas , selecione a coluna e configure as definições ao lado direito da lista, que estão descritas a seguir
Visible	Selecione esta opção para a coluna ser exibida na janela de alarme.
Allow Filter	Selecione a opção para que os usuários possam filtrar nesta coluna
Show in Column Chooser	Selecione para incluir a coluna no seletor de colunas, o que permite aos usuários selecionar, em tempo de execução as colunas a serem mostradas
Title	Digite o texto para o título da coluna.
Width	Digite a largura da coluna inicial, em unidades do WPF (pixels independentes de monitor).
Sort	Escolha como ordenar inicialmente por esta coluna.

Configurando a Janela de Tendência (Legacy)

Dê um duplo clique em um objeto Janela de Tendência na tela para configurá-lo. A Tabela 21 descreve a configuração da janela de tendência.

AVISO - Este controle foi substituído pelo apresentado no próximo item. Não recomendados sua
utilização em novos projetos.

Campo	Descrição
Control Name	Defina um nome para o controle, para que ele possa ser acessado no script do CodeBehind. Ver "Code Behind - Scripts de Telas"
0(online) 1(history)	- o controle mostra os dados em tempo real (on-line.) - o controle mostra os dados do histórico. Por exemplo: Tag.onLineHist.
OnlineTrigger	A taxa de atualização do controle de tendência online. Por exemplo, 00:00:01 ou {Tag.trendTimeSpan}.
HistoryDateTime	O ponto inicial para o controle histórico tendência. Por exemplo, {Tag.initialTrendHistory}.
Max Samples	Define o número máximo de amostras que serão coletadas do banco de dados.
Window	Define a cor de fundo do controle de tendência.
Labels	Definir a cor dos rótulos do controle de tendência
Cursor Enable	Ativar (marcado) ou desativar (desmarcado) a exibição do cursor vertical.
CursorPosition (%)	Indica a posição do cursor, onde 0 significa posição inicial e 100 significa posição final. Por exemplo: Tag.cursorPos.
Cursor Output	Indica o valor do eixo X para a posição atual do cursor. Por exemplo, Tag.cursorOut.
Cursor Color	Define a cor do cursor.
Pens Legend	Define a posição do quadro de legenda das penas no controlo de tendência.
Y Axis
Range	Define os valores mínimo e máximo para o eixo Y.
Labels	Define a quantidade de linhas de grade horizontais.

X Axis

Format	O formato dos valores do eixo Y. Para os formatos numéricos válidos, consulte "Formatos de Tags" . Por exemplo, N1 (número com uma casa decimal).

Interval	Define o intervalo de tempo do eixo-X.
Labels	Define a quantidade de linhas de grade verticais
Format	O formato do eixo X é definido por dois campos: formato da primeira linha e formato de segunda linha. Isto é especialmente útil para definir etiquetas para marcas que requerem duas linhas de informação. Para formatos válidos de data e hora consulte "Formatos de Tags" . Por exemplo, t (tempo) para o formato da primeira linha, d (data abreviada) para o formato da segunda linha.
Pens
Visible	Mostra (1) ou oculta (0) a pena selecionada. Ex 1 ou {showPen1}.
Tag	Define a Tag que irá fornecer o valor para a pena
Min	Minimo valor da escala linear para o valor da tag, de acordo com o intervalo do eixo Y.
Max	Máximo valor da escala linear para o valor da tag, de acordo com o intervalo do eixo X.
Pen	Escolhe o modelo, a cor, e a espessura da linha da caneta.
Mark	Define o formato da marca para cada ponto da linha de tendência.
CursorValue	Definir a tag que vai receber o valor real do eixo Y, de acordo com a posição do cursor. Por exemplo: Tag.pen1CursorValue.
FieldName	Define o nome da pena.

Usando a escala no eixo Y

Considerando-se:
Eixo Y Min = 0; Eixo Y Max = 100;
O controle de tendência permite que muitas penas sejam exibidas juntas. Quando suas penas não tem a mesma escala, você pode usar as dicas abaixo para ajustar seus dados no mesmo gráfico, para melhor visualização:

Se uma pena tem uma escala mais baixa, de 0 a 1, por exemplo, você pode definir a propriedade Max da pena em 1, assim quando o valor real do Tag for 1, o valor 100 será exibido no gráfico. (escala 100/1).
Se uma pena tem uma escala maior, de 0 a 1000, por exemplo, você pode definir a propriedade Max da pena para 1000, assim quando o valor real do Tag for 1000, o valor 100 será exibido no gráfico. (Escala 1/10).

Configurando a Janela de Tendência

As informações deste item se referem a um novo objeto Tendência Gráfica disponibilizado a partir da versão an-2014.2.
Este objeto tendência gráfica é escolhido com o ícone

Dê um duplo clique em um objeto Janela de Tendência na tela para configurá-lo. A Tabela descreve a configuração da janela de tendência.

Campo	Descrição
Control Name	Defina um nome para o controle, para que ele possa ser acessado no script do CodeBehind. Ver “Code Behind - Scripts de Telas".
Bind to Tag	Escolha no botão uma propriedade de um objeto para que a configuração deste objeto tendência seja salva nesta propriedade..
Bind Pens to tag	Escolha no botão uma propriedade de um objeto na qual os valores das penas serão salvos.
Orientation	Pode-se escolher a orientação do gráfico: Horizontal; Vertical de cima para baixo ou Vertical de baixo para cima.
Window	Define a cor de fundo do controle de tendência.
Labels	Definir a cor dos rótulos do controle de tendência
Grid Lines	Definir a cor das linhas de grade do gráfico
Grid Lines Stroke	Define o formato das linhas de grade, cheia, tracejada, etc. e sua espessura.
Cursor Settings	Pressione o botão "Settings" para definir até dois cursores para o gráfico. Um primário e um secundário. Para cada um deles pode ser definido: se Habilitado ou não, a cor e forma da linha, uma legenda (Tooltip), e se devem ou não ser mostrados junto com o cursor os valores atuais das grandezas em x e y.
Mouse Actions	Marque esta opção se desejar receber notificações de acordo com as ações do mouse.
Marker tooltips	Marque esta opção se deseja que seam mostradas tooltips nas marcas de pontos.
Y Axis
Y scale for each pen	Marque esta opção se desejar atribuir escalas própria para cada pena. Neste caso o "Range" será definido na tabela de penas aabixo.

Y Range	Define os valores mínimo e máximo para o eixo Y.
Labels	Define a quantidade de linhas de grade horizontais.
Format	O formato dos valores do eixo Y. Para os formatos numéricos válidos, consulte "Formatos de Tags" Por exemplo, N1 (número com uma casa decimal).
Stack Y scales	Marque esta opção para que as escalas apareçam verticalmente uma sobre a outra. Se não marcar as escalas apareceram lado a lado.
Merge similar Y scales	Marque para que se as escalas forem similares somente mostrar uma delas.
Legend	Define a posição do quadro de legenda das penas no controle de tendência.

X Axis
Duration	Define o intervalo de tempo do eixo-X. Escolha esta opção se o eixo X é de tempo
XY Chart	Escolha esta opção se o eixo X não é de tempo. Neste caso defina os valores mínimo e máximo para o eixo X.
Labels	Define a quantidade de linhas de grade verticais
Format	O formato do eixo X é definido por dois campos: formato da primeira linha e formato de segunda linha. Isto é especialmente útil para definir etiquetas para marcas que requerem duas linhas de informação. Para formatos válidos de data e hora consulte "Formatos de Tags" . Por exemplo, t (tempo) para o formato da primeira linha, d (data abreviada) para o formato da segunda linha.
Navigation controls	Marque esta opção se deseja que apareça, abaixo do eixo X ícones para o controle de navegação do gráfico: Aumentar (Zoom in), diminuir( Zoom out) , deslocar para a esquerda, deslocar para a direita, resetar valores e ocupar toda a tela.
Pens	Os botões permitem, adicionar nova pena, excluir uma pena e ainda alterar a ordem das linhas com definição de penas. Para cada linha os dados a seguir devem ser definidos.
TagName	Define a Tag que irá fornecer o valor para a pena
PenSettings	Clicando na célula aparece janela para definições de cor e formato da linha, se preenchimento abaixo da linha, e símbolos sobre os pontos.

MinValue	Minimo valor da escala linear para o valor da tag, de acordo com o intervalo do eixo Y.
MaxValue	Máximo valor da escala linear para o valor da tag, de acordo com o intervalo do eixo X.
Pen Label	Rótulo com o titulo para a pena.
Auto	Marcando esta célula, o range será automático, de acordo com os valores apresentados.

Usando a escala no eixo Y

Considerando-se:
Eixo Y Min = 0; Eixo Y Max = 100;
O controle de tendência permite que muitas penas sejam exibidas juntas. Quando suas penas não tem a mesma escala, você pode usar as dicas abaixo para ajustar seus dados no mesmo gráfico, para melhor visualização:

Se uma pena tem uma escala mais baixa, de 0 a 1, por exemplo, você pode definir a propriedade Max da pena em 1, assim quando o valor real do Tag for 1, o valor 100 será exibido no gráfico. (escala 100/1).
Se uma pena tem uma escala maior, de 0 a 1000, por exemplo, você pode definir a propriedade Max da pena para 1000, assim quando o valor real do Tag for 1000, o valor 100 será exibido no gráfico. (Escala 1/10).

Configurando uma Janela DataGrid

Dê um duplo clique em um objeto janela DataGrid sobre uma tela para configurá-lo. A Tabela 23 descreve a configuração da janela DataGrid. Campos críticos que você deve configurar são mostrados com um *.
Tabela 23: Configuração de uma janela DataGrid

Campo	Descrição
Control Name	Defina um nome para o controle, para que ele possa ser acessado no script do CodeBehind. Ver "Code Behind - Scripts de Telas"
Data Source	Entre o nome do Dataset Table ou query para usar na janela
SelectedValues	Digite um tag ou matriz de tags para receber o conteúdo da linha selecionada.
SelectedIndex	Digite um tag para receber o número da linha atualmente selecionada. A numeração de linhas começa com 0.
LinesCount	Selecione um tag para receber o número de linhas na janela.

Theme	Selecione o tema para a janela.
BindindMode	Escolha o modo de ligação entre dados e tabela que deva ser utilizado. Veja em http://msdn.microsoft.com/en-us/library/ system.windows.data.bindingmode.aspx.
AllowInsert	Selecione para que os usuários possam adicionar linhas.
Show Group Control, Label	Digite o texto a ser exibido nos títulos das colunas.
Show Column Titles	Selecione para exibir os títulos das colunas.
AllowSort	Selecione para permitir que usuários classifiquem os dados por coluna.
Auto Create Column	Selecione para que o sistema automaticamente inclua na janela todas as colunas da tabela fonte. Se selecionado, você não tem que configurar todas as colunas com as opções abaixo.. Para personalizar colunas específicas, adicione a coluna na lista de colunas e defina as configurações do lado direito, descritas abaixo. Desmarque esta opção para configurar manualmente cada coluna que você deseja incluir na lista usando as configurações do lado direito, descritas abaixo.
Filter	Digite uma consulta SQL para limitar os dados exibidos.
Refresh	Digite um nome de Tag que irá disparar uma atualização dos dados.
Columns	Para personalizar colunas específicas, adicione a coluna na lista de colunas e defina as configurações do lado direito, descritas abaixo.
Visible	Selecione para que a coluna seja exibida na janela do DataGrid
Editable	Selecione para permitir que os usuários edite a coluna.
Show in Column Chooser	Selecione para incluir a coluna no seletor de colunas, o que permite aos usuários selecionar as colunas a serem mostradas.
FieldName	Digite um nome para a coluna.
FieldType	Selecione o tipo de dados da coluna.
Title	Digite um texto para o cabeçalho da coluna.
Width	Digite a largura da coluna inicial, em unidades do WPF (pixels independentes de monitor).
Sort	Escolha como ordenar inicialmente a coluna.

Aparência e Transformação

Estas definições podem ser feitas para controles sobre uma tela. Definem a aparência de um controle e uma maneira de girar ou de distorcer.

Appearance

Fill - Ao clicar no quadrinho, aparece uma janela
de escolha do pincel para preenchimento do controle, que inclui, cores, gradientes e textura. Se preferir usar uma imagem para o preenchimento, nesta janela há um botão Image que permite a escolha de imagens e sua configuração.
Line - Aparece a mesma janela, acima descrita, para a escolha da linha de contorno do controle.
Stroke - Clicando na figura, aparece uma janela para escolha do "Stroke", isto é formato da linha, po cheia, pontilhada, tracejada, etc.
Opacity - Determina a opacidade do fundo do controle, numero fracionário entre 0 e 1. 0 é transparente e 1 é opaco.

Transform

A seta define rotação do controle. Escolha o angulo de rotação na régua abaixo.
O ícone define distorção do controle. Escolha ângulos de distorção nos eixos X e Y do plano da tela

Alteração de vários controles

A funcionalidade de Replace é oferecida quando se seleciona vários controles em uma Tela.
Se você deseja fazer a alteração de um conjunto de tags ou textos existentes em uma tela, Selecione todos eles e utilize a funcionalidade Replace, conforme mostrado nas duas figuras abaixo.

A figura abaixo mostra seleção de diversos objetos:

Ao pressionar a opção Tags, são mostrados os tags usados nestes controles. Se alterarmos os tags da direita, eles serão sobrepostos na tela pelos seus correspondentes da esquerda.

No caso de textos, todos os Strings usados nos objetos selecionados serão apresentados em forma semelhante à apresentada acima, para serem alterados.

Nesta página:

Action.Net - Documentação

Objetos para a interface gráfica

Configurando componentes WPF

Configurando um painel circular

Configurando um Gráfico de Pizza

Configurando um Gráfico de Barras (BarChart)

Configurando uma Janela de Alarmes

Configurando a Janela de Tendência (Legacy)

Usando a escala no eixo Y

Configurando a Janela de Tendência

Usando a escala no eixo Y

Configurando uma Janela DataGrid

Aparência e Transformação

Transform

Alteração de vários controles