‫Bem vindo de volta.
‫E neste vídeo, vamos falar sobre a caixa de listagem do painel empilhado, depois o três lógico e o três visual.
‫Então, antes de tudo, vamos em frente e nos livrar dessa grade porque ainda não tocamos na grade.
‫Então, ainda não usamos corretamente, mas faremos isso em um dos próximos vídeos.
‫Então, em vez de uma grade, quero usar um painel stick.
‫Um painel de estado me permite empilhar elementos uns sobre os outros para que eu simplesmente possa seguir
‫em frente e adicionar um bloco de texto aqui, por exemplo, e vou simplesmente escrever o texto como texto simples Hello World.
‫Como você pode ver, este é o meu texto do mundo agora.
‫O que eu também quero fazer é alinhá-lo.
‫Então, alinhamento horizontal, vou usar o centro aqui.
‫Portanto, agora estou centralizando o texto, como podem ver aqui agora no Texas, centralizado talvez em uma pequena margem
‫em todas as direções, que é 20.
‫Como você pode ver, estou usando uma margem e apenas dizendo 20, o que significa ou que criará uma
‫margem em todas as quatro direções de 20 pixels.
‫Agora, a próxima coisa é uma caixa de listagem, e eu quero usar uma caixa de listagem, apenas para você ver como ela se parece.
‫Portanto, esta caixa de listagem aqui está vazia, mas podemos mudar isso facilmente criando um item da caixa de listagem
‫nela.
‫Portanto, vamos prosseguir e criar um item ListBox.
‫E esse item deve ter o conteúdo de, digamos, o conteúdo é igual ao item um.
‫E agora, em vez de ter uma tag de abertura e de fechamento, quero apenas uma versão mais curta.
‫Então, usei esse último ano e um estúdio visual inteligente o suficiente para me livrar da marca de fechamento automaticamente.
‫Portanto, agora esta caixa de listagem tem este item um e vou apenas copiá-lo e colá-lo várias vezes.
‫Portanto, terei os itens um, dois e três.
‫E agora esta caixa de listagem ocupa toda a largura.
‫Como você pode ver, leva todo o pai e é apenas tão alto ou tão alto quanto necessário.
‫Portanto, isso significa que é necessário apenas o espaço necessário para que os elementos dentro dele estejam em sua altura.
‫Então é basicamente, digamos, este item um e os itens dois e três, cada um tem um empate de 30 pixels.
‫Portanto, toda essa caixa teria apenas 90 pixels de altura.
‫Mas podemos mudar isso, digamos, ajustando a altura.
‫E vou usar uma altura de 100.
‫Como você pode ver, é mais alto do que o objeto estava antes.
‫E agora vamos criar uma largura também.
‫Também cem pixels.
‫Agora você pode ver que esta caixa é muito menor e se encaixa perfeitamente.
‫Tudo bem.
‫Agora, se eu quiser ter uma margem em todas as direções, também posso dar esse elemento na margem.
‫Mas, como você pode ver, como isso tem um bloco de texto mundial, tem uma margem de vinte em todas as direções.
‫Também há uma distância entre esses dois elementos aqui entre a ListBox e o bloco de texto.
‫Agora, se executarmos esse código, veremos que temos essa janelinha principal, que é linda e tem
‫nossa caixa de listagem com seus elementos.
‫Então como você pode ver aqui no mundo, o bloco de texto e depois aqueles elementos da lista, você pode clicar
‫neles, pode até selecioná-los, como você pode ver.
‫Mas nada mais acontece porque ainda não conferimos o evento, o que faremos no próximo vídeo.
‫OK, vou fechar novamente.
‫E agora vamos falar rapidamente sobre o tratamento lógico e visual.
‫Então, o que temos aqui é uma árvore lógica ou podemos ver a árvore lógica em Zemel.
‫Portanto, a árvore lógica é uma janela dentro dessa janela.
‫Temos um painel empilhado dentro desse painel empilhado.
‫Temos um bloco de texto e uma caixa de listagem.
‫E dentro da ListBox, temos na verdade a ListBox, item um, ListBox, item dois e três.
‫Então essa é a árvore lógica.
‫Você praticamente tem vários ramos.
‫É cada vez mais profundo.
‫Portanto, a janela tem uma ramificação do painel empilhado que possui duas ramificações, e uma delas é ListBox, que também
‫possui ramificações e assim por diante.
‫Então, como eu disse novamente, esta é a árvore lógica.
‫Agora vamos dar uma olhada na árvore visual, porque se eu, por exemplo, adicionar um botão aqui, vou precisar
‫dele para algo em um segundo.
‫Então, crio um novo botão.
‫Dou-lhe o conteúdo de Callignee.
‫E também vou adicionar um método aqui que será chamado sempre que alguém clicar.
‫Então, estou usando o clique aqui e estou criando um novo manipulador de eventos.
‫E o que isso faz por mim, ele cria um novo método chamado clique de botão.
‫Se você olhar, você sabe, podemos ver que existe um método chamado Botão Click, que tem um
‫objeto remetente e argumentos de evento roteados chamados EHP.
‫Então o que isso basicamente faz é que este método será chamado sempre que clicarmos no botão e tudo o que
‫tivermos dentro do corpo do método será executado.
‫Então, digamos que usamos uma caixa de mensagem, algo que ainda não usamos, e chamamos seu método de show.
‫Podemos simplesmente mostrar uma caixa ou uma caixa aparecerá como um pequeno pop-up e nos mostrará algum texto.
‫Então, algo como obrigado por clicar em mim.
‫E o texto dizia, clique em mim e bem, o texto que aparecerá assim, obrigado por clicar na caixa de mensagem
‫mostrará algo lindo como obrigado por clicar em mim.
‫Como você pode ver, este botão clique-me está logo abaixo de nossa caixa de listagem.
‫Portanto, não, vá em frente e adicione um pouco de distância entre eles.
‫Tudo bem, espero que você tente fazer isso e podemos fornecer nossa margem de botânica e eu vou usar 20 novamente,
‫ou poderíamos ter dado uma margem ao nosso ListBox, mas dar ao botão a margem
‫deve servir.
‫Agora, se você executar o código, obteremos este lindo botão clique aqui.
‫Portanto, temos o mundo inteiro com o texto e assim por diante ou a caixa de listagem.
‫E agora, se clicarmos em Click Me, esta caixa de mensagem aparecerá e dirá algo como, obrigado por clicar em
‫mim e podemos clicar em OK para fechar essa caixa de mensagem novamente.
‫Então, vamos abri-lo.
‫Como você pode ver.
‫Clique em mim.
‫Obrigado por me clicar.
‫Essa é uma caixa de mensagem e podemos usá-la de uma forma, digamos, semelhante à que usamos a linha
‫vermelha do console e nossos aplicativos de console para fins de teste.
‫Então é muito legal.
‫Se quisermos abrir algo depois de um evento, simplesmente abrimos uma caixa de mensagem para sabermos, OK.
‫Funcionou muito bem.
‫Então esse é o botão e nosso três lógico.
‫Agora vamos dar uma olhada na árvore visual.
‫Portanto, para obter a árvore visual, existem várias maneiras.
‫Mas o que vou usar é que vou adicionar um ponto aqui, um ponto de depuração, para que ele execute a
‫depuração sempre que essa linha de código for executada.
‫Deixe-me iniciar o código ou iniciar nosso programa.
‫Agora clico no botão e nosso programa para e entramos no modo de depuração.
‫E aqui posso ir para o WP Free Visualizer.
‫Então, o que vou fazer é clicar nele e abrir o visualizador, que tem o tratamento
‫visual, que também tem essas propriedades no canto superior direito ou no lado direito.
‫Como você pode ver, existem tantas propriedades para nosso botão, por exemplo, ou para nossa caixa de listagem,
‫também muitas propriedades.
‫E ainda me diz todos os valores dessas propriedades.
‫E nós nem mesmo definimos nenhum desses.
‫Bem, exceto pela margem, talvez.
‫Mas, além disso, não há nada que tenhamos configurado.
‫E como você pode ver, o fundo é amplo.
‫Isso é sempre bom.
‫Então, poderíamos mudar isso no código também.
‫E por falar nisso, o que é importante aqui agora é a nossa árvore visual.
‫E você vê alguns aspectos da nossa árvore lógica aqui, assim como, por exemplo, você pode ver a janela principal,
‫então você vê o painel empilhado e lá você vê a caixa de texto sem plotagem e o botão.
‫Mas há muito mais, como você pode ver, a janela principal tem uma borda, que não vemos na
‫árvore lógica, mas fazemos a árvore individual.
‫Então tem um decorador doador, um centro de conteúdo, que realmente mostra o conteúdo então, que é o
‫painel empilhado.
‫E o painel empilhado, novamente, tem um blog de texto, uma caixa de listagem, que tem uma borda.
‫Então, esta caixa tem uma visualização de rolagem.
‫Portanto, se houver muitos elementos para mostrar na altura que ele fez, ele terá um recurso
‫de rolagem, então é uma grade que contém um retângulo e um apresentador de conteúdo de rolagem, que tem um item
‫para o apresentador visualizando o painel de pilha.
‫E aí encontramos nosso item ListBox um, que novamente tem uma borda que tem um apresentador de conteúdo.
‫E, finalmente, podemos encontrar o bloco de texto.
‫Então você vê, é uma árvore muito, muito longa aqui, muitos galhos.
‫Mas no final, o que você pode encontrar são todos os diferentes elementos que estão visualmente em seu programa.
‫E isso pode ser muito útil se você quiser saber mais sobre o que geralmente é representado ou usado em
‫seu programa e o que você adicionou a ele, mas geralmente é assim que você pode descobrir tudo
‫sobre o tratamento visual.
‫Como você pode ver, temos uma grade dentro de nossa caixa de listagem, que não configuramos nós mesmos, mas ela simplesmente está
‫lá.
‫Direito.
‫E se você clicar na grade, você também pode encontrar as propriedades dessa grade no lado direito.
‫Entendido.
‫Então isso foi basicamente tudo para a árvore visual.
‫A árvore lógica.
‫Temos painel USEC e ListBox.
‫Usaremos muito mais esse painel no futuro.
‫Então se acostume com isso.
‫E sim.
‫E no próximo vídeo, vamos conferir os eventos.
‫Então, vejo você lá.