‫Bem vindo de volta.
‫Neste vídeo, gostaria de falar sobre dados de propriedade e gatilhos de evento porque eles são
‫muito importantes quando você deseja ajustar as coisas no ouro.
‫Portanto, neste caso, ajustarei o texto aqui.
‫Então, quando eu o examino, passo o mouse sobre o texto, que muda de cor e de aparência em geral.
‫Então isso.
‫Olá amigo.
‫Como você pode ver, seus tamanhos estão aumentando.
‫Então é como uma animação aqui.
‫E então temos essa caixa de seleção aqui está alguém ali e este texto diz não.
‫E vou apenas clicar nele.
‫E diz, claro que há alguém lá.
‫Então sou eu.
‫Sim, posso clicar nele.
‫Então, essas são coisas que vamos cobrir neste vídeo, e isso permitirá que você,
‫bem, torne sua interface do usuário em geral muito bem, muito legal porque pode se ajustar rapidamente e pode
‫fornecer uma experiência de usuário aprimorada ou criar uma experiência de usuário aprimorada.
‫Portanto, vamos prosseguir e criar um novo projeto aqui.
‫E vou chamar 14 C, que são dados de propriedade e evitar gatilhos.
‫O que eu tinha lá era uma combinação de grades e painéis de madeira.
‫Vou começar com um painel de agradecimento, um painel de agradecimento como esse.
‫E dentro deste painel de tecnologia, eu tenho uma grade e lá eu tenho um bloco de texto
‫que diz algo como texto, olá, mundo amado.
‫Nosso amado mundo, e então eu tenho um tamanho de fonte, então vou definir para, digamos, 32,
‫quero que seja centralizado.
‫Vou dizer centralizado e também verticalmente deve ser centralizado.
‫Vou dizer que, na próxima linha, o alinhamento vertical também será centralizado e
‫vou fechá-lo assim.
‫Então, aí estamos.
‫Este é o nosso texto, amado mundo, e vou avaliá-lo.
‫Mas o pequeno arquivo.
‫Portanto, aqui no bloco de texto, posso prosseguir e alterar, por exemplo, o estilo.
‫Posso fazer várias coisas e preciso ter um estilo para usar o gatilho de estilo.
‫Vou adicionar um bloco de texto a esse estilo que me permitirá criar um estilo.
‫Por exemplo, preciso adicionar um tipo de destino aqui, que será nosso bloco de texto e, dentro
‫do estilo, posso prosseguir e adicionar um setter e gatilhos de estilo.
‫Portanto, em primeiro lugar, preciso de um centro que será o primeiro plano da propriedade.
‫Então, eu quero definir o primeiro plano.
‫Eu quero mudar o primeiro plano.
‫E eu quero mudar para verde.
‫Portanto, ele definirá o valor como verde.
‫E depois, quero ter gatilhos que possam realmente fazer isso porque, por enquanto, é apenas verde.
‫Mas eu quero que isso seja acionado e faço isso com o estilo que aciona agora na tag de acionadores de
‫estilo.
‫Posso criar meus diferentes gatilhos e terei apenas um, que será o mouseover.
‫Portanto, a propriedade desse gatilho está a quilômetros de distância.
‫Portanto, sempre que passarmos o mouse sobre esse texto, quero que esse gatilho seja executado e
‫vou definir o valor como verdadeiro.
‫Com um T maiúsculo assim, dentro dessa tag de gatilho, posso criar meus Seders e isso será o que deve ser
‫alterado em geral.
‫Digamos que agora tenho esse texto verde e quero que fique vermelho quando passar o mouse sobre ele.
‫Portanto, o centro será definido como primeiro plano da propriedade ou definirá o primeiro plano da propriedade como o valor de vermelho.
‫Portanto, sempre que eu passar o mouse sobre ele agora ou meu mouse estiver sobre ele,
‫este gatilho será executado e todos os seus setters também serão acionados ou executados no próximo sábado, quero
‫acrescentar, será a propriedade center.
‫E aqui estão as declarações de texto que desejo definir com o valor de sublinhado.
‫Tudo bem.
‫Então, vamos fechar o setup e verificar se nosso gatilho funciona.
‫Portanto, este é apenas um texto, certo.
‫E vamos verificar o código um pouco mais a fundo agora ou um pouco mais a fundo.
‫Portanto, temos esta grade.
‫Que está em um painel de estado e aí temos apenas este bloco de texto, e isso é apenas um
‫texto que vemos aqui, este Hello Beloved World, e tem um tamanho de fonte e está centralizado.
‫Então essas são as propriedades gerais do bloco de texto.
‫Mas agora eu me ajusto ao estilo do bloco de texto para poder adicionar alguns componentes de estilo aqui.
‫E eu uso a tag de estilo e digo que o tipo de destino desse estilo deve ser o próprio bloco de texto, porque podem ser
‫componentes dentro do bloco de texto, mas isso seria código por enquanto.
‫Mas, em geral, temos este centro aqui que define o estilo.
‫Então isso é algo que é feito na hora, certo?
‫Não temos que acionar isso.
‫Mas então podemos adicionar gatilhos de estilo que contêm um gatilho, que então define as coisas.
‫E precisamos especificar qual deve ser a propriedade para acionar esse gatilho.
‫Então, tudo acabou quando isso for verdade?
‫Quero que os centros sejam executados e isso diria simplesmente, OK, quero mudar o primeiro plano da propriedade
‫para o valor de vermelho e quero definir as decorações do imposto sobre a propriedade para o valor de sublinhado.
‫Então você pode adicionar múltiplos setters diferentes aqui, se quiser, e isso será disparado sempre que este
‫aqui for executado e que será executado se Ismael's over for true.
‫Portanto, vamos apenas executar o código e ver como funciona em ação para que o tenhamos.
‫Olá, Amado Mundo, e passo o mouse sobre ele.
‫E como você pode ver, a declaração de texto está em jogo.
‫Portanto, o texto está na linha e o valor do primeiro plano é vermelho.
‫Então essa cor vai do verde ao vermelho.
‫Tudo bem.
‫Portanto, é assim que você pode simplesmente seguir em frente e usar gatilhos de estilo ou gatilhos em geral.
‫E outra coisa que você pode ver que quando o valor volta a cair, ele volta ao seu valor original, então
‫sublinhar e ler não é mais verdade.
‫Portanto, eles simplesmente voltam ao seu valor original, que era verde para o primeiro plano e na linha era de ou
‫falso, de modo que a declaração de texto não estava na linha.
‫Agora, vamos criar outro bloco de texto, que ficará em uma grade única.
‫Então, eu quero ter várias grades uma em cima da outra.
‫Eu poderia ter usado um invólucro diferente, mas vou usar apenas grade aqui e ali.
‫Eu tenho um bloco de texto novamente e, desta vez, deve dizer algo como Olá, amigo.
‫Olá amigo.
‫E agora vou definir o tamanho da fonte para 24.
‫O tamanho da fonte será vinte e quatro.
‫Então eu quero que esta seja uma linha central, tanto para o alinhamento horizontal quanto para o vertical.
‫E então este bloco de texto deve ser estilizado.
‫Então, vou estilizar várias coisas aqui.
‫Em primeiro lugar, quero adicionar uma tag de estilo de bloco de texto aqui.
‫Lá, adicionarei um estilo e ele será o tipo de bloco de texto de destino novamente e aqui posso criar
‫gatilhos de evento.
‫Então você viu o gatilho de estilo aqui, que era simplesmente um gatilho.
‫Mas agora quero executar um gatilho de evento, que será um pouco diferente.
‫Portanto, vamos criar um estilo que os gatilhos primeiro iniciem a tag gatilhos.
‫E aqui eu quero ter um gatilho de evento e que será executado quando o evento roteado for verdadeiro e o evento roteado
‫for o enter de Mou.
‫Isso será acionado sempre que entrarmos neste bloco de texto com o nosso mouse.
‫Portanto, é praticamente a mesma coisa que vimos aqui.
‫Esta propriedade foi passada por cima, mas não estamos usando um gatilho.
‫Estamos usando um gatilho de evento e você verá a diferença em um segundo.
‫Agora, nesse gatilho de evento, posso prosseguir e criar um evento.
‫As ações do gatilho são, na verdade, várias ações.
‫Então, eu tenho essa outra tag e aqui agora posso criar todas as diferentes ações que desejo executar
‫quando este gatilho de evento for acionado.
‫Portanto, sempre que estivermos entrando com o mouse, vamos criar uma ação de gatilho de evento e isso será feito
‫assim, iniciar o storyboard.
‫Portanto, precisamos dessa tag novamente para o storyboard.
‫Em seguida, criamos um storyboard e dentro do storyboard podemos fazer animações.
‫Portanto, a animação dupla será uma continuação com uma duração específica.
‫E aqui temos zero como horas, zero minutos, zero segundos e quinhentos milissegundos.
‫Portanto, durante o período de quinhentos milissegundos, quero que isso seja executado.
‫Então esta animação rodar e então eu quero mudar o tamanho da fonte.
‫Mas agora, para alterar o tamanho da fonte, preciso usar a propriedade de destino de ponto do storyboard.
‫Portanto, é muito semelhante a definir uma propriedade que vimos aqui, mas alteramos as declarações de texto e definimos
‫para sublinhar que precisamos usar esta abordagem aqui, em vez da propriedade de destino do storyboard.
‫E aqui posso dizer qual propriedade desejo alterar.
‫Então, eu quero mudar o tamanho da fonte também.
‫E agora posso especificar o valor.
‫Portanto, há uma propriedade two aqui e eu defino o valor como setenta e dois.
‫OK, essa é a animação dupla que rodamos aqui.
‫Portanto, é semelhante ao que vimos aqui.
‫Apenas os valores ou os nomes são diferentes.
‫Portanto, esta era uma propriedade, mas agora é a propriedade de destino do storyboard.
‫Então temos o valor que estava na linha, mas agora são as duas palavras-chave ou as duas propriedades que
‫precisamos alterar.
‫É assim que podemos criar essa pequena animação que será executada.
‫Portanto, agora vamos começar esse código e ver o que está acontecendo.
‫Olá amigo.
‫E nós somos, como você pode ver agora, é grande e não volta mais.
‫Oh vamos lá.
‫Volte ao tamanho normal e.
‫Bem, isso não importa, não importa o que eu quero porque eu não implementei.
‫Portanto, agora é um pequeno desafio para você.
‫Adicione outro.
‫Evento aqui, que fará exatamente isso, então adicione um acionador de evento.
‫Só uma pequena dica, você não precisa fazer tudo isso de novo, você só precisa criar ou
‫reproduzir este código.
‫Portanto, vá em frente e adicione a funcionalidade.
‫Então, quando o mouse sai desse bloco de texto, o texto volta ao seu tamanho original, que era vinte e quatro,
‫e isso deve ser feito ao longo de, digamos, trezentos milissegundos.
‫Então, por favor, tente isso.
‫Tudo bem, eu espero que você tenha.
‫Vou apenas copiar esse acionador de evento, vou colar logo abaixo e, em vez de inserir o mouse,
‫vou inserir algo como a folha do mouse e a duração deve ser de trezentos milissegundos e o tamanho da fonte deve
‫ser definido para o valor de vinte e quatro.
‫E é isso.
‫Portanto, este é o disparador de evento de que preciso para voltar sempre que o mouse sair do livro de texto.
‫Então, vamos testar novamente.
‫Aqui estamos.
‫Olá amigo.
‫E agora deixa eu sair e volta e volta mais rápido do que começa né.
‫Então aquele era o texto ou a entrada do mouse era de quinhentos milissegundos e a saída do mouse era de trezentos
‫milissegundos.
‫Então você pode fazer alguns eventos bem legais aqui.
‫E, como você pode ver, ele até reage instantaneamente.
‫Então ele volta imediatamente e isso é muito legal.
‫OK, então estes são gatilhos de evento.
‫Então você viu gatilhos de estilo que são do tipo gatilho e depois viu gatilhos de estilo que são
‫do tipo, evento, gatilho.
‫Agora há mais uma coisa que eu gostaria de adicionar, uma caixa de seleção com um pequeno texto abaixo que
‫será ajustado.
‫Portanto, este usará vinculação, vinculação de dados.
‫Já vimos vinculação de dados antes e, em vez de estar em uma grade, deveria estar em um painel
‫empilhado porque quero empilhar duas coisas.
‫Quero empilhar a caixa de seleção no topo do bloco de texto.
‫Portanto, no painel da pilha, crio uma caixa de seleção e ela deve ter o nome de c. B.
‫Olá, CME significa caixa de seleção.
‫Então, o conteúdo da caixa de seleção seria algo como alguém o ponto de interrogação.
‫Agora, o painel realmente me permite alinhá-lo horizontalmente e também verticalmente.
‫Centro de alinhamento vertical também.
‫Tudo bem.
‫Portanto, agora esta caixa de seleção deve acionar algo e deve mudar nossos livros didáticos.
‫Então, vamos precisar de um bloco de texto e vou alinhá-lo horizontalmente também.
‫Então, deixe-me centralizar o bloco de texto.
‫Em seguida, definirei o tamanho da fonte do meu bloco de texto para trinta e seis.
‫Portanto, deve ser suficientemente grande agora dentro do bloco de texto.
‫Eu quero ir em frente e mudar seu estilo.
‫Isso é algo que já vimos no topo.
‫Portanto, usamos este estilo de bloco de texto e tipo de destino de estilo e especificamos o tipo de destino.
‫Então, vou fazer a mesma coisa aqui.
‫Estilo de bloco de texto então e aqui eu crio uma tag de estilo e o tipo de destino de estilo.
‫Portanto, o alvo que tenho é meu bloco de texto.
‫Então, eu quero mudar o bloco de texto.
‫E como eu faço isso?
‫Bem, com meus setters.
‫Portanto, vou configurar imediatamente e, desta vez, o acionador será de dados, um acionador orientado por dados, e não será
‫um acionador orientado por evento, como vimos aqui.
‫Então, gatilho de evento e assim por diante.
‫Mas agora é um gatilho orientado por dados.
‫Portanto, a propriedade do meu centro será propriedade.
‫Esse vai ser o texto.
‫E eu quero mudar o valor do texto para algo como, não, e agora terei outro Sather na parte
‫superior e inferior na parte inferior.
‫Portanto, este irá alterar a propriedade chamada foreground.
‫Portanto, ele deve apenas alterar a cor para o valor de vermelho.
‫Agora isso será executado imediatamente.
‫Direito.
‫Então, nós temos o estilo e ainda não tínhamos gatilhos.
‫Portanto, isso será definido.
‫Poderíamos ter feito a mesma coisa.
‫Poderíamos ter definido o texto aqui no nível do bloco de texto.
‫Poderíamos ter usado o valor de vermelho no nível do bloco de texto.
‫Direito.
‫Mas eu só quero mostrar que essa é uma abordagem alternativa e vai ajudá-lo a fazer o seguinte.
‫Portanto, neste caso, vou precisar de um gatilho de dardo estilizado.
‫Portanto, preciso ter essa tag de gatilhos de estilo.
‫E agora e aqui eu crio um gatilho de dados.
‫Como você pode ver, usamos gatilhos normais, que se baseiam em uma propriedade.
‫Em seguida, temos gatilhos orientados a eventos, que são um evento roteado que é executado.
‫Portanto, é praticamente a mesma coisa.
‫Mas, neste caso, você sabe, é um mouse over e um mouse enter.
‫Mas, neste caso, é uma propriedade que o está acionando.
‫E, neste caso, é um evento real e agora serão dados.
‫Portanto, você vê três tipos diferentes de gatilhos.
‫Portanto, este acionador de dados também definirá as coisas.
‫Mas agora, para executar o gatilho, preciso usar vinculação neste caso.
‫Vou vincular o nome do elemento chamado c. B.
‫Olá.
‫Qual é a nossa caixa de seleção e esta é um alô.
‫Deve ter o caminho de está marcado.
‫Vou verificar se esse é o valor verificado e vou.
‫Disse esse valor como verdadeiro.
‫Agora, o que aconteceria se eu.
‫Verifique se o talão de cheques está bem, algum setar deve ser executado, então o centro com a propriedade de texto deve ser executado
‫e seu valor deve ser definido como algo como, é claro.
‫Agora, a próxima letra que eu gostaria de adicionar terá a propriedade foregrounds, então ela
‫mudará para a propriedade foreground, para o valor de green, e é isso.
‫Portanto, este é o nosso gatilho de dados.
‫Vamos prosseguir e executar isso para que tenhamos nossos dois gatilhos que são baseados em excessos de massa ou por meio desse
‫evento aqui.
‫E então, se eu marcar essa caixa de seleção, vamos lá, boom.
‫E diz, é claro.
‫Então você vê que nossa caixa de seleção aciona isso agora e esse não é o evento.
‫Portanto, este não é o evento de verificação.
‫É baseado nos dados por trás dele.
‫Portanto, estamos vinculando ao valor verificado de nosso CB.
‫Olá.
‫Então, de nossa caixa de seleção aqui.
‫Então, como eu disse, é importante.
‫Direito.
‫Então você poderia ter feito a mesma coisa com um evento que é disparado sempre que o verificamos, porque você
‫sabe que a verificação ou está marcada pode iniciar um evento.
‫Portanto, verifique se mudou ou algo parecido.
‫Direito.
‫Então, desta vez, estamos fazendo isso com base em dados.
‫Portanto, sempre que eu pressioná-lo, ele será executado.
‫Tudo bem.
‫Portanto, esses são os três tipos diferentes de gatilhos e diferentes tipos de, bem, executar algumas
‫mudanças muito legais em sua IU.
‫Excelente.
‫Espero que você possa entender tudo isso.
‫Aconselho a experimentar alguns gatilhos de dados adicionais, verifique algo com um texto.
‫Portanto, se alguém inserir um texto específico, algo deve ser alterado ou esse tipo de coisa.
‫Portanto, você pode fazer muitas coisas com o Zemo sem ter que mexer em um código.
‫E isso é muito legal.
‫Certo, ótimo.
‫Então nos vemos no próximo vídeo.