Versions Compared

Key

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

Para facilitar a criação de telas, além do desenho direto de objetos, há também a possibilidade da inserção direta de objetos completos, como caixas com listas, botões, gráficos, listas de alarmes, e outros mais que podem ser importados de bibliotecas externas WPF.

Toolbox de controles

Na área DRAW, no lado esquerdo é mostrado o painel de configuração de propriedades de telas e de controles de visualização. As seções seguintes mostram detalhes sobre estas configurações.

UId e Texto

Quando se cria um objeto ou um símbolo novo na tela, ele recebe um número que o identifica univocamente: O <Uid>. Este Uid pode ser rebatizado por um String qualquer, o que tem muita utilidade quando se necessita, por exemplo, escrever código de Script (CodeBehind) envolvendo o controle.
Como exemplo, apresenta-se um Botão usado na janela de Login. Este objeto teve o seu numero alterado para cmdSair, para facilitar seu entendimento dentro do código, conforme se pode ver na figura a seguir:
Image Removed
Text é a área onde se pode especificar uma legenda ou titulo para um controle que permita esta funcionalidade. Pode se especificar a Fonte, o tamanho e a cor do texto, além do texto propriamente.
A opção Localizable deve ser marcada em caso de se estar utilizando dicionários de linguagens no projeto, e se desejar que este texto seja alterado de acordo com o dicionário.
Tip

Para facilitar a criação de telas, além do desenho direto de objetos, há também a possibilidade da inserção direta de objetos completos, como caixas com listas, botões, gráficos, listas de alarmes, e outros mais que podem ser importados de bibliotecas externas WPF.

Nesta pagina:

Table of ContentsmaxLevel2

Toolbox de controles

Na área DRAW, no lado esquerdo é mostrado o painel de configuração de propriedades de telas e de controles de visualização. As seções seguintes mostram detalhes sobre estas configurações.

UId e Texto

Quando se cria um objeto ou um símbolo novo na tela, ele recebe um número que o identifica univocamente: O <Uid>. Este Uid pode ser rebatizado por um String qualquer, o que tem muita utilidade quando se necessita, por exemplo, escrever código de Script (CodeBehind) envolvendo o controle.
Como exemplo, apresenta-se um objeto tipo Texto usado na janela de Login para receber o código do usuário. Este objeto teve o seu numero alterado para txbUserName para facilitar seu entendimento dentro do código, conforme se pode ver na figura a seguir:

Image Added

Para cada objeto item de tela ou também a própria Tela , pode-se escolher se o mesmo deve ou não participar dos Temas de cores, que podem ser utilizados não apenas na interface de engenharia, mas também nas telas dos projetos.

Text é a área onde se pode especificar uma legenda ou titulo para um controle que permita esta funcionalidade. Pode se especificar a Fonte, o tamanho e a cor do texto, além do texto propriamente.

Toda vez que se pode especificar uma cor e o objeto foi marcado como habilitado para Temas, ao invés de se escolher uma cor se escolhe uma função para a cor, por exemplo cor de fundo, cor de frente etc. Depois, conforme o Tema escolhido será apresentada a cor utilizada para aquela função no tema atual.

A opção Localizable deve ser marcada em caso de se estar utilizando dicionários de linguagens no projeto, e se desejar que este texto seja alterado de acordo com o dicionário. 

Propriedades dos Itens de Visualização

Para cada objeto item de tela ou também a própria tela possui propriedades de visualização que são mostradas a seguir.

Image Added

Alinhamento de Conteúdo - Nos controles que há um conteúdo, como um texto, dentro de uma caixa ou quadro, são oferecidos os ajustes mostrados, que permitem a escolha do alinhamento deste conteúdo.

Aparência - Aparência do controle, inclui a escolha da cor de fundo ( ou de figura de fundo), e a existência ou não de uma linha ao redor do controle. Também pode ser escolhida a cor da linha e sua forma, tracejado, pontilhado, cheia. O fundo pode ainda ter a definição da percentagem de opacidade ou até transparência completa.

