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:
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:
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 AddedNesta 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 | ||||
---|---|---|---|---|
|
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:
|
Info |
---|
Exemplos de Run Expresssions:
Expressão-Tag.quantity1 + Tag.quantity2. Resultado-Tag.totalQuantity.
Expressão-tagCounter + 1. Resultado-tagCounter.
Expressão- If (tagCounter <10, tagCounter + 1,0). Resultado:-tagCounter. |
Para mais informações, consulte "Configurando Expressões".
Image RemovedImage RemovedanchorDinâmica
_de
_Brilho
_(Shine
_Dynamic)
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 =
|
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 =
|
Is Selected | A aparência do objeto quando o mesmo está selecionado: Appearance IsSelected - Define se o objeto está selecionado
|
Scale Reference |
Centro Image Removed Esquerda
Image Removed Para cima
Image Removed Para direita Image Removed Para baixo
Image Added |
Dinâmica Text I/O
Configuração | Descrição |
TextIO . | Dinamica de entrada e saida de texto. |
Binding Mode | Associar um objeto com uma tag:
|
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:
|
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 |
Dinamica de Hyperlink
Configuração | Descrição |
HyperLink | Abre um hyperlink. |
HyperLinkType | Selecione o tipo de hyperlink:
|
Url | Configurar o URL para abrir om hiperlink |
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:
|
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:
|
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 |
|
LineColor | Muda a cor da linha objeto dinamicamente:. |
Expression | O valor usado para a dinâmica LineColor |
Configuração
. |
Change Color |
|
TextColor | Muda a cor do texto objeto dinamicamente:. |
Expression | o valor usado para a dinâmica TextColor. |
Change Color |
|
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
Image Removed para cima
Image Removed centro horizontal
Image Removed para baixo
Image Removed para a direita
Image Removed centro vertical
Bar Color | A cor do gráfico de barras. |
Orientation | A orientação do gráfico de barras: |
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:
|
Tooltip | Um texto que será exibido como uma dica de ferramenta |
Opacity | Opacidade
|
Dinâmica MoveDrag
Configuração | Descrição |
MoveDrag | Movimenta dinamicamente o objeto |
BindingMode |
|
Horizontal Move |
|
Vertical Move |
|
Dinâmica Scale
Setting | Descrição |
Scale | Muda o tamanho do objeto dinamicamente. |
Width Scale |
|
Height Scale |
|
Scale Reference:
CentroImage Removed
Image Removed Esquerda
Image Removed Para cima
Image Removed Direita
| |
Scale Reference: | Image Added |
Anchor | ||||
---|---|---|---|---|
|
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 |
CentroImage Removed
Image Removed Esquerda
Image Removed Para cima
Image Removed Direita
Image Removed Para baixo
Image Added |
Dinâmica Skew
Configuração | Descrição |
Skew | Distorce o objeto dinamicamente. |
X-axis Skew |
|
Y axis skew |
|
Skew Reference |
Centro
Image RemovedImage Removed Esquerda
Image Removed Para cima
Image Removed Direita
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:
|
MaxLength | Define o número máximo de caracteres. |
Format | Define o formato a ser usado para números na visualização |
Scroll ignore | ||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||
Nesta página: |