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 - AppHotel - Mais Componentes XAML

18 views

Published on

Nesta aula vamos aprender:
✓Usar novos componentes:
✓Stepper
✓Piker
✓Date Piker
✓Reforçar os conteúdos do exercício de navegação entre telas.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Xamarin - AppHotel - Mais Componentes XAML

  1. 1. AppHotel: Novos Componentes XAML 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: ✓Usar novos componentes: ✓Stepper ✓Piker ✓Date Piker ✓Reforçar os conteúdos do exercício de navegação entre telas. 2www.tiago.blog.br OBJETIVO: NAVEGAR ENTRE TELAS E USAR NOVOS COMPONENTES XAML
  3. 3. QUAL É O OBJETIVO DO NOSSO APP? • Nosso App deverá calcular a diária de um hotel. O valor da diária será influenciado pelo quarto escolhido, número e adultos, número de crianças e quantos dias eles ficarão no quarto. • Neste projeto vamos utilizar novos componentes como o Date Piker para selecionar a data de entrada no hotel (check-in) e a data de saída (check-out). Usaremos o Piker para selecionar qual o tipo de quarto e o Stepper para definir quantas pessoas (adultos e crianças) se acomodarão no hotel. 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. 4) Note que neste projeto também colocamos imagens aqui!
  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
  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. 3) Adicione na raiz, para também funcionar no Windows.
  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 Novo Componente: Stepper
  18. 18. 18www.tiago.blog.br Novo Componente: Piker Novo Componente: Date Piker
  19. 19. 19www.tiago.blog.br A outra página: Página2.xaml Pegando os dados da outra janela, usando a classe Dados
  20. 20. 20www.tiago.blog.br A outra página: Página2.xaml Pegando os dados da outra janela, usando a classe Dados
  21. 21. PARTE IV: ADICIONANDO OS COMPORTAMENTOS EM C#
  22. 22. 22www.tiago.blog.br Diretiva de compilação Definindo as imagens, para aparecer também no Windows! Programação da Pagina1
  23. 23. 23www.tiago.blog.br Calculando a diferença de dias das diárias. Guardando as informações no objeto da classe Dados Transportando para a Página2.
  24. 24. 24www.tiago.blog.br Pegando as datas selecionadas no Date Piker
  25. 25. 25www.tiago.blog.br Inicializando as imagens da Pagina2 para funcionarem no Windows também. Botão para voltar. Programação da Pagina2
  26. 26. 26www.tiago.blog.br Calculando o valor da diária, conforme o quarto selecionando. Caso os dados sejam inválidos, volta para a tela anterior.
  27. 27. 27www.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.
  28. 28. OBRIGADO! tiago@tiago.blog.br www.tiago.blog.br

×