Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Xamarin - Transição Entre Telas

12 views

Published on

esta aula vamos aprender:
✓Adicionar mais telas a um App
✓Adicionar Imagens ao Projeto
✓Passar valores de uma tela para outra
✓Definir qual será a tela inicial do App
✓Adicionar uma classe C# simples
✓Entender os conceitos async e await

Published in: Software
  • Be the first to comment

  • Be the first to like this

Xamarin - Transição Entre Telas

  1. 1. AppLogin: Transição Entre Telas Prof. Me. Tiago A. Silva Profª Esp. Nídia Castelli VERSÃO 2019 www.tiago.blog.br PROGRAMAÇÃO DE APLICATIVOS MOBILE I
  2. 2. PLANO DE AULA ▪ Nesta aula vamos aprender: ✓Adicionar mais telas a um App ✓Adicionar Imagens ao Projeto ✓Passar valores de uma tela para outra ✓Definir qual será a tela inicial do App ✓Adicionar uma classe C# simples ✓Entender os conceitos async e await 2www.tiago.blog.br OBJETIVO: CRIAR UM APLICATIVO COM MAIS DE UMA TELA E NAVEGAR ENTRE ELAS
  3. 3. QUAL É O OBJETIVO DO NOSSO APP? • Nosso App terá duas telas e seu objetivo é programarmos um sistema de login simples, ou seja, autenticação com usuário e senha que estarão pré- definidos no código-fonte. • Caso o usuário digite o usuário e a senha corretamente ele será redirecionado para a segunda página do App. Lá ele encontrará uma opção para voltar à tela inicial, de login. • Então neste App, além de utilizar os conceitos que já aprendemos, vamos aprender como realizar a navegação entre telas e aprender novos conceitos da linguagem C#. www.tiago.blog.br 3
  4. 4. PARTE I: CRIANDO A ESTRUTURA DO PROJETO
  5. 5. COMO FICARÁ A ESTRUTURA DA NOSSA SOLUÇÃO www.tiago.blog.br 5 3) Vamos adicionar outras páginas ao nosso projeto. Veja no slide seguinte como. 2) Vamos adicionar uma classe C# Simples também! Não se esqueça que a primeira letra é maiúscula. 1) Note que o arquivo MainPage.xaml foi removido.
  6. 6. Passo 1: Adicionar a Classe Dados.cs www.tiago.blog.br 6 Clique com o botão direito sobre o projeto Xamarin Vá em “Adicionar” Selecione “Classe...”
  7. 7. Passo 1: Adicionar a Classe Dados.cs www.tiago.blog.br 7 Selecione “Classe” Dê o nome “Dados.cs” Vá em “Itens do Visual C#” Clique em “Adicionar”
  8. 8. Passo 1: Adicionar a Classe Dados.cs www.tiago.blog.br 8 Nome dado a classe Atributos da classe Dados: Usuario e Senha Métodos set e get dos atributos, para gravar e ler valores
  9. 9. Passo 2: Adicionar as Outras Páginas www.tiago.blog.br 9 Clique com o botão direito sobre o projeto Xamarin Vá em “Adicionar” Selecione “Novo Item”
  10. 10. 10www.tiago.blog.br Selecione “Xamarin.Forms” Página de Conteúdo Dê um nome conforme pedido anteriormente. Será Pagina1.xaml ou Pagina2.xaml Clique em “Adicionar”
  11. 11. PARTE II: ADICIONANDO AS IMAGENS AO PROJETO
  12. 12. Adicionar Imagens ao Projeto www.tiago.blog.br 12 2) Siga até o diretório “drawable” 1) Vá no projeto Android.
  13. 13. Adicionar Imagens ao Projeto www.tiago.blog.br 13 Clique com o botão direito do mouse sobre “drawable” Vá em “Adicionar” Escolha “Item Existente...”
  14. 14. Adicionar Imagens ao Projeto www.tiago.blog.br 14 2) Selecione a imagem. 1) Navegue até onde as imagens estão, por exemplo LanSchool Files ou Downloads 3) Clique em “Adicionar”
  15. 15. PARTE III: CRIANDO O CÓDIGO XAML
  16. 16. 16www.tiago.blog.br Código XAML da Página1.xaml
  17. 17. 17www.tiago.blog.br Componente de Imagem!
  18. 18. 18www.tiago.blog.br A outra página: Página2.xaml Componente de Imagem! Pegando o nome do usuário dinamicamente.
  19. 19. PARTE IV: ADICIONANDO OS COMPORTAMENTOS EM C#
  20. 20. 20www.tiago.blog.br Diretiva de compilação Testando (if) se o usuário e senha digitado pelo usuário são válidos. Guardando o usuário e senha num objeto. Enviando os dados do usuário para a página seguinte. Mandando abrir a nova página criada.
  21. 21. 21www.tiago.blog.br Caso o usuário e senha digitados estejam incorretos. Mostra uma mensagem de erro ao usuário. “Zera” o usuário e senha digitados.
  22. 22. 22www.tiago.blog.br Comportamento do botão voltar. Envia a navegação para a página anterior, página de login.
  23. 23. 23www.tiago.blog.br Editando o arquivo App.xaml.cs de configuração do App Definindo que a Pagina1.xaml será o “MainPage” do nosso aplicativo. Aqui podemos trocar qual será a página inicial do nosso aplicativo.
  24. 24. OBRIGADO! tiago@tiago.blog.br www.tiago.blog.br

×