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

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

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 ⚠
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"
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