Transformação- Serve para definir inclinação do controle ou deformação angular do mesmo.

Layout- Define a posição na tela e o tamanho do controle.

Cores e Temas

Nesta nova versão foram melhorados tanto os temas no ambiente de desenvolvimento quanto os temas de projeto!

Temas do ambiente de desenvolvimento

  • Escolha entre vários temas para o estilo que você mais gosta, talvez para se adequar ao seu ambiente de uso (descanse seus olhos com o modo escuro).

  • Abra vários projetos ou várias cópias do mesmo projeto e cada um pode ter seu próprio tema para facilitar qual projeto você está trabalhando ou referenciando.

Temas de Projeto

  • Permite que os usuários escolham facilmente um tema com o novo seletor de tema para melhor se adequar ao seu ambiente ou habilidades visuais.

  • Construa facilmente seu próprio tema ou use um de nossos temas predefinidos.

  • É possível desabilitar o tema para um item ou até mesmo para uma página inteira, basta apenas preencher a caixa de seleção.

Veja também todos os detalhes sobre temas na secção Temas de Cores.

Janela Editor de Cores

Como já mencionado, em vários locais pode-se especificar cores, como em fundos, linhas textos. Nestes mesmos locais, neste caso somente em fundos, pode-se especificar ao invés de uma cor de uma imagem ou padrão como um reticulado.

Para esta definição, ao clicar-se nos locais apropriados para esta escolha (normalmente quadros com cores), aparece a janela para escolha de cores, Editor de Cores, mostrada na figura seguinte.

Image Added

Nesta janela pode-se escolher não somente a cor, mas também, aparências de gradientes e saturação de cores com pretos e brancos.

Também nesta janela, pode-se escolher além da cor, uma função para esta escolha. Isto é a definição básica para o uso de Temas de cores. Na janela aparece a palavra DefaultColor, que será a cor utilizada sempre que não houver uma escolha de função. Então, se se usou esta cor e esta função para o fundo de um controle, sempre este local estará com esta DefaultColor, qualquer que seja o tema escolhido. Trata-se de uma virtualização da escolha da cor.

Janela de Cores de Temas

Na janela Editor de Cores, clicando-se ao lado do nome da função para uma cor, aparece a janela de definição de temas, com todas as cores que são definidas para cada função e para cada tema.

Na figura é mostrada esta janela. Nas colunas são apresentadas as cores de cada função para um determinado tema. Veja na coluna do tema Blue , são mostradas as cores que serão utilizadas em cada função de cor como DisplayBackground, TextForeground, etc.

Image Added

Dinâmicas e Animações

A área de configuração Dynamics permite que você configure as mudanças em tempo real na aparência de um objeto, sua posição, seu tamanho, suas cores, o valor mostrado pleo pelo objeto, a ação que o objeto deve apresentar quando um usuário o clica, e outras coisas. Esse comportamento dinâmico é configurado através da criação de elos entre as propriedades do objeto e as propriedades das Tags ou outras propriedades em tempo de execução do projeto.
Em alguns sistemas, a denominação animação é usada para se referir a essas mudanças dinâmicas em tempo de execução. No Action.NET usa-se o termo Dynamics para distingui-las claramente dos recursos de animação fornecidos pelo WPF. As animações WPF também se referem a alterações nas propriedades gráficas dos objetos executando nos monitores, mas usando temporizadores e outros status de objetos para dirigir a animação, e não os valores da base de dados em tempo real.
Quando você clicar duas vezes em um objeto, ou pressionar o botão Dynamics, ou selecioná-lo no menu de contexto do botão direito, é apresentada uma lista das dinâmicas que podem ser aplicadas no objeto selecionado.
A Tabela 3 lista as dinâmicas disponíveis.


Tabela 3: Dinâmicas e Animações

