Introdução a . Desenvolvimento NET MAUI

1. Apresentação: Bem-vindo a uma introdução ao desenvolvimento dotnet Maui. Sou seu instrutor da Williams e sou engenheiro de software e palestrante. Agora, durante a duração deste curso, você estará aprendendo desenvolvimento móvel através dos olhos do dotnet Maui.net. Maui é uma estrutura de plataforma cruzada dada a nós pontilhando-a, e nos permite ter uma base de código para muitos sistemas operacionais móveis. Então, durante este curso, você entenderá como o dotnet Maui funciona. Vamos entender a sintaxe XAML. Dê uma olhada no desenvolvimento orientado a eventos e veja outras coisas, como navegação e compreensão de recursos e layouts globais. Para este curso, vamos precisar do Visual Studio 2022, que vem com genética e emuladores Android são incorporados. Mais uma vez, bem-vindo a este curso e mal posso esperar para começar. 2. Ambiente de desenvolvimento de configuração: Ei pessoal, bem-vindos de volta. Neste episódio, vamos configurar nosso ambiente para que possamos programar com Maui. Maui no momento desta gravação está em pré-visualização, o que significa que precisamos do Visual Studio 2020 para visualizar a versão. Talvez você já tenha o Visual Studio 2022 instalado. Você vai precisar da pré-visualização. Se não, então não há problema. Vamos passar pelas etapas básicas são os passos mais necessários juntos. Então, vamos começar entrando no Visual Studio.Microsoft.com. E então, quando você estiver nessa página, você precisa ir para a pré-visualização mais recente e, em seguida, baixar a visualização. Isso baixará esse instalador para o seu computador. E quando esse lançamento for, você vai querer ter certeza que está recebendo as visualizações. Então, se você for para a seção disponível, verá 201720222019. Então você quer ter certeza de que está recebendo o que está marcado como pré-visualização, certo? Assim, podemos seguir em frente e obter as adições da Prévia da Comunidade. Eu não o tenho listado aqui. Isso porque eu já o tenho instalado. Assim, você pode ir em frente e iniciar o instalador. E o que acontecerá é que ele abrirá essa janela onde ela pergunta quais cargas de trabalho você deseja. Então você pode ver as cargas de trabalho que eu tenho. Mas os que são essenciais para este curso são ASP.net e desenvolvimento web porque você estará criando uma API. Então, precisamos da carga de trabalho da Web e você definitivamente precisa da carga de trabalho de Maui. Agora, vou estar jogando. Dado que isso é pré-visualização, tenho certeza de que essas são dobras que serão trabalhadas à medida que a equipe de desenvolvimento fica cada vez melhor ao liberar essas cargas de trabalho e esses pacotes de desenvolvimento. Mas, como está, tive que selecionar o desenvolvimento de UI multiplataforma dotnet, que é Maui, certo? Eu tive que obter o desenvolvimento da área de trabalho e também tive que obter o UWP. Tudo bem? Agora, depois de selecionar, todos eles ainda continuam com componentes individuais. E procurei pelo Android e me certifiquei de que tinha todas essas coisas marcadas. Tudo bem, então alguns deles teriam ficado marcados em virtude de você escolher as cargas de trabalho e algumas talvez não tenham sido. Então, eu me certifiquei de ter o emulador do Google Android marcado e as ferramentas de desenvolvimento do Android C Plus Plus para fazer tudo isso. Tudo bem, espero que, no momento em que você estiver fazendo este curso, talvez você não precise passar por tudo isso, ou talvez a carga de trabalho selecione tudo o que deve selecionar. Mas estou apenas mostrando essas coisas para que você possa ter o caminho de menor resistência ao passar por esse exercício. Agora, uma vez que você tenha todas essas coisas selecionadas, as instalações de carga de trabalho, pois provavelmente estaremos mais perto de cerca de 40 gigabytes. Assim, você pode ir em frente e instalar, espero que você tenha espaço suficiente. Estou confiante de que você faz, mas uma vez que você for em frente e instalar e eles terminarem, então você pode continuar este vídeo. Agora, uma vez instalado, você pode prosseguir e iniciar o Visual Studio 2022. Agora, o que vamos fazer é criar um novo projeto. E quando isso aparecer, vamos querer um dotnet Mawi para cima. Agora, se você não tem isso para a esquerda como eu, isso é porque eu criei recentemente um. Você sempre pode pesquisar e ele filtrará essa lista para você. Vá em frente e selecione dotnet Maui para cima, e então você vai dar um nome a ele. Então vou chamar isso de meu primeiro Mawi. Tudo bem? Então você pode ir em frente e nomear que este não será o projeto com o qual vamos desenvolver. Este é apenas um projeto para que possamos configurar nosso ambiente e nos acostumar com o que parece. Tudo bem, quando o Visual Studio for iniciado, então temos o arquivo XAML de ponto da página principal carregado para nós. Agora, há poucas coisas que eu quero que tomemos nota aqui. Mais uma vez, isso ainda está em pré-visualização, então eles vão ser algumas dobras pelas quais eu vou orientá-lo. E espero que você tenha a mesma experiência que estou tendo e você não terá nenhum desgaste completando essas tarefas. Então, a primeira coisa que eu quero que estejamos presentes é o fato de que este é um arquivo XAML, que é realmente um dialeto de XML. Então você pode ver aqui no topo está doendo. Você sabe, que é realmente um arquivo XML. E esta é a página principal. Então esta é a página de amostra que obtemos com essa amostra, com esse modelo de projeto praticamente. E se você acabou de lê-lo, você pode ver que ele se parece um pouco com HTML porque, mais uma vez, ambos são baseados em XML. E você verá que cada tag faz sentido. É realmente apenas inglês padrão. Então, aqui vemos que temos uma tag que diz imagem e temos alguns atributos para essa tag de imagem, temos uma tag de rótulo que tem alguns atributos e outro rótulo e botão Para cima. Certo? Agora, para cada página XAML, que realmente seria como uma página literal em seu aplicativo que você criará. Você vai ter um código atrás do arquivo. Portanto, temos a página principal não verão, e então temos a página principal não XAML dot CSS. Então, nesse arquivo CSV um, ele está sendo inicializado. Então, se você já trabalhou com WPF ou Windows Forms, esse tipo de código pareceria familiar para você, certo? Portanto, temos ou página principal de classe parcial e ela está herdando de outra classe chamada página de conteúdo. E tem uma variável global ou global para a classe pelo menos temos nosso construtor que está inicializando todos os componentes. E este é apenas um método que é executado em um dinheirinho inicializando todos os controles que serão usados em toda a aplicação ou garganta esse controle específico, certo? Então temos um método aqui que está vendo no contador clicado. Agora isso é o que chamamos de evento. Assim, no contrato clicado há um evento ou um método que será chamado sempre que o botão for clicado. Então, temos o controle de botão aqui. Deixe-me ampliar um pouco para garantir que possamos ver. Então, temos nosso controle de botão, damos um nome a ele. Então esse é um dos atributos, certo? Portanto, esse atributo name nos permite referenciá-lo a partir do código por trás. Então, se quiséssemos mudar algo sobre o botão ou o rótulo ou qualquer coisa que definimos aqui, nos certificamos de dar um nome a ele. Então temos os textos que o botão tem e, em seguida, temos propriedades semânticas, pontos, dica. E então ele nos diz que cones okayed o número de vezes que você clica e, em seguida, clicou, esse será o nosso evento de clique. E então diz que quando for clicado, chame esse método. Então, quando clicado na chamada intercalar, o que é isolado? Bem, esse é o método que temos aqui. Esse método recebe informações sobre quem chama o evento e que tipo de eventos o acionaram. Então, aqui seria capaz de saber que o botão chamou o evento, e ele foi acionado por um evento de clique. E então ele faz uma operação em que incrementa os cones previamente definidos. E então ele define o texto com base em se os cones são equivalentes a um ou maior que um, então ele envia uma mensagem para o leitor de tela semântico, já que desconhece o texto do botão Conteúdo. Então, em outras palavras, nós encadeamos. Então aqui se chama BTN. Eu disse o que e o que está contribuindo? O que está contribuindo? Esse é o nome que damos a isso um botão. Então aqui estamos vendo quando clicamos no botão, altere seu texto para ser o que eu quiser que seja. E então, incógnita na nossa tela que o texto do botão mudou, certo? Então esse leitor de tela semântico será nossa pequena ponte entre nosso código por trás e o que vemos visivelmente no aplicativo, certo? Então é para isso que serve. Nenhum outro arquivo inclui o program.cs. Então este é o bootstrapper. Com a maioria, se não todos os programas C-sharp, eles terão um program.cs, seja WinForms, WPF ou ASP.Net, ele terá um pouco distante program.cs com um método principal que será executado inicialmente. Então isso representaria esse arquivo em um MAOI up. E então vai ser, tem que criá-los todos. Ele inicia um construtor e, em seguida, diz que use up, e veremos o que há. atualização XAML está bem aqui. Então, está dizendo usar isso, configure fontes e, em seguida, crie. Tudo bem, então o que se passa? O que faz Abdul? Diz saltar para cima. Csm é um desses arquivos base, então você não deseja excluir esses arquivos. Esses arquivos são muito essenciais. Essencialmente, estamos apenas declarando alguns namespaces. Ele sabe qual é a classe, então não está acordado. É por isso que somos capazes de chamá-lo mais uma vez no acorde. Tudo bem? E, em seguida, define alguns recursos de aplicativos, alguns estilos e cores, etc. E é para isso que serve o arquivo XAML do aplicativo. Também temos o shell do aplicativo. O shell do aplicativo mais uma vez define alguns namespaces e, em seguida, esse é o conteúdo. A página inicial deveria ser a página principal. Estamos enviando isso para significar pitch assim que os envios. Então, se você quisesse criar uma página inicial diferente, você teria que ter certeza de dizer que ela não é mais a página principal. Não é uma página que criei controle autossômico que criei. Tudo bem, embora as pastas tenhamos recursos, então o que acontece? Deixe-me ir às plataformas primeiro. Então, o que acontece com Xamarin? Porque Mawi é basicamente um substituto para Xamarin. Xamarin foi pioneira no desenvolvimento de plataformas cruzadas, onde lhe dá a capacidade de ter um projeto com uma base de código. Poderia ser como sendo apenas C-sharp para atender, hum, múltiplas interfaces móveis e sistemas móveis. Agora o que acontece é o Maui, em vez de exigir que você crie um projeto diferente por curso com o Xamarin, eu teria que ter um projeto para o Android fora depois de um projeto para iOS, etc. etcetera. Em vez de fazer projeto, projeto, projeto, ele nos dá um projeto. E para quaisquer recursos exclusivos que precisamos para esse sistema operacional móvel específico, temos uma pasta. Então, em vez de vários projetos, temos um projeto com várias pastas que são capazes de armazenar as instruções e recursos específicos sobre o que for necessário para isso óleo particular. Então, vemos aqui que temos a pasta Android com canhotos da pasta iOS na qual eu acho Samsung terá Mac catalyst e temos windows, certo? Então, um baseado em código para governar todos eles, praticamente. Isso é o que vemos na pasta plataformas e, em seguida, em recursos, agora podemos ter todos os recursos de que precisamos. Porque o que aconteceria é que com o Xamarin, você pode acabar colocando um ícone na pasta ou projeto do Android e esquecendo de colocá-lo dentro do iOS. Aqui temos uma pasta. Bem, podemos colocar tudo o que precisamos para que todos os nossos aplicativos possam parecer uniformizados a partir deste chamado BCE. Agora você verá aqui que eu tenho esse pequeno ícone de aviso para dependências e você verá que eu tenho algumas dependências faltando e algumas coisas. Se eu fizer um aluguel de construção, não, vou ter um monte de erros. Agora, eu vasculhei a Internet. Então, mais uma vez, isso é pré-visualização, então tenho certeza que , uma vez lançado totalmente, eu teria que regravar esta lição e não ter que colocar o que estou prestes a compartilhar. Mas, por não, enquanto você está fazendo isso em pré-visualização, o que você quer fazer é ir para o arquivo da solução, abri-lo no terminal. Então você deseja digitar isso em.net. Coloquei um espaço lá para que seja mais espaço. Então dotnet, nova versão global, Jason, e depois dash, dash, SDK dash. E então você vai colocar a visualização do traço 6.300. Então, como eu disse, certifique-se colocar esses números exatos, certo? Então, como eu disse, isso ainda é anterior, então isso é apenas um trabalhador para garantir que todos os SDKs saibam em qual versão eles devem estar. Porque uma vez que você estiver usando a visualização do Visual Studio neste momento como no momento desta gravação, é padrão dotnet sete, que ainda não está ajustado e qualificado para Aplicativos Maui, certo? Então, certifique-se de colocar isso como você me vê com ele aqui, e então você pode pressionar enter. E o que isso fará é criar um arquivo JSON de ponto global na raiz ou no nível da solução, certo? Então, uma vez que fizermos isso, podemos fazer um Control Shift e B e permitir que ele se reconstrua. E assim que terminar de construir, você notará que esse sinal de aviso não está mais lá. E todas as nossas dependências não são Não há mais avisá-lo. Então isso é um bom sinal. Tudo bem, então vamos pular para ver como esse aplicativo se parece quando ele está sendo executado. Então, no topo, no nosso botão de jogo, vou bater a cenoura e depois vou escolher isso. Eu quero usar o, tudo bem, então vou fazer uma pausa, só sei porque eu não vi o que esperava ver. Então, mais uma vez, estou guiando você por cada passo que preciso que você esteja ciente. Se você vir apenas a máquina Windows quando soltá-la nesta cenoura e não estiver vendo tantas opções quanto estou vendo. Reinicie seu Visual Studio. estúdio de reserva tão perto relançou o projeto. Quando você fizer isso, é provável que você veja o que estou vendo, certo? Também acessamos o emulador do Android. Então, o que acontece é que eu tinha algumas instâncias já tinha algumas instâncias do dispositivo emulador em execução. Então, quando você acessa Ferramentas, você vai para o Android e em seguida, pode acessar o Gerenciador de dispositivos. E depois que for lançado, mostraremos todos os emuladores que você provavelmente tem em execução. Eu tinha três anos de corrida, certo? Eu paro este e removo os outros dois que foram lançados de meus experimentos anteriores com a MAOI. Então, entre todas essas ações, você deve ser capaz de chegar a esse ponto que você está vendo todas essas opções, certo? Então, vou até o emulador do Android e vou selecionar o emulador do Android. E então eu fui apertar o botão de reprodução porque quero ver o que isso parece no Android. Tudo bem, então aqui está nosso aplicativo móvel. E se você olhar para ele e olhar para ele com o código, você poderá mapear de volta cada elemento, certo? Então aqui está nossa imagem, o dotnet, ponto PNG. Lá vamos nós. Temos o rótulo, Hello World. Temos o que diz Welcome. E então temos nosso botão que diz clique em mim. Então, quando clico em mim, defino um ponto de interrupção no evento click e você vê ele está atingindo esse evento de clique. Então Collins é igual a 0. No primeiro sombrio, vamos ver o clique é uma vez. E então ele vai declarar ou incógnita ao leitor de tela semântico para atualizar. Então, vou bater em F5, então continua. E você pode ver aqui que diz clicado uma vez. Mas então, se eu clicar nele novamente, vai ver ou ouvir clicado duas vezes, F5. E lá vamos nós, clicamos duas vezes. Então é praticamente assim que um Mawi up funciona fora da caixa. É assim que funciona. Sim, a configuração pode ser uma dor, mas espero que você passe por esse exercício. Caso contrário, sinta-se à vontade para usar essa seção de perguntas e respostas e me avise. 3. Crie controles com C#: Tudo bem pessoal, então vamos continuar nossa descoberta de Maui. Saiba que o temos em funcionamento e estamos familiarizados com as diferentes partes móveis. Então, vamos tentar criar uma nova página. Portanto, vou clicar com o botão direito do mouse no projeto ou adicionar um novo item. E então eu vou querer da seção dotnet Maui na nova página de conteúdo, certo? E então vamos chamar esta página de teste, agradável e simples. Então, o que isso nos dá é uma nova classe C-Sharp que nos permite definir o que queremos na página. Então esta não é uma página XAML, certo? Portanto, existem duas maneiras de criar conteúdo em uma página ou páginas creed. Um deles é com o arquivo XAML com código C-Sharp de suporte. E podemos realmente ter o C-sharp gera as partes que estamos colocando na batida. Por exemplo, vou pegar esta página de teste e vou fazer dela a inicialização. Então, pulando para atualizar o XAML, vou dizer que quero, desculpe, não resumir. Shell dot XAML. Vou dizer que queria encaminhar para a página de teste. Então, a página Testes em vez de talvez. Então, vamos dar uma olhada no que temos com isso. E é isso que recebemos. Obtemos um rótulo simples com o texto. Bem-vindo ao dotnet Maui. E isso é exatamente o que temos no aplicativo, certo? Então você pode ver que nossa classe C-Sharp está funcionando. Então, vamos construir isso um pouco mais. Então, o que temos essencialmente seria um, o objeto de conteúdo aqui que representa o conteúdo da visualização, certo? E então estamos dizendo que queremos um novo layout de pilha com crianças. Portanto, este é um layout e existem diferentes tipos de layouts que você pode fazer. Então, se você simplesmente digitar o layout da palavra, bem, eles estão meio confusos aqui, mas você tem Layout Absolute. Você tem tipo de carrossel, layout de compressores, layouts flexíveis. Existem várias opções de layout. Portanto, essa opção padrão que obtivemos era um layout de pilha. E então poderíamos adicionar as crianças e poderíamos ter um novo rótulo. E então vamos fazer um exercício em que vamos colocar em alguns outros elementos. Então, vamos começar apagando tudo dentro desta classe ou desse construtor outro. Então você pode ver aqui que tudo começa com o construtor. Sim, é uma classe o que o construtor é, onde a seção ou a inicialização ocorrerá, certo? Então, o que vamos fazer é construir carregar algo semelhante ao que temos na página principal, mas só vamos usar. Legal. Então, vamos começar inicializando nosso contador para 0. E então eu vou ter um rótulo estático que eu quero chamá-lo, digamos rótulo de contador. É sempre uma boa prática, mesmo com formas de madeira são quando estamos fazendo programação visual. Ele sempre dá nomes aos nossos controles e tem prefixo ou postfix que indica que tipo de controle é. Meu general seria que eu diria como LBL e depois o nome. Certo? Portanto, a LBL é a abreviação de um rótulo. Isso é meu. Assim, você pode desenvolver sua própria técnica, se quiser. Mas geralmente é uma boa prática porque, mais tarde, quando a base de código cresce, é mais fácil identificar quando você quer rotular versus uma caixa de texto versus alguém, etc. Tudo bem, então, oh, bem antes de tudo, estes devem estar fora do construtor. Desculpas. Então cones e rótulo fora do construtor. E então, dentro do construtor, podemos definir um novo tipo de visualização. Então, vou dizer vista de rolagem. Então, vou apenas novo ou arrependido, vou apenas dizer que a visualização de rolagem var é igual a uma nova visualização de rolagem. Tudo bem? E então vou salvar meu layout de pilha é igual a um novo layout de pilha. Lá vamos nós. Em seguida, posso ver a visualização de rolagem. Então, vista de rolagem, quero que seu conteúdo seja o layout da pilha. Então, ali estou vendo uma visualização de rolagem maior dentro desta página. E então, dentro da terra, cria uma visualização de rolagem, cria um layout de pilha e, em seguida, coloque esse layout empilhado dentro da visualização de rolagem. Portanto, mesmo que a visualização de rolagem possa ser autoexplicativa, ainda vou explicar isso. É o controle que permite rolar para cima e para baixo no aplicativo móvel, certo? Portanto, o conteúdo é demais, acabamos de colocá-lo em uma visualização de rolagem. E isso lida com a rolagem para o estouro do conteúdo. Dentro do rótulo. Para o contador, vou dizer que é igual a um novo rótulo, que vou inicializar com alguns valores. Então aqui eu posso definir essas dimensões são esses atributos. Então, o que quer que você tenha colocado em decimal e nós vamos fazer um exercício onde passamos pelo XAML, certo. Vou dizer Conte, e fui colocar zeros. Então começamos com cones sendo 0. Tudo bem? Podemos definir o tamanho da fonte e quaisquer outros atributos que quisermos, a família, etc. Então eu queria definir isso como 22. O que mais queremos provavelmente querer os atributos da fonte. Vamos ver o que temos aqui. Atributos de fonte que, então isso é um enum e podemos colocá-lo em negrito, podemos colocá-lo em itálico, podemos colocá-lo em várias coisas. Bem, é muito ousado e itálico neste momento. E então temos as opções horizontais. Queremos centralizado, queremos para a esquerda ou para a direita, etc. Então fui ver opções de layout, lugar que toma o centro. Então, agora que eu construí esse controle aqui você tem o Visual Studio me guiando ali sugerindo que você adicionou ao layout da pilha. Tudo bem, então eu posso apenas pressionar Tab, deixá-lo fazer isso, são construídos do meu controle e estou vendo layout de pilha para seus filhos. Adicione esse controle. Tudo bem, vamos criar nosso botão. Então posso dizer var btn, dois pontos, dois pontos Tr é igual a um novo botão. E este novo botão, quero que ele tenha o texto que diz Clique para contar. E então também temos, digamos, a opção horizontal que o torna centralizado de todos os tipos. Então, eu só uso isso mais uma vez. Depois de termos esse botão, também podemos adicioná-lo. Então, o layout. Tudo bem, então vou copiar, colar e mudar o que sei que preciso mudar. Obviamente, as crianças seriam genéricas e todos esses controles são de um tipo padrão que pode ser adicionado quando crianças. Agora, depois de tudo isso, podemos dizer que esse conteúdo de ponto é igual ao que estiver em maio, desculpe, o que estiver na visualização de rolagem. Tudo bem. Portanto, esse conteúdo de ponto é igual à visualização de rolagem. Então, vamos rever isso muito rapidamente. Criamos uma visualização de rolagem, criamos um layout de pilha. Adicionamos o layout da pilha à visualização de rolagem. Em seguida, preenchemos o layout da pilha com controles diferentes. E então, no final de tudo, estamos vendo que o conteúdo e isso aqui representam a página de teste, certo? Então isso é apenas se você estiver familiarizado com o C-Sharp, você entenderia o que é isso. Tudo bem. Portanto, isso representa nossa página de teste. Estou vendo esta página, seu conteúdo é igual ao que estiver na visualização de rolagem. Agora, vamos dar uma olhada no que obtemos isso e eu vou correr sem depuração. Tudo bem, então estamos aqui em cima e temos nosso rótulo com um diz 22, diz cone 0. E temos nosso botão que diz clique nos cones. Agora, quando clicamos, nada está acontecendo. Por que nada está acontecendo? Bem, nós não dissemos ao botão que ele deveria estar fazendo qualquer coisa quando é clicado. Então, o que precisamos adicionar? Não, precisamos adicionar o que chamamos de nosso. Se você disse evento de clique, então você está absolutamente correto. Então, o que vou fazer aqui é dizer contador BTN, pontos, clicar ou clicar. E então direi mais igual ao clicou, certo? Ou evento onClick. Agora, o que isso está fazendo é dizer, vincule o evento click a esse método que, naturalmente, teremos definir logo abaixo do nosso construtor, que estava inicializando e criando todos os nossos controles. Sabemos que temos nosso método de vazio privado, e eu chamo isso em evento de clique. E, em seguida, nossos eventos normalmente levam o remetente do objeto, bem como uma guia chamada args de eventos. E vamos chamá-lo de E na maioria das vezes. E então temos nossos métodos. Dentro do nosso método, quero ver cones. Eu quero que você incremente a contagem mais, mais. E então eu diria LBL, contrariá-lo. Seu texto é igual a. E então eu posso ser criativo com essa mensagem. Então clique ou clique em cones. E então eu posso simplesmente colocar na minha conta. E então, como vimos no anterior, temos que dizer que o leitor de tela semântico ponto incógnitas que o texto do ponto do contador LBL mudou. E é isso mesmo. Tudo bem? Então, depois de fazer tudo isso, se você estiver executando uma máquina rápida o suficiente e ele pode manter a Emily aberta. Você pode realmente acertar o Hot Recarregar, que reconstruirá seu aplicativo para você. Mas isso geralmente funciona com as mudanças XAML. Então, o que vou fazer é executar novamente o aplicativo e nos deixar fazer isso e esperar um pouco. E agora, quando clico, você vê que ele está funcionando. Portanto, nosso evento de cliques está funcionando bem ali. Criamos nossa primeira página do MAOI. 4. Crie controles com o XAML: Tudo bem, agora que vimos como criar uma nova página e controles usando o código C-Sharp. Vamos recriar isso usando o código XAML. Tudo bem, então vamos ao nosso projeto, cria um arrependimento, adicionaremos um novo item. E então, desta vez, vamos usar o bit de conteúdo Maui. Então observe que o primeiro foi C-afiado e este é XAML. Tudo bem, então vamos selecionar esse. E isso acabou de deixar o nome padrão pois ainda estamos nos estados exploradores. Então você vê que obtemos os layouts de estoque e obtemos esses rótulos padrão. Então, vamos começar a modificar esse arbitrário. Então nosso rótulo da última vez, está vermelho e eu vou ficar virando entre o C-sharp e o XAML, só para que eu possa copiar e colar e ir um pouco mais rápido. Então o texto aqui diz cone 0. Nós conseguimos definir a opção vertical, então isso significa que seu centro verticalmente. E então definimos a horizontal para ser central também. Mas outros elementos precisávamos ter o nome, certo? Então, demos a ele o nome contador LBL. Então eu vou ver o nome x dois pontos, por favor, igual ao contador LBL. Então, dessa forma, sabemos olá para nos referir, referenciá-lo a partir do código por trás. Ele também provavelmente quer dar um tamanho de fonte. E você vê todos os atributos que eu poderia sentar no C-Sharp. Eu posso realmente sentar aqui no XAML, certo? Você pode achar essa visão um pouco mais intuitiva, mas isso depende de você. Só estou mostrando suas opções. Então, uma fonte, parafuso de atributos, certo? Então esse é o nosso rótulo. Em seguida, temos nosso botão, abra uma nova etiqueta de botão. E eu gosto de abrir e fechar ao mesmo tempo e depois preencher todos os atributos, certo? Então o texto aqui dizia que deixe-me pular para contar. Tudo bem, clique em dois cones. E o que mais nós tínhamos? Tivemos o evento click, então, seja lá o que for clicado, queremos óleo aqui. Eles estão dizendo que você pode criar um novo manipulador de eventos. Vou apenas clicar que gerou um formulário que você verá o que foi gerado para nós em alguns. Podemos dar a ele os mesmos atributos de centralização central e vertical, horizontal e vertical. E acho que vou deixar isso por enquanto. Agora vamos pular para o nosso código atrás. O código por trás do arquivo geralmente será aninhado abaixo do arquivo XAML, certo? E se você olhar para ele, verá parcial e ele tem o mesmo nome que os arquivos XAML. Portanto, parcial no C-Sharp significa apenas que eu tenho várias classes e cada um, cada arquivo de código é como uma instância dessa classe ou uma parte da definição dessa classe. Portanto, isso faz parte da definição no arquivo XAML e o arquivo C-Sharp faz parte da definição. E esse herda da página de conteúdo. Agora eu já fiz o campo privado para os cones. Temos nosso construtor e, em seguida, temos esse método chamado initialize component. Portanto, lembre-se de que a página anterior teríamos definido tudo o que estaria na parte visível da nossa página. Dentro do nosso construtor inicializará o componente exatamente isso , exceto que ele é gerado automaticamente junto com o que estamos fazendo no arquivo XAML. Então, se você olhar para ele, verá que verá os nomes e tipos de controle de acordo. Então, qualquer coisa que você vai fazer dentro do construtor, eu aconselharia antes ou depois de inicializar o componente, mas não modifique esses nove. Agora temos nosso evento de clique que foi gerado para nós. E o que vou fazer é apenas reutilizar o mesmo código de evento de clique do controle anterior, da página anterior, para que tenhamos o mesmo comportamento certo? Agora. Para testar isso, vou pular para o shell do aplicativo e vou dizer não a página de teste, mas a nova página um. Tudo bem. Então, vamos fazer uma nova página um, nossa primeira grande e testar isso. Então, quando isso carrega, obtemos um layout muito semelhante. Podemos ver no topo aqui que é nova página um. E quando clicamos, obtemos o mesmo comportamento. Então, neste ponto, você sabe, agora você sabe duas maneiras de criar uma página dentro da boca para cima, você pode usar o código C-Sharp e codificar todos os seus elementos como quiser. Ou você pode misturá-lo onde você tem o XAML, bem como o código por trás. 5. Entenda os layouts de MAUI: Tudo bem pessoal, então nesta lição vamos nos concentrar em Leodes, certo? Então, vamos começar criando uma nova página de conteúdo. Já fiz isso, mas você pode clicar com o botão direito do mouse, ir para Adicionar novo item e, em seguida, queremos uma nova página de conteúdo, chamo de exemplo de layout. Então você pode ir em frente e fazer isso. E enquanto estamos nisso, vamos deixar o nó real, esse exemplo de layout é nossa nova página inicial, certo? Então, no exemplo de layout, temos nosso layout de pilha. Já vimos esse layout de pilha. Temos outros layouts. Temos layout de pilha vertical. Tudo bem, como é esse para o tamanho? Agora, a partir do nosso layout, podemos realmente definir como margens e paddings. E se você estiver familiarizado com HTML, então você sabe que a margem significa que, onde quer que o elemento esteja, ele fará tantos espaços entre si e o elemento mais próximo em qualquer coisa direção que especificamos. Enquanto o preenchimento é a espessura holística, queremos que o próprio elemento seja que, bem, a restrição direcional também se aplica lá, assim como com a margem. Com a definição do layout, podemos dizer que queremos preenchimento. E se eu definir isso para 30 em todas as direções? Tudo bem? Então, apenas vírgulas separamos. Tudo bem, na verdade, vou usar valores diferentes para que possamos visivelmente pelo menos ver onde esses valores de preenchimento estão sendo aplicados, certo? Então, tenho certeza de que vamos ver alguns tamanhos estranhos, mas sempre podemos voltar e mudar isso. Também podemos definir a margem se quisermos. Então, só estou mostrando quais são suas opções, certo? Então essa é a pilha vertical Leo. O layout da pilha vertical significa que ele vai empilhar tudo de cima para baixo, um, em cima do outro descendo. Tudo bem. Então, o próximo muito popular seria uma grade. Não, uma grade geralmente nos dá algo como um layout de tabela, que pode ser muito útil um para um, controles ao lado do outro, etc. Então, se quisermos isso, poderíamos, na verdade, dentro dessa pilha layout, defina uma grade. Assim, podemos abrir nossa grade, abrir e fechar. E então, dentro da grade, podemos fazer nossas definições. Mas antes de fazermos nossas definições, gostaríamos de fazer definições de coluna dentro dessa grade. As definições de coluna nos permitem especificar o tamanho de cada coluna. E com base no que especificamos que o número de colunas que obteremos. Então você provavelmente veria algo como auto. Auto significa qualquer tamanho que o controle seja quando ele entra. É assim que essa coluna deve ser grande. Também podemos usar um valor mais alto e dizer, bem, conhecer essa coluna exatamente que muitos espaços. E então, como eu disse, tantas quanto colocamos em tantas colunas que recebemos. Então, neste momento, defini três colunas diferentes. Dois deles são automáticos, um é um valor fixo de 30. Certo? Agora, dentro dessas colunas, posso definir controles diferentes, certo? Então vamos dizer que eu queria um botão dentro da coluna um. E o botão é uma etiqueta de fechamento automático. E o que eu quero dentro desse botão? Primeiro de tudo, quero que ele esteja na coluna da grade. Então eu posso dizer coluna aqui. E posso ver que você deve estar na primeira coluna da grade. Então, ele começa a contar em 0. Então isso seria 012, certo? Então, vendo a posição 0 da grade, ou deixe-me digitá-la aqui. coluna de grade é igual a 0. Isso significa que eu quero você na primeira coluna. E digamos que eu queria que o texto fosse o botão Teste. E largura. Digamos que uma solicitação de largura seja 100. E se quisesse, eu clico em evento, poderíamos colocar o que quisermos, podemos colocá-lo, certo? Então, vamos ver, é isso para o primeiro. Vamos apenas duplicar essa linha. Então eu apenas controlei D. E então eu quero este na terceira série, que seria a coluna de grade dois, desculpe, na terceira coluna, que será uma coluna com o número dois. Então lembre-se 012. E este terá a mesma largura. Tudo bem, então é assim, é assim que você pode começar a definir seus controles. Realmente sabe o que acontece se eu quiser? Bem, deixe-me renunciar quaisquer outras modificações e vamos testar este antigo. Então vá em frente e execute-o. E enquanto você estiver executando, eu vou guiá-lo pelo que você está olhando na minha tela. Então você pode ver que as bordas, o layout é meio estranho e isso é por causa dos diferentes valores que usamos. Então dez estava à esquerda, 50 de cima, Haiti e depois dez abaixo, à direita. Então é esquerda, superior, direita, inferior. E então o que também notaríamos é que os botões nas colunas automáticas. E então, porque temos uma lacuna de 30, foi assim que criamos esse espaço no meio, certo? Então, essas são pequenas coisas de design. Essas são coisas que talvez você queira fazer de forma diferente. Mas o ponto é que, uma vez que você saiba ou tenha uma apreciação de como os Leodes funcionam, então você pode fazê-lo funcionar da maneira que você quer. Então você pode ir em frente e brincar com eles. Você tem layouts diferentes. Como eu disse, você tem o layout de pilha vertical. E você pode obter mais informações sobre os diferentes layouts da documentação para o layout dotnet Maui. Então você tem o layout da pilha, você tem o layout absoluto. Nós olhamos para a grade, você tem os flocos de layouts flexíveis é basicamente quase como se você usar o Bootstrap, eu vou executar paralelos porque mais do que provável você tem sido uma web desenvolvedor em algum momento e você usou o Bootstrap. Então, com o Bootstrap, você tem uma função e tem até 12 espaços de colunas. E se você exceder isso, ele para o próximo espaço. Isso é tudo o que funciona em flocos. Então você coloca tantos elementos da esquerda para a direita. Então, quando ele os excede no espaço, ele simplesmente envolve e simplesmente cai, cai e cai e cai, certo? Então eu tenho certeza que você pode, você está apenas olhando para essas coisas. Seu cérebro está enlouquecendo. E se você olhar para a esquerda aqui você verá outros tipos de Laozi da grade. Você tem o SAR que falamos sobre a grade ou ideia, o fichário. Você devia absolutamente. Você tem o layout de pilha horizontal e o que vimos, o layout da pilha vertical. 6. Defina valores globais de marcação: Bem-vindo de volta pessoal. Nesta lição, vamos olhar para XAML, marcação, neve de extensão. maior parte do tempo. Vamos ter XAML que queremos padronizar, certo? Então, vamos levar, por exemplo, voltando para a página principal, temos rótulos diferentes e pode haver momentos em que você tem vários rótulos em todo o controle específico e você gostaria que todos eles fossem do mesmo tamanho. Agora, se você tiver cinco rótulos e definir o tamanho cinco vezes, seria tedioso alterá-lo cinco vezes e depois multiplicá-lo por 50. Acho que você chega onde eu vou. Portanto, as extensões de marcação nos ajudam a sentar como um valor estático no código por trás e, em seguida, referenciar esse valor estático. Então, se tivermos que fazer uma mudança, fizemos a mudança uma vez. Então, vamos ver o que é preciso. Se passarmos para o código por trás nossa página principal sobre XAML, a primeira coisa que podemos fazer é definir nosso valor que gostaríamos. Então eu vou dizer const público, duplo. O tamanho da fonte é igual a c 22. Tudo bem? Então esse é o tamanho da fonte que sabemos que queremos. E vou seguir a convenção de nomenclatura adequada. Como é um público ou é uma propriedade, vou fazer com que ele tenha letras maiúsculas ou comece com iterado epitelial. Então, dentro dessa mesma classe, preciso definir ou, em vez do mesmo arquivo com esse namespace, terei que definir outra classe, então classe pública. E então vou dizer o tamanho global da fonte. E então a convenção de nomenclatura aqui exige que eu a acrescente com a extensão da palavra. E então vou deixar que ele herde da extensão I'm markup, que me dirá que preciso implementar a interface. Portanto, a implementação da interface para isso vem com um método chamado fornecer valor. E é preciso injetar um provedor de serviços de IA. E então temos que especificar ou o que quisermos aqui. Então, vou dizer retornar a página média, virar a página média. E esse é o nome da classe aqui. Deixe-me apenas ter certeza de que sabe, oh, eu dividi o retorno incorretamente, retorne a página principal. E então veríamos o tamanho da fonte. Então, em essência, quando isso é referência, ele só sabe retornar o tamanho da fonte ao controle da página principal. E então a página principal seria capaz acessá-la de acordo. Então, em nosso XAML, o que queremos fazer antes de tudo, é definido o namespace no topo. Então, precisamos que ele saiba que um novo namespace está aqui. Então, diremos dois pontos de namespace XML e XML e, em seguida, damos algum nome a ele. Então aqui eu posso ver o tamanho da minha fonte. Tudo bem? E então isso vai ser igual a. E então direi CLR, namespace de hífen, dois pontos e, em seguida, o namespace que causa com onde foi definido. Foi definido no namespace, meu primeiro Mawi. Então esse é o valor do namespace que está lá fora. Tudo bem. Então, tudo isso é apenas um fio para cima. Portanto, nenhuma ou página principal sabe como fazer referência ao tamanho da fonte. Agora, quando eu quiser fazer referência ao tamanho da fonte, e vamos usar esse rótulo como exemplo. Em vez de escrever o valor como dissemos, tamanho da fonte, o que farei é fazer referência a um, o alias de namespace aqui que eu defini. Então, vamos ver, vá para esse namespace e, em seguida, consiga o tamanho da fonte global. Tudo bem, então você disse que foi preenchido automaticamente para mim. Não tive que tocar nesse dedo do pé porque ele já está identificando que a partir desse namespace, posso obter esse valor. O que é o tamanho da fonte global? Mais uma vez, o tamanho global da fonte é o que definimos. Portanto, se a 12ª extensão de tamanho de fonte global for o nome da classe, no entanto, não precisamos da extensão da palavra quando estamos fazendo referência a ela no acorde. Então, apenas fazendo isso, podemos realmente ter esse bit de código em qualquer lugar sem que queiramos usar esse tamanho de fonte específico. Como você mostra, irá para o shell do aplicativo e mudamos a página principal. E quando testamos isso, você vê que nosso rótulo está aparecendo corretamente. Então, mais uma vez, o objetivo desse exercício é mostrar como você pode definir esses valores estáticos para acesso e alcance mais globais. que, se você precisar atender a mudança, você só tem um lugar feito a alteração. E isso pode afetar vários controles. 7. Defina valores específicos de plataforma: Tudo bem pessoal, então vamos dar uma olhada na marcação específica da plataforma. Então, o que acontece é aquele rumor de que temos um conjunto chamado base um de páginas e controles. E temos que atender vários dispositivos. Alguns dispositivos podem ter certas considerações de design que outros. E o Mawi facilita muito a especificação certos valores para determinados sistemas operacionais dentro do código. Portanto, ele irá contextualmente lorar ou renderizar o conteúdo de acordo com o relógio é declarado. Então, vamos começar analisando como você veria em qual dispositivo queremos, qualquer margem ou preenchimento com nosso layout de pilha vertical. Para contextos, estou de volta ao layout desse arquivo XAML. Neste arquivo, o que vou fazer é dar um joelho, certo? Então, vou ver x o nome dos dois pontos é igual a, e então isso é um C Leo. O estoque. Isso deveria ter um layout preso. Deixe-me fazer o layout da pilha. Tudo bem, agora que temos esse nome no código por trás, posso fazer referência a ele no construtor de layout. E se eu quisesse dizer que o preenchimento de pontos do layout da pilha V. Eu quero que isso seja igual a algo diferente se for uma plataforma iOS versus se for qualquer outra coisa, certo? Assim, posso ver as informações do dispositivo, que é uma classe especial dada a nós que nos permite especificar a plataforma. Então, a plataforma de pontos de informações do dispositivo, se for equivalente e, em seguida, temos acesso à plataforma do dispositivo, que é praticamente um enum. Assim que eu vejo, lá vamos nós. Então, Devise Platform. Podemos especificar para Android, iOS, Mac, catalyst, macOS, diesen, etcetera, etc. Você vê todos os dispositivos aqui que você pode realmente tentar facilitar o comércio. Então, vamos dizer que, para iOS, se a plataforma do dispositivo for para iOS, então vou usar um operador ternário aqui. Em seguida, queremos definir uma nova espessura, que é o objeto ou o traçado a ser usado para preenchimento. Então deixe-me, deixe-me voltar um pouco. Então, se for iOS, queremos uma nova espessura. E digamos que eu queria 30 por dez, por 30 por dez, etc. E então, de outra forma, eu gostaria que fossem apenas 30, todos nossos. Então eu posso apenas dizer ou provocar 25 todos os nossos, certo. E é isso. Bem ali. Só especifico que quero que o preenchimento seja diferente. Se estivermos usando um dispositivo iOS, é isso que eu quero. Caso contrário, para qualquer outro dispositivo, faça isso. Então, obviamente, se você quisesse atender a mais cenários, provavelmente gostaria de usar uma instrução if ou uma instrução switch. Para que não seja um operador ternário, estamos comparando apenas com um de cada vez. Tudo bem? Então isso é tudo o que faremos isso no, no código por trás. Não, alternativamente, na marcação, o que poderíamos fazer é colocar os atributos para que o preenchimento seja igual e então poderíamos super impor nossa própria plataforma aqui. Tão bom ver na plataforma. E então nós apenas listamos todas as plataformas em potencial. E aqui podemos começar com o iOS mais uma vez, e podemos definir os valores que acabamos de usar. Deixe-me ver se posso ir e pegá-los rapidamente. Alguns valores arbitrários. Não estou levando isso a sério, certo? Não. Mas podemos defini-los. Eles teriam que estar entre aspas simples. Aspas simples porque já estamos dentro de aspas duplas aqui. Então, para querer usar aspas simples para especificar os valores do iOS e qualquer outro valor. E então, como fizemos, fizemos iOS e, em seguida, padrão, por vírgula. E então você verá o padrão como uma das opções, o que significa que qualquer coisa que não seja iOS, qual valor você quer? Eu quero que seja, vamos ver, 30, certo? Portanto, essa é uma boa maneira de especificar que o preenchimento na plataforma iOS isso ou aquilo. Também poderíamos fazer algo com a cor de fundo, certo? Então eu poderia ver a cor de fundo aqui, certo? E então faça a mesma coisa na plataforma. Na plataforma iOS, quero que seja, vamos ver, verde, certo? No Android, quero que seja Alice, azul, etc. Para que possamos continuar e continuar. Então isso é tudo o que podemos fazer, configurações específicas da plataforma na mesma marcação. Mais uma vez, utilizando nossa base de código singular ao máximo. 8. Recursos compartilhados: Ei pessoal, bem-vindos de volta. Desta vez, vamos analisar recursos compartilhados. Recursos compartilhados seriam uma extensão do que analisamos anteriormente com a extensão, exceto que não será tão fortemente acoplado a nenhum controle, certo? Então, vamos começar adicionando uma nova classe, clique com o botão direito do mouse em Adicionar nova classe. E então vou chamá-lo recursos compartilhados. Clique em Adicionar. E então estamos fazendo este na classe estática. Portanto, essa é uma classe estática chamada recursos compartilhados. E então aqui podemos definir algumas propriedades públicas estáticas somente leitura, certo? Então, vamos começar dizendo talvez que queremos uma certa cor para nossa fonte. Então, público estático, estático , somente leitura, e eu vou chamá-lo de swell. O tipo será de cor. Então, a cor é um tipo e vamos chamá-la de cor da fonte. Eu soletro cor com um u. Então você sempre vai me ver fazer isso. E então vamos dar um valor a ele, certo? Portanto, nossa cor da fonte aqui será pontos de cor. E podemos fazer a partir do final, do RGB, etc. Vamos fazer algo RGB que é fácil o suficiente para sobreviver. Então, se quiséssemos que fosse RGB é vermelho, verde e azul, podemos usar números inteiros entre 0255. Se você estiver familiarizado com o CSS, isso não deve ser um conceito estrangeiro para você. Então podemos usar algo como 0 vírgula 0 vírgula 25 por causa de argumentos. Então isso nos daria uma cor de fonte mais azul. Tudo bem, também podemos definir outros valores para que eu possa definir minha cor de fundo, eu poderia definir a cor do primeiro plano. Eu poderia definir todos os tipos de coisas. Uma vez que eu tenha o tipo de dados, eu dou um nome a ele e, em seguida, posso dar um valor a ele. Ele pode ser colocado nesse arquivo de recursos compartilhados estáticos. Observe que para usar esse recurso ou qualquer um dos recursos desse arquivo, eu só preciso ir para um controle. Deixe-me ir para a nova página um. E então, aqui em cima, quero fazer algo semelhante onde eu tenho que incluir o namespace ou XML e S dois pontos. E então vou dar um nome a ele, vamos chamá-lo de recursos. E vou dizer que você é igual a CLR, namespace hífen, dois pontos. E o namespace do meu arquivo de recursos compartilhados ainda é meu primeiro MAOI acima uma vez, é claro, ele vai em uma pasta, não somos p e as tensões em uma estrutura de pastas são muito difíceis aqui porque eu poderia colocar isso facilmente na pasta de recursos. Então, deixe-me realmente fazer isso. Então, vou mover esse arquivo de recursos compartilhados para a pasta Recursos. E então o que vou fazer é sincronizar o namespace para que possamos garantir que ele esteja no namespace atual. Então, neste momento, quando estou incluindo-o no XAML, tenho que me certificar de que estou apontando para o namespace do carrinho. Então, éramos uma nova página um namespace CLR. O namespace, Desculpe, é o meu primeiro caminho para cima. Recursos de pontos, certo? Então agora sabemos onde está esse botão. Para fazer referência a ele no código onde quer que eu queira que essa cor seja usada. Digamos que eu o queira no rótulo aqui. Então eu escolheria o atributo que diz texto, cor é igual a. E então abra minha cinta encaracolada. Primeiro de tudo, eu diria x dois pontos estáticos. Então é isso que sabe que, ok, estou recebendo meu valor para meu membro estático. Então, membro estático, deixe-me acertar minha ortografia. E isso é igual a, e então vemos um recurso que é nosso alias para nosso novo espaço até os principais recursos, os recursos compartilhados da Sherry, que é o nome do nosso Arquivo e, em seguida, cores de fonte. Então, aqui estamos vendo ir e buscar a cor da fonte a partir desse arquivo de recursos compartilhados estáticos. Em qualquer lugar do nosso código que queremos compartilhar essa cor. Podemos fazer algo assim. E podemos ter mais uma vez, tantos recursos listados aqui que sabemos que queremos permanecer consistentes em todo o aplicativo. Então você pode ir em frente e testar esse antigo. Você pode ir em frente e executá-lo, colocá-lo em vários lugares e simplesmente ir em frente e garantir que qualquer cor que você tenha definido aqui esteja realmente sendo exibida nessas áreas. 9. Navegando em várias páginas: Nesta lição, vamos analisar a configuração da navegação fly-out, que é um tipo de navegação em que uma janela para o item de menu selecionado voa desse lado para o centro da tela. E normalmente teria o que chamamos de hambúrguer. Essas três linhas no canto superior, esquerdo ou direito da tela, acho que é mais provável que você a veja à esquerda. Mas vamos ver essas pílulas de hambúrguer aqui em cima. Quando tocarmos nele, poderemos selecionar para qual página você deseja ir e então essa página voará. Então, vamos dar uma olhada no que precisamos fazer para que isso seja aberto. Desculpe, a jornada começa com nosso shell de aplicativo. Até agora, interagimos com esse arquivo sempre que quisemos alterar a página inicial, certo? Portanto, estamos nos concentrando no exemplo de layout. Nós o mudamos, estávamos focando na página principal ou alterá-la, etc. Então, o que acontece é que podemos realmente ter vários nós dentro dessa área. Então, vou criar um para cada página que temos até agora. Então, temos layouts, exemplo, e também vou alterar o título. Então, exemplo de espaço de layout e o exemplo de layout de royalties. Também temos uma nova página um. E embora essas não sejam notícias oficiais da página, mas elas estão lá. Então, vamos trabalhar com eles. E acho que não temos outro Pedro. Sim, temos página de teste. Então eu tenho a página de teste. E eu estou apenas mostrando que não importa se é a página XAML ou a página C-sharp, cada uma delas é uma opção, certo? Mas quando executamos, nosso aplicativo não verá nada visivelmente diferente fora de talvez exibir o que está primeiro na lista. Então, o que acontece é que precisamos ver um show sobre o comportamento do fluxo. E então mudamos de deficiente para voar para fora. Tudo bem, então vamos fazer esse ajuste e teste. Quando nosso aplicativo estiver em execução, veremos que temos nossas pílulas de hambúrguer. Quando tocamos nisso, vemos que ele voa para fora. E com cada título que demos, podemos ver que ele aparece, então clicamos em Exemplo de layout. Lá vamos nós. Se escolhermos nova página, lá vamos nós. Tudo bem. Então, cada página que criamos até agora, podemos alternar facilmente entre eles usando esse método de qualquer maneira, isso foi bastante fácil. Tenho certeza que você percebe que esse foi um exercício muito fácil de concluir. Agora, se quiséssemos ícones nesses itens de menu, seria tão fácil quanto dentro do conteúdo do shell. Poderíamos apenas dizer ícone e depois dar o caminho. Então, vamos tentar talvez os bots dotnet, acho que a página principal como fazer referência ao dotnet, mas só queria ter certeza de que eu consegui esse caminho corretamente. E bem, ele só tem o caminho para lá. Então, vamos tentar isso. Vamos apenas colocar o dotnet comprado na página principal e vamos testar isso. Lá vamos nós. Então, quando coloco o ícone dotnet, mas quando toco no menu, agora estou vendo esse ícone. Então, qualquer PNG, qualquer recurso que você adicionar. E mais uma vez, você adicionaria esses recursos aqui, aquele dotnet que é encontrado aqui nas imagens. Você sempre pode adicionar essas imagens conforme você precisa delas. E então você apenas adiciona o ícone a cada item do menu. Por isso, dá ao seu aplicativo um pouco mais de caráter e um pouco mais, uma aparência mais agradável à medida que você avança. Agora, o próximo tipo de navegação que gostaríamos de ver é a navegação com guias. navegação por tabulação geralmente se origina na parte inferior da tela e, em seguida, você teria um ícone por guia que você pode selecionar e ver o período moderno inicial, certo? Então, ainda estamos aqui na concha. E o que queremos fazer é criar uma página com guias. Então, vou abrir uma nova tag, e essa será a barra de guias. E então, dentro da barra de abas, teremos abas. Então, temos a etiqueta da banheira. E, em seguida, dentro dessa tag de tabulação teria esse Conteúdo do Shell. Tudo bem, então vamos fazer alguns desses. Então, vou criar algumas banheiras, mais três banheiras, e depois colocar o conteúdo da concha em cada uma. Tudo bem, então estamos apenas transformando de apenas para a nossa navegação com abas, certo? E, como você pode ver, é bastante consistente. Portanto, a sintaxe não é a sintaxe mais difícil de se agarrar. E se você já tem a mosca ou o comportamento habilitado. Então, vou mostrar como os dois deles podem se combinar para dar uma experiência específica ao usuário. Tudo bem, então estamos aqui no aplicativo. Se eu for para as pílulas navbar, não vejo nada. Se eu olhar abaixo, não vejo nada. No entanto, quando eu clico, você notará que ele está mudando. Então, obviamente, há algo lá, mas precisamos de mais alguns elementos. Então, um deles, o ícone não estaria no Conteúdo da Shell, estaria na banheira. Portanto, a guia em si pode obter um título. Então eu poderia dizer aqui significa PH. E então eu também poderia dar esse ícone a esse. Bem, deixe-me, acho que já o tenho na área de transferência. Lá vamos nós. Tudo bem, então vamos testar esse primeiro passo. Tudo bem, então lá vamos nós. Então aqui temos a página principal com o ícone. Tudo bem, então você poderia ir em frente e fazer isso. Portanto, não tenho outros ícones ou sem manter o mesmo ícone para as outras banheiras. Mas vou mudar o rótulo, claro, layout. Esta guia seria uma nova página. E a última foi a página de teste. Então, depois de fazer todas essas alterações, executo meu aplicativo novamente. E quando eu dou uma olhada agora estou vendo minhas abas, certo? Então essa é a navegação por guias. Bom e fácil. Dois é navegar entre todas as páginas que você tem em seu aplicativo. Você tem o menu suspenso e você tem a página com guias. 10. Conclusão: Tudo bem pessoal, parabéns por chegarem até aqui. Criamos com sucesso nosso primeiro aplicativo móvel usando dotnet Maui. Saiba que não é muito, nem muito para se olhar agora. Ele realmente não tem nenhuma funcionalidade real, mas temos pelo menos os conceitos centrais sob nossos cintos. Sabemos como criar novas páginas. Entendemos onde precisamos ir para fazer certas coisas. Entendemos como navegar pelo código por trás ou configurar eventos, como podemos gerar eventos visuais usando o código C-Sharp. Temos todos esses exemplos aqui, e também sabemos como navegar entre várias páginas. Então, neste ponto, podemos simplesmente adicionar isso, o controle de origem. Você pode verificar o link relevante nos recursos anexados para este vídeo específico. E quando voltarmos, vamos criar um aplicativo real usando dotnet Maui.