Creating Great Xamarin.Forms UI's
0 likes42 views
In this session Kym shares techniques for creating great looking User Interfaces in Xamarin.Forms. Everything from finding inspiration, understanding layouts, prototyping, animation and the libraries you should know about. Because Xamarin.Forms UI's don't have to suck. Kym Phillpotts is a Senior Content Developer at Microsoft with a love of all things Xamarin, especially User Experience and Interface Design. He has been an instructor at Xamarin University and co-organises the Melbourne Xamarin User Group. You can also find him streaming Xamarin development on Twitch.
Creating Great Xamarin.Forms UI's
- 1. Creating Great Looking Xamarin.Forms UIs Kym Phillpotts Senior Content Developer Microsoft @kphillpotts kymphillpotts.com twitch.tv/kymphillpotts github.com/kphillpotts
- 5. Dribbble.com
- 6. Snppts.dev
- 7. Design Tools
- 10. Choosing Layouts
- 11. Choosing Layouts
- 12. Choosing Layouts Great for: Laying out controls vertically or horizontal Efficiency its light weight Not Great For: Aligning controls Overlapping elements
- 13. Choosing Layouts Layout containers dont have scrolling built in but just wrap your content in a scrollview. Great for: Adding scrolling to a control which could grow larger than the page.
- 14. Choosing Layouts Great for: Aligning Controls Responsive Design Overlapping elements Root layouts
- 15. Choosing Layouts Great for: Responsive Wrapping Staggered Lists
- 16. Choosing Layouts Great for: Pixel perfect layout Overlapping controls Total control
- 17. Mix and Match There is more than one way to skin a cat. The real question, is which is the most efficient. Quite often you will be combining different layouts
- 18. Layout Properties HorizontalOptions, VerticalOptions WidthRequest, HeightRequest Margin Padding Spacing (row spacing, column spacing)
- 19. VisualElement Property TranslationX, TranslationY Scale Rotation RotationX RotationY Opacity Other Layout Properties
- 20. Parallax Effects
- 22. Animations
- 23. VisualElement Property Animation Extension TranslationX, TranslationY TranslateTo Scale ScaleTo, RelScaleTo Rotation RotateTo, RelRotateTo, RotationX RotateXTo RotationY RotateYTo Opacity FadeTo Animation Extensions
- 26. They are just tasks
- 30. Coordinating Animations Boss Mode
- 33. Lottie
- 34. SkiaSharp For when you need to take control of rendering but want to do it in a cross platform way.
- 35. Animating Skia
- 36. AnimatingSkia
- 37. Libraries you should know
- 38. Favorites SkiaSharp PancakeView - Xamarin.Forms.PancakeView FFImageLoading + SVG + Transformations DebugRainbows - Xamarin.Forms.DebugRainbows SharedTransitions - Xamarin.Plugin.SharedTransitions Lottie LottieXamarin CardsView Popups - UserDialogs
- 39. Shameless Plug