Configuração

Descrição

Action

Executa ações e comandos acionados pela interface do usuário.

Shine

Altera a aparência objeto dinamicamente.

TextIO

Dinâmica de Entrada e saída de textos

HyperLink

Abre um hiperlink.

Security

Define as permissões do objeto para executar ações, em tempo de execução

FillColor

Muda dinamicamente a cor de preenchimento do objeto

LineColor

Muda dinamicamente a cor da linha do objeto

TextColor

Muda dinamicamente a cor de texto do objeto

Bargraph

Dinâmica de barra gráfica

Visibility

Altera dinamicamente a visibilidade e opacidade objeto.

MoveDrag

Move dinamicamente o objeto.

Scale

Muda dinamicamente o tamanho do objeto.

Rotate

Gira o objeto dinamicamente.

Skew

Distorce o objeto dinamicamente.

TextOutput

Cria a dinâmica de saída de texto.

Anchor
Action_Dynamic
Action_Dynamic
Action Dynamic

Configuração

Descrição

Action

Executa a ação desencadeada pela interface do usuário.

Event

Escolha um dos eventos do mouse. Mais do que um evento pode ser selecionado para cada ação. Por exemplo: Uma ação para o evento MouseLeftButtonDown e outra ação para MouseLeftButtonUp.

Action

Selecione uma ação para o evento determinado:

  • Nenhum - Nenhuma ação.

  • SetValue - Define o valor do objeto.

    • Object - O objeto que vai receber o valor.

    • Valor - O valor que será passado para o objeto.

  • ToggleValue - Alterna o valor do objeto. Se o valor atual do objecto é zero, o valor vai para 1. Se o valor atual do objecto é diferente de zero, o valor vai para 0.

    • Object - O objeto que será alternado.

  • OpenDisplay - Abre um display.

    • Display- O nome da Tela que será aberta.

  • CloseDisplay-Fecha um display.

    • Display-O nome da Tela que será fechada.

  • OpenLayout - Abre um layout.

    • Layout - O nome do layout que será aberto.

  • RunScript - Executa um script que deve ser colocado na aba Display> CodeBehind. Execute uma das seguintes ações:

    • Digite o nome do novo método e clique Novo .

    • Escolha um dos métodos existentes no comboBox.

  • RunExpressions - Executa a expressão dada.

    • Expressão - Digite a expressão. Por exemplo: Tag.a + 1, ou Tag.a + Tag.b ou Math.cos (Tag.angle) * Math.PI.

    • Resultado (opcional) - Digite o tag ou a propriedade que irá receber o valor da expressão.

Info

Exemplos de Run Expresssions:

  • Somar dois valores e passar o resultado para outra tag.

Expressão-Tag.quantity1 + Tag.quantity2. Resultado-Tag.totalQuantity.

  • Incrementar um tag.

Expressão-tagCounter + 1. Resultado-tagCounter.

  • Incrementar um tag (0 - 10).

Expressão- If (tagCounter <10, tagCounter + 1,0). Resultado:-tagCounter.

Para mais informações, consulte "Configurando Expressões".

Image RemovedImage Removedanchor

Dinâmica

_

de

_

Brilho

_

(Shine

_

Dynamic)

Dinâmica_de_Brilho_(Shine_Dynamic)Dinâmica de Brilho (Shine Dynamic)Dinâmica_Text_I/ODinâmica_Text_I/O
ConfiguraçãoDescrição

Configuração

Descrição

Shine

Altera a aparência do objeto dinamicamente.

IsMouseOver

Digite um tag que receberá o OverValue ou o NotOverValue.

OverValue

O valor de IsMouseOver quando o mouse está sobre o objeto.

NotOverValue

O valor de IsMouseOver quando o mouse não está sobre o objeto.

Tooltip

Um texto para legenda ao passar com mouse sobre o objeto

Mouse Over

