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.

Ione Souza Junior

December 02, 2020
Tweet

More Decks by Ione Souza Junior

Other Decks in Programming

Transcript

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

    View full-size slide

  2. Ione Souza Junior
    Desenvolvedor Mobile @ Mercos
    Microsoft MVP
    Twitter: @ionixjunior
    E-mail: [email protected]

    View full-size slide

  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

    View full-size slide

  4. Dica 1
    Conhecer as estruturas de layout e controles

    View full-size slide

  5. Conhecer as
    estruturas de
    layouts e
    controles

    View full-size slide

  6. Conhecer as
    estruturas de
    layouts e
    controles

    View full-size slide

  7. Conhecer as
    estruturas de
    layouts e
    controles

    View full-size slide

  8. Dica 2
    XAML Previewer

    View full-size slide

  9. XAML Previewer

    View full-size slide

  10. Dica 3
    Hot Reload

    View full-size slide

  11. Dica 4
    DebugRainbows

    View full-size slide

  12. DebugRainbows

    View full-size slide

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

    View full-size slide

  14. Dividir para
    conquistar

    View full-size slide

  15. Vamos olhar para um layout
    e discutir sobre como
    podemos implementá-lo

    View full-size slide

  16. App 12 min
    Será que conseguimos fazer o
    layout em 12 minutos?

    View full-size slide

  17. Grid
    1 coluna
    2 linhas
    FlexLayout
    coluna 0 linha 0
    JustifyContent SpaceBetween
    Frame
    coluna 0 linha 1
    ImageButton
    FlexLayout
    Label
    Image
    Entry

    View full-size slide

  18. Hora do código

    View full-size slide

  19. 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

    View full-size slide

  20. Hora do código

    View full-size slide

  21. ScrollView
    CollectionView
    ListView
    StackLayout
    Header
    Highlight

    View full-size slide

  22. Hora do código

    View full-size slide

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

    View full-size slide

  24. Vamos ver como resolver

    View full-size slide

  25. Acha que isso é algo
    muito estranho?
    Vou te mostrar alguns códigos bem "familiares"

    View full-size slide

  26. 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

    View full-size slide

  27. Referências

    View full-size slide

  28. Ione Souza Junior
    @ionixjunior
    [email protected]

    View full-size slide