‫Bem vindo de volta.
‫E neste vídeo, vamos dar uma olhada em Zemel e você pode querer examiná-lo.
‫Zemel é um tipo de linguagem XML, como você pode ver aqui na parte inferior.
‫E, na verdade, vou arrastá-lo ainda mais para nos permitir escrever nossa IU, então não precisamos ir em
‫frente e arrastar todos os elementos para nossa GUI e ajustá-los lá.
‫Podemos fazer tudo isso em código.
‫Agora, você pode dizer que sou mais um cara visual.
‫Eu quero ir em frente e arrastar as coisas e estou bem com isso, enquanto você pode fazer isso.
‫Mas você está limitado a apenas arrastar então.
‫E com exemplo, você pode ajustar muito e você pode ajustar não apenas essas coisas como este empacotamento, mas você viu
‫no último vídeo que você pode fazer muito mais e veremos o que é vinculação de dados, quais propriedades ou
‫propriedades de dependência e e assim por diante, que são coisas que você pode fazer com o Zemel, o
‫que nos permite criar interfaces de usuário excelentes e de fácil manutenção.
‫Então e aqui o que você pode ver é esta janela, em primeiro lugar.
‫De modo geral, o que você tem é uma tag de abertura e uma tag de fechamento.
‫Se você conhece HTML, então deve estar familiarizado com isso.
‫Você tem os colchetes de canto e também os fecha.
‫Portanto, menos do que assinar a palavra e, então, maior do que o seno.
‫E você vê que temos a mesma coisa com a janela e aqui também.
‫Em seguida, um fechamento.
‫Você também tem a barra antes da palavra.
‫Portanto, este é o mesmo para a grade, para a janela para qualquer outra coisa.
‫Então, se eu quiser, por exemplo, usar um botão, posso ir em frente e fazer isso.
‫E se eu usar o maior que o sinal, ele cria automaticamente a tag de fechamento.
‫Agora, o que posso fazer é fazer todos os ajustes dentro da tag de abertura.
‫Como você pode ver aqui, Button, posso ir em frente e, por exemplo, adicionar conteúdo a ele.
‫Portanto, existem muitas propriedades diferentes, como você pode ver.
‫Vou usar a propriedade content e algo como Click me.
‫Agora existe este botão no centro, como você pode ver, e ele diz, clique em mim.
‫Claro, não temos altura.
‫Não temos um com todos esses tipos de propriedades que ainda não foram definidas.
‫Mas digamos que eu queira que este botão tenha 50 pixels de altura e depois 100 pixels de largura, como você pode ver.
‫Agora, este é o meu botão que criei.
‫Claro, eu poderia ter arrastado isso, mas fazer um exemplo é bastante útil.
‫E agora?
‫Algo que ainda não mencionei muito e que não será exigido até mais tarde no
‫curso.
‫Mas geralmente o que você pode ver aqui são X e L e S, o que significa, por exemplo, namespace.
‫E Zemel significa Extensible Application Markup Language.
‫Então, deixe-me adicionar isso aqui.
‫Vamos adicionar um comentário.
‫Vou usar um comentário como esse.
‫Como você pode ver, este é Greeno e este é basicamente um comentário.
‫Portanto, posso escrever algo aqui, como Zemel é uma linguagem
‫de marcação de aplicativo extensível.
‫Tudo bem.
‫Agora, o botão, como você pode ver, está aqui.
‫E agora vamos prosseguir e fazer mais algumas coisas com os botões.
‫Então, vamos criar alguns botões adicionais, por favor.
‫Vá em frente e crie outro botão.
‫Ok, espero que você tenha tentado, basta usar o nome do botão aqui ou a palavra-chave e, em seguida, vá em frente e crie o
‫botão adicional.
‫Agora, você pode estar se perguntando, oh -, não está se posicionando corretamente.
‫Então, eu tenho esse botão e ele tem o conteúdo com.
‫Olá.
‫Agora, por que onde está esse botão clique para mim agora?
‫Bem, está dentro da grade e desapareceu porque estamos usando uma grade para que os botões não apareçam um sobre o
‫outro e assim por diante.
‫Então, se você tentou isso, você viu.
‫E veremos as grades também mais tarde.
‫Mas eu só queria mostrar isso por agora.
‫Tudo bem.
‫Então, vamos nos livrar desse botão novamente.
‫Agora temos este botão clique para mim e vamos apenas executar o aplicativo para que
‫possamos ver como ele realmente se parece na vida real e como tudo isso pode tornar nossa vida bonita apenas clicando nele.
‫Então, como você pode ver, eu posso passar o mouse sobre ele e ele muda de cor e eu
‫posso clicar nele e ele faz essa pequena animação de clique e é isso.
‫Mas nada acontece quando você clica nele.
‫E existem várias maneiras de implementar uma funcionalidade de clique.
‫E faremos isso mais tarde.
‫Direito.
‫Então é assim que podemos criar um botão de exemplo.
‫Agora, existem muitos elementos adicionais que podemos acessar aqui ou propriedades.
‫Por exemplo, podemos acessar a propriedade de tamanho da fonte e aumentar o tamanho da fonte para, digamos, 32.
‫Agora o botão não é tão largo quanto o texto, vamos ajustar a largura.
‫Então agora está tudo bem.
‫Novamente, podemos ver todo o texto do botão, mas quando você brinca com o tamanho da fonte e
‫todos esses elementos, deve ter cuidado para que ele ainda se encaixe.
‫Agora, o que você também pode fazer é, em vez de adicionar o conteúdo aqui à propriedade do conteúdo,
‫pode simplesmente adicionar dentro do texto do botão.
‫Então, aqui vou dizer algo como, clique em mim.
‫E como você pode ver, está lá.
‫Portanto, este é o conteúdo entre as tags é onde você tem o seu conteúdo.
‫Então essa é uma maneira de fazer isso.
‫A outra é simplesmente usar a propriedade content aqui e atribuir o texto assim, como vimos
‫antes.
‫Agora, este botão de tag de fechamento não é necessário se você simplesmente fechar o botão imediatamente assim, para que possa
‫fechá-lo de maneira mais curta, assim você não precisa do botão de tag de fechamento.
‫E outra maneira de criar um botão é a seguinte.
‫Então, se você vir algo assim, tudo bem também.
‫Assim, você cria a tag de botão de fechamento e abertura.
‫E aqui você tem o ponto do botão e então você pode ir em frente e ajustar todas as propriedades diferentes que você
‫deseja.
‫Como você pode ver, existem muitas propriedades diferentes que podemos acessar, por exemplo,
‫o tamanho da fonte assim.
‫Portanto, posso definir o tamanho da fonte para 72 assim, por exemplo, e outra propriedade do botão que desejo ajustar porque digamos o conteúdo
‫para que eu possa ir em frente e apenas o conteúdo lá em cima.
‫Agora você vê que existe um botão enorme com o tamanho da fonte 72 e está escrito olá.
‫Então essa é a abordagem número dois.
‫E ainda há outra coisa que você pode fazer.
‫Então, vamos ajustar esse botão ainda mais.
‫Digamos que, como conteúdo, não quero apenas um texto de oi aí.
‫Eu quero ir ainda mais longe.
‫Quero adicionar um painel envolvente.
‫Agora, o que o painel faz é simplesmente agrupar todos os seus controles ou elementos lado a lado, indo da esquerda
‫para a direita.
‫Portanto, o primeiro elemento será, digamos, um bloco de texto.
‫E vimos quais blocos de texto são o texto simples.
‫E este vai dizer multi.
‫Agora, preciso de outro bloco de texto e o terceiro.
‫Então isso diz várias, três vezes.
‫Mas agora o que posso fazer é ajustar a cor de cada aspecto.
‫Então, para cada bloco de texto.
‫Então, digamos que eu mude para azul, então isso terá o primeiro plano.
‫Portanto, o primeiro plano é a cor para a cor do primeiro plano e este será vermelho.
‫E, finalmente, meu último bloco de texto terá o primeiro plano em branco.
‫E agora, em vez de multi, multi, multi, é um botão multi cor.
‫E agora talvez queiramos ajustar um pouco o tamanho da fonte, vamos diminuí-lo também o primeiro botão,
‫como você pode ver, está oculto porque a grade só exibe o último elemento se eles
‫não estiverem atribuídos na grade certa estrutura, que veremos mais tarde.
‫Mas vamos nos livrar do primeiro botão que tínhamos.
‫E agora também vamos definir o tamanho do botão.
‫Então, vamos usar o botão que será, digamos, duzentos.
‫E um terceiro botão de altura, que será de 100.
‫E assim, aí estamos nós e o tamanho da fonte é muito grande para caber tudo.
‫Então, se seguirmos em frente e fizermos isso com 24, agora está lá.
‫Portanto, se eu executar o código, terei um botão multicolor, que contém vários blocos de texto diferentes.
‫E aí estamos nós.
‫Então, só para você ver, existem várias abordagens diferentes para fazer isso.
‫Se você quiser incluir vários aspectos nele, poderá usar este painel.
‫Você pode até usar uma grade dentro do botão e usar a tag da grade para criar
‫vários controles diferentes dentro de seu botão.
‫Mas isso é algo que abordaremos mais tarde.
‫Por enquanto, é apenas importante que você entenda que o exemplo permite que você faça muitas coisas sofisticadas com sua
‫GUI sem ter que arrastar e soltar e também com controle total sobre a aparência das coisas e o que elas
‫fazem.
‫O que vou fazer é comentar isso e mostrar a você como fazer a mesma coisa que vimos aqui
‫com o código, porque vimos isso com o código Zemel.
‫Mas também podemos fazer isso no code behind, o que significa em C Sharp, que aprendemos muito para
‫toda a classe até agora ou para todo o curso.
‫Então, vamos entrar no código por trás.
‫Como você pode ver, há um bom arquivo de exemplo, que é o que abrimos aqui,
‫a demo da janela principal e nosso arquivo de exemplo tem um arquivo code behind, que é um Zemel total.
‫Esse arquivo de caso e este é um arquivo C sharp, o que significa que temos uma classe parcial C
‫sharp aqui, que agora podemos usar para ajustar ou criar nossa IU.
‫E como você pode ver, é chamada de janela principal e herda da janela.
‫E aqui temos um método chamado Janela Principal, que é semelhante ao método principal em nossos aplicativos de console
‫que vimos até agora.
‫Este é chamado assim que a janela é aberta ou assim que o aplicativo é iniciado.
‫E como você pode ver aqui, há um componente inicializado chamado que simplesmente inicializa tudo o
‫mais que é necessário para a nossa janela rodar.
‫Por exemplo, ele inicializa o título e inicializa com o tamanho e assim por diante.
‫E agora podemos prosseguir e escrever nosso próprio código aqui.
‫Vou mostrar como criar um botão primeiro.
‫Em primeiro lugar, precisamos de uma grade na qual possamos atribuir esse botão.
‫Vou chamá-la de grade, que é uma nova grade.
‫Então eu disse o conteúdo disso para a minha grade, mas basta eu dizer a janela principal.
‫Deve ter algum conteúdo.
‫Certo, como vimos no arquivo de exemplo.
‫Portanto, a janela que esta tag aqui abre e tudo o que está entre as tags de abertura e fechamento é meu.
‫Quase todo esse conteúdo aqui.
‫Este é o conteúdo da minha janela.
‫E o que eu digo aqui é que o conteúdo deve ser a grade.
‫Então, criamos uma nova grade, como vimos aqui.
‫Portanto, também temos uma grade aqui, que é como abrir e fechar a tag da grade aqui.
‫E agora eu disse isso como seu conteúdo e agora posso adicionar coisas a esta grade.
‫Por exemplo, posso adicionar um botão à grade.
‫Em primeiro lugar, vamos criar esse botão e vou chamá-lo de BGN, vai ser um novo botão.
‫Agora eu tenho esse botão e posso ajustar suas propriedades, então digamos que eu queira definir o tamanho da fonte do
‫meu botão e posso simplesmente fazer isso dessa forma.
‫Posso simplesmente dizer que será algo como 26.
‫Agora, em nosso botão, como você viu aqui, temos um painel envolvente, que é o conteúdo do botão.
‫Então, o que vou fazer é criar um painel para esse painel e vou chamá-lo de painel que
‫vai ser um novo painel de encapsulamento.
‫Agora podemos adicionar coisas ao painel de envolvimento.
‫Adicionamos o painel envolvente ao botão e o botão ruim à grade.
‫E a grade já faz parte do nosso conteúdo.
‫Portanto, agora vamos prosseguir e criar todas as coisas que queremos adicionar ao painel e adicionar a ele.
‫Portanto, precisamos primeiro o bloco de texto.
‫E o bloco de texto, como você viu aqui, é este aqui.
‫Então, criamos um, dois, três blocos de texto.
‫O primeiro será aos 60, será um novo bloco de texto.
‫E eu simplesmente digo o texto do texto.
‫Portanto, tem um suporte de texto. , este texto aqui, que é o conteúdo.
‫Portanto, para o botão, o conteúdo é chamado de conteúdo e para o bloco de texto, o próprio texto é chamado de
‫texto.
‫Portanto, tivemos acesso à propriedade text do nosso bloco de texto e dissemos isso ao multi.
‫Em seguida, definimos a cor.
‫Portanto, o texto em primeiro plano será o pensamento dos pincéis.
‫E qual cor eu escolhi primeiro para o multi e era azul.
‫Tudo bem.
‫Então vou deixar isso azul.
‫E como você pode ver, brushes, bem, texto é feito com brushes ou a cor do texto é feita com a
‫classe brushes.
‫Portanto, preciso usar essa classe sem escova e acessar sua cor.
‫Pincel de cor sólida de tipo pincéis.
‫E a seguir, posso adicionar isso ao painel de gravação.
‫Agora que tenho o texto conectado ao painel, faço isso acessando seus filhos e adicionando meu texto
‫a ele.
‫É assim que adiciono um bloco de texto.
‫E se não executássemos nada, não veríamos nada ainda, porque ainda não adicionamos o painel rep ao botão
‫e nem o botão à grade.
‫Mas faremos isso em um segundo.
‫Portanto, vamos ajustar o texto ou realmente ajustar essas três peças novamente.
‫Então, o que fazemos é adicionar apenas um texto para várias cores e o último foi o botão.
‫E agora tínhamos a cor vermelha e tínhamos a cor branca.
‫OK, apenas copiei e colei essas três linhas porque são iguais.
‫Não preciso criar um novo bloco de texto sempre que adiciono o antigo.
‫E então eu me ajustei.
‫Ou ajuste seus valores e depois novamente para os painéis vermelhos.
‫Agora, se esses três textos estão no meu painel de envolvimento e o que posso fazer agora, posso adicionar o painel vermelho ao meu botão.
‫Então, botão, esse conteúdo vai ser meu painel vermelho e, finalmente, grade os filhos, esse anúncio.
‫E aqui eu adiciono meu botão.
‫Então é disso que eu estava falando.
‫Portanto, temos a grade, temos o botão, temos o painel de envolvimento.
‫E agora adicionamos esse texto ao painel.
‫Adicionamos o painel vermelho ao botão, adicionamos o botão à grade e adicionamos a grade à janela.
‫E como você pode ver, é assim que você pode fazer isso com o código.
‫E antes de executarmos o código, o que preciso fazer é comentar a grade também.
‫Então, na verdade, só posso ter a janela.
‫Portanto, há apenas a janela em nossa janela principal, por exemplo, arquivo e todo o outro código está
‫dentro de nossa montagem de janela principal, que é o código por trás.
‫Portanto, este arquivo é o código por trás de nossa janela principal que Zemel.
‫Agora, falta uma coisa antes de testarmos isso, e é que atribuo um novo bloco de impostos ao meu
‫texto.
‫Portanto, preciso fazer isso para ambos os meus textos.
‫Então a coisa é que nós, bem, criamos um texto aqui e o inicializamos com um novo bloco de texto.
‫E agora precisamos criar um novo bloco de texto e atribuí-lo ao nosso texto antes de adicioná-lo ao nosso painel
‫rep.
‫Portanto, agora podemos executar o código.
‫E veremos que também temos nosso botão multicolor, e como você pode ver, fizemos a mesma coisa que
‫fizemos antes com o Zemo, que foi este aqui, que também parece muito simples e organizado.
‫Fizemos isso com código C sustenido assim.
‫Agora você pode seguir o caminho que preferir, mas trabalharemos principalmente com o Zemel.
‫Eu só queria mostrar que você pode fazer tudo o que fizer com eles, tudo o que você pode fazer com code-behind
‫também.
‫Mas às vezes faz muito mais sentido usar code-behind.
‫Portanto, por exemplo, se você deseja adicionar apenas algo dinamicamente, o código por trás disso faz mais sentido.
‫Portanto, executá-lo com C sustenido ou fazer os ajustes com C Sharp e Zemel faz mais sentido
‫quando você tem interfaces de usuário estáticas.
‫E por falar nisso, sempre que você cria o arquivo Zemel como nós temos aqui, o que ele faz é ir em frente
‫e criar esse código por trás do arquivo.
‫Portanto, ele simplesmente cria esse código e o executa assim que o aplicativo começa a ser executado, uma vez que nossa janela principal é
‫capturada.
‫Então é feito de qualquer maneira.
‫E fazemos assim com o Zemo ou manualmente, criando o código.
‫Portanto, agora você pode, é claro, argumentar, ei, há algo assim e decidir o que você não disse,
‫bem, posso fazer isso facilmente aqui.
‫Eu poderia simplesmente dizer botão com essa largura e definir como cento e cinquenta e botão com essa altura
‫e definir como cem, por exemplo.
‫Em seguida, o botão será ajustado de acordo.
‫E como você pode ver agora, ele já está espalhado por duas linhas, então esse é o Zemel e o código por trás do
‫código.
‫Eu sei que foi um vídeo longo, mas veremos coisas legais ainda mais chiques no próximo vídeo.
‫Então, vejo você lá.