A aparência do objeto quando o mouse está sobre ele. Appearance  Opacidade - A opacidade do objeto (0 = transparente, 1 =
opaco).

  • Scale - O tamanho do objeto (0.5 = metade, 1 = o mesmo tamanho, 1,5 = um ano e meio, 2 = dobro do tamanho).

  • OuterGlow - Define a cor do OuterGlow, deve-se marcar a seleção para ativar ou desativar este efeito.

  • TextColor - Define a cor do texto, deve-se marcar a seleção para ativar ou desativar este efeito.

Mouse Not Over

A aparência do objeto quando o mouse não está sobre ele: Appearance  Opacidade - O opacidade do objeto(0 = transparente, 1 =
opaco).

  • Scale - O tamanho do objeto (0.5 = metade, 1 = o mesmo tamanho, 1,5 = um ano e meio, 2 = dobro do tamanho).

Is Selected

A aparência do objeto quando o mesmo está selecionado: Appearance  IsSelected - Define se o objeto está selecionado

  • Opacidade - O opacidade do objeto(0 = transparente, 1 = opaco).

  • Scale - O tamanho do objeto (0.5 = metade, 1 = o mesmo tamanho, 1,5 = um ano e meio, 2 = dobro do tamanho).

Scale Reference

Centro Image Removed Esquerda
Image Removed Para cima
Image Removed Para direita Image Removed Para baixo

Anchor
Image Added

Dinâmica Text I/O

Configuração

Descrição

TextIO .

Dinamica de entrada e saida de texto.
Se o texto é um valor de Tag ou uma propriedade, ele deve estar entre colchetes. Por exemplo: {Tag.analogInt1}

Binding Mode

Associar um objeto com uma tag:

  • TwoWay - Permite entrada e saída.

  • InputOnly - Somente permite entrada de tetxo (o valor do tag atual não é mostrado, mas novos valores podem ser inseridos).

  • OutputOnly - Somente saída de texto é permitida.

Object or Expression

Objeto (entrada) ou Expression (somente saida) que está conectada com a caixa de texto.

DesignModeCaption

O valor mostrado no modo de engenharia:

  • ShowObjectNames - O conteúdo do campo de texto é mostrado exatamente como ele é.

  • ShowPlaceHolders - São mostrados carcteres # # # , o número de caracteres é definida pelo campo MaxLength.

Input Range

Define o intervalo numérico para o valor inserido.

MaxLength

Define o número máximo de caracteres.

Format

Define o formato a ser usado para números na visualização

Dinâmica_de_Security_(Segurança)Dinâmica_de_Security_(Segurança)

Configuração

Descrição

HyperLink

Abre um hyperlink.

HyperLinkType

Selecione o tipo de hyperlink:

  • http

  • ftp

  • file

  • mailto

  • telnet

Url

Configurar o URL para abrir om hiperlink

Anchor

Dinâmica de Security (Segurança)

Configuração

Descrição

Security

Defina as permissões do objeto em tempo de execução:

Disable

Digite um Tag, uma propriedade, ou uma expressão que retorna um valor. Considerando o valor resultante:

  • Zero - objeto será habilitado.

  • Maior que zero - o objeto será desativado.
    Para mais informações, consulte "Configurando Expressões"

, na página 161.

Verify Permissions

Quando selecionado, apenas os grupos de permissões escolhidos, podem acessar o objeto.

Confirm Message

Mostra um diálogo de confirmação antes de tomar alguma ação:

  • textBox - Digite a mensagem que irá aparecer na caixa de diálogo.

  • checkBox - Ativa ou desativa a Confirmar Mensagem.

Dinâmica Fill, Line e Text Color

Configuração

Descrição

FillColor

Muda a cor de preenchimento do objeto dinamicamente.

Expression

O valor usado para a dinâmica FillColor.

