Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Dicas para desenvolver interfaces com XAML de forma mais fácil

Dicas para desenvolver interfaces com XAML de forma mais fácil

Essa palestra foi realizada no Canal .NET no evento DevWeek.

790726f5b5613d61926dea2e2efd4da1?s=128

Ione Souza Junior

December 02, 2020
Tweet

Transcript

  1. Dicas para desenvolver interfaces com XAML de forma mais fácil

  2. Ione Souza Junior Desenvolvedor Mobile @ Mercos Microsoft MVP Twitter:

    @ionixjunior E-mail: junior@ionixjunior.com.br
  3. Motivações - Mostrar que é possível desenvolver as telas que

    gostamos / admiramos / desejamos / precisamos - Mostrar que é possível criar telas com uma série de detalhes e muitos elementos e continuar mantendo tudo organizado - Mostrar que não é difícil componentizar layouts - Mostrar que o desenvolvimento de layouts em aplicações Kotlin / Swift não é tão diferente assim
  4. Dica 1 Conhecer as estruturas de layout e controles

  5. Conhecer as estruturas de layouts e controles

  6. Conhecer as estruturas de layouts e controles

  7. Conhecer as estruturas de layouts e controles

  8. Dica 2 XAML Previewer

  9. XAML Previewer ⚠

  10. None
  11. Dica 3 Hot Reload

  12. Hot Reload

  13. Dica 4 DebugRainbows

  14. DebugRainbows

  15. Dica 5 Dividir para conquistar pode ser uma boa pedida

  16. Dividir para conquistar

  17. Vamos olhar para um layout e discutir sobre como podemos

    implementá-lo
  18. App 12 min Será que conseguimos fazer o layout em

    12 minutos?
  19. Grid 1 coluna 2 linhas FlexLayout coluna 0 linha 0

    JustifyContent SpaceBetween Frame coluna 0 linha 1 ImageButton FlexLayout Label Image Entry
  20. Hora do código

  21. Grid 2 colunas 1 linha Image coluna 0 linha 0

    column span 2 aspect fill Stacklayout coluna 0 linha 0 orientação vertical Image coluna 0 linha 0 column span 2 fundo transparente alinhada no rodapé Frame Label Image coluna 1 linha 0 VerticalOptions End Tamanho fixo
  22. Hora do código

  23. ScrollView CollectionView ListView StackLayout Header Highlight

  24. Hora do código

  25. E os bindings??? Muito legal, mas… e agora, como fica?

  26. Vamos ver como resolver

  27. Acha que isso é algo muito estranho? Vou te mostrar

    alguns códigos bem "familiares"
  28. None
  29. None
  30. None
  31. None
  32. Reforçando as dicas - Independe da plataforma que usar (Flutter,

    React Native, Ionic, Xamarin), conheça o que ela oferece antes de reclamar, falar mal ou dizer que "não funciona" - Dê uma chance para o XAML Previewer, ele funciona ❤ - Hot Reload pode agilizar muito o seu trabalho no desenvolvimento de layouts, mas lembre-se: no desenvolvimento com Kotlin / Swift isso não existe (salvo Swift UI e Android Instant Run) - DebugRainbows vai te ajudar a entender qual a disposição dos controles que está utilizando - Se decidir / precisar fragmentar seus layouts, pense em torná-los reutilizáveis; fixar os bindings direto no layout não é uma boa idéia para essa abordagem
  33. Referências

  34. Ione Souza Junior @ionixjunior junior@ionixjunior.com.br