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.

AnchorDinâmicas_e_AnimaçõesDinâmicas_e_Animações Anchor_bookmark247_bookmark247Dinâmicas e Animações
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 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

Tabela 4: Configuração da dinâmica Action

ConfiguraçãoDescrição

ActionExecuta

ConfiguraçãoDescrição

EventEscolha

Configuração

Descrição

Action

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

Tabela 4: Configuração da dinâmica Action

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

ActionSelecione

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" , na página 161.

Image RemovedImage Removedanchor

Dinâmica

_

de

_

Brilho

_

(Shine

_

Dynamic)

Dinâmica_de_Brilho_(Shine_Dynamic) Anchor_bookmark249_bookmark249Dinâmica de Brilho (Shine Dynamic)Tabela 5: Configuração da dinamica de Brilho Dinâmica_Text_I/ODinâmica_Text_I/O Anchor_bookmark250_bookmark250

ConfiguraçãoDescrição

ShineAltera

Configuração

Descrição

Shine

Altera a aparência do objeto dinamicamente.

IsMouseOverDigite

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

OverA

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

OverA

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

SelectedA

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

Tabela 6:

Configuração

da dinâmica Text I/O
ConfiguraçãoDescriçã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

ModeAssociar

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

ExpressionObjeto

Expression

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

DesignModeCaption

DesignModeCaptionO

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

RangeDefine

Range

Define o intervalo numérico para o valor inserido.

MaxLength

MaxLengthDefine

Define o número máximo

de caracteres.

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

AnchorDinamica_de_HyperlinkDinamica_de_Hyperlink Anchor_bookmark251_bookmark251Dinamica de HyperlinkTabela 7: Configuração da dinâmica

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) Anchor_bookmark252_bookmark252

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

Configurar o URL para abrir om hiperlink

Dinâmica de Security (Segurança)

Tabela 8: Configuração da Dinâmica Security Dinâmica_Fill,_Line_e_Text_ColorDinâmica_Fill,_Line_e_Text_Color Anchor_bookmark253_bookmark253

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.

  • Anchor
    • 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

    Image Removed

    Configuração

    Descrição

    Bar Color

    A cor do gráfico de barras.

    Orientation

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

    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
    Image Added

    Dinâmica Visibility

    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).

    Image RemovedImage Removed Anchor

    Dinâmica

    _

    MoveDrag

    Dinâmica_MoveDragDinâ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

    anchor

    Dinâmica

    _

    Scale

    Dinâmica_Scale Anchor_bookmark257_bookmark257Dinâmica ScaleTabela 13: Configuração da Dinâmica Scale AnchorDinâmica_RotateDinâmica_Rotate

    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:

    Centro

    Image Removed Esquerda

    Image Removed Para cima

    Image Removed Direita

    Image Removed Para baixo

    Image RemovedImage Removed
    Image Added

    Anchor
    Dinâmica_

    bookmark258

    Rotate
    Dinâmica_

    bookmark258Dinâmica

    Rotate

    Tabela 14: Configuração da

    Dinâmica Rotate

    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

    Centro

    Image Removed Esquerda

    Image Removed Para cima

    Image Removed Direita

    Image Removed Para baixo

    AnchorDinâmica_SkewDinâmica_Skew Anchor_bookmark259_bookmark259Dinâmica
    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

    Centro

    Image Removed Esquerda

    Image Removed Para cima

    Image Removed Direita

    Image Removed Para baixo

    Image RemovedImage Removed

    Reference

    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

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

    Nesta página:

    12false