Change Color

  • UsingLimits - A cor resultante é determinada quando o valor for igual ou superior a um dos limites.

  • AbsoluteValue - A cor será o valor da expressão. O valor deve ser um nome válido de cor ou numero hexadecimal para cores. Por exemplo: "White" ou "# FFFFFFFF"

    Exemplo Limites:
    1 - Red
    10 - Blue
    Quando o valor é 0, o objeto terá sua própria cor (a dinâmica de preenchimento cor não vai fazer nada)
    Quando o valor é de 1 a 9, o objeto terá a cor vermelha. Quando o valor é superior a 10, o objecto terá a cor azul.

LineColor

Muda a cor da linha objeto dinamicamente:.

Expression

O valor usado para a dinâmica LineColor

.

Configuração

Descrição

.

Change Color

  • UsingLimits - A cor resultante é determinada quando o valor for igual ou superior a um dos limites.

  • AbsoluteValue - A cor será o valor da expressão. O valor deve ser um nome válido de cor ou numero hexadecimal para cores. Por exemplo: "White" ou "# FFFFFFFF"

    Exemplo Limites:
    1 - Red
    10 - Blue
    Quando o valor é 0, o objeto terá sua própria cor (a dinamica de LineColor não vai fazer nada)
    Quando o valor é de 1 a 9, o objeto terá a cor vermelha. Quando o valor é superior a 10, o objecto terá a cor azul.

TextColor

Muda a cor do texto objeto dinamicamente:.

Expression

o valor usado para a dinâmica TextColor.

Change Color

  • UsingLimits - A cor resultante é determinada quando o valor for igual ou superior a um dos limites.

  • AbsoluteValue - A cor será o valor da expressão. O valor deve ser um nome válido de cor ou numero hexadecimal para cores. Por exemplo: "White" ou "# FFFFFFFF"

    Exemplo Limites:
    1 - Red
    10 - Blue
    Quando o valor é 0, o objeto terá sua própria cor (a dinamica de TextColor não vai fazer nada)
    Quando o valor é de 1 a 9, o objeto terá a cor vermelha. Quando o valor é superior a 10, o objecto terá a cor azul.

Dinâmica Bargraph

Configuração

Descrição

Bargraph

Dinâmica de gráfico de barras

Expression

o valor usado para a dinâmica de gráfico de barras.

Value Range

Os valores mínimos e máximos que correspondem ao percentual de preenchimento máximo e mínimo.

Fill (%)

O percentual mínimo e máximo de preenchimento. da barra gráfica

Configuração

Descrição

Image Removed para cima

Image Removed centro horizontal

Image Removed para baixo

Image Removed para a direita

Image Removed centro vertical

Image Removed para a esquerda

Bar Color

A cor do gráfico de barras.

Orientation

A orientação do gráfico de barras:

Image Removed
Image Added

Dinâmica Visibility

Dinâmica_MoveDragDinâmica_MoveDrag

Configuração

Descrição

Visibility

Altera dinamicamente a visibilidade e opacidade do objeto

Visible

Digite um tag, uma propriedade, ou uma expressão que retorne um valor. Considerando-se o valor resultante:

  • Zero - Objeto será visível.

  • Maior que zero - Objeto serão ocultado.
    Para mais informações, consulte "Configurando Expressões"

, na página 161

Tooltip

Um texto que será exibido como uma dica de ferramenta

Opacity

Opacidade

  • ObjectValue - O valor usado para definir a opacidade.

  • Range - Os valores mínimos e máximos que correspondem ao máximo e mínimo. de opacidade.

  • Opacidade - A mínima e máxima opacidade (0 - invisível, 0,5 - um pouco transparente, 1 - opaco).

Anchor

Dinâmica MoveDrag

Configuração

Descrição

MoveDrag

Movimenta dinamicamente o objeto

BindingMode

  • TwoWay - Entrada e saída causam movimentação

  • InputOnly - Apenas entrada causa movimento. O objeto não se move quando o valor do objeto muda.

  • OutputOnly - Apenas saída causa movimento. O objeto não se move com interação do usuário.

Horizontal Move

  • Expressão com a referência para movimento horizontal

  • Range - Os valores mínimos e máximos que correspondem à posições horizontais mínima e máxima.

  • Posição - As posições horizontais mínima e máxima

Vertical Move

  • Expressão com a referência para movimento vertical

  • Range - Os valores mínimos e máximos que correspondem à posições verticais mínima e máxima.

  • Posição - As posições verticais mínima e máxima

Dinâmica Scale

Setting

Descrição

Scale

Muda o tamanho do objeto dinamicamente.

Width Scale

  • Expressão - o valor usado para a escala de largura.

  • Range - Os valores mínimos e máximos que correspondem aos percentuais minimo e máximo da largura de escala

  • Escala (%) - O percentual mínimo e máximo de largura de escala.

Height Scale

  • Expressão - o valor usado para a escala de altura

  • Range - Os valores mínimos e máximos que correspondem aos percentuais minimo e máximo da altura de escala

  • Escala (%) - O percentual mínimo e máximo de altura de escala

.

Scale Reference:

Image Removed

CentroImage Removed

Image Removed Esquerda

Image Removed Para cima

Image Removed Direita

Image Removed Para baixo
  • .

Scale Reference:

Image Added

Anchor
Dinâmica_Rotate
Dinâmica_Rotate
Dinâmica Rotate

Dinâmica_SkewDinâmica_Skew Anchor_bookmark259_bookmark259

Configuração

Descrição

Rotate

Gira o objeto dinamicamente.

Expression

o valor utilizado para a rotação.

Value Range

Os valores mínimos e máximos que correspondem ao ângulo máximo e mínimo de rotação. Por exemplo: de 0 a 100

Angle

O ângulo mínimo e máximo de rotação. Por exemplo: 0-360

Center Reference

Image Removed

CentroImage Removed

Image Removed Esquerda

Image Removed Para cima

Image Removed Direita

Image Removed Para baixo

Anchor
Image Added

Dinâmica Skew

Configuração

Descrição

Skew

Distorce o objeto dinamicamente.

X-axis Skew

  • ObjectValue - o valor usado para a inclinação do eixo-X.

  • Range - Os valores máximo e mínimo que corresponde ao ângulos de desvio máximo e mínimo do eixo X. Por exemplo: de 0 a 100.

  • Skew (º) - O mínimo e o máximo ângulo de desvio do eixo X. Por exemplo: de 0 a 180 º.

Y axis skew

  • ObjectValue - o valor usado para a inclinação do eixo-Y.

  • Range - Os valores máximo e mínimo que corresponde ao ângulos de desvio máximo e mínimo do eixo Y. Por exemplo: de 0 a 100.

  • Skew (º) - O mínimo e o máximo ângulo de desvio do eixo Y. Por exemplo: de 0 a 180 º.

Skew Reference

Image Removed

Centro

Image Removed

Image Removed Esquerda

Image Removed Para cima

Image Removed Direita

Image Removed Para baixo

Image Added

Dinâmica TextOutput

Configuração

Descrição

TextOutput

Dinâmica de saída de texto.

Expression

Indica o texto que será mostrado no objeto.

Localizable

Indica se o texto deve ser traduzido quando o dicionário muda.

DesignModeCaption

O valor mostrado no modo de design:

  • ShowObjectNames-O conteúdo do campo de texto é mostrado exatamente como ele é.

  • ShowPlaceHolders - São mostrados os caracteres # # #, o número de caracteres é definido pelo campo

MaxLength

Define o número máximo de caracteres.

Format

Define o formato a ser usado para números na visualização

Panel

Scroll ignore
scroll-viewporttrue
scroll-pdftrue
scroll-officetrue
scroll-chmtrue
scroll-htmltrue
scroll-docbooktrue
scroll-eclipsehelptrue
scroll-epubtrue

Nesta página:

12false