Building out-of-the-ordinary UI's with Xamarin.Forms

Xamarin.Forms is a UI framework which helps you raise the bar even further when it comes to sharing code across multiple mobile platforms. It does so by providing abstractions over common UI elements that can be found in the underlying OS-es.

But what if you need to build a UI that is a little less ordinary, and does not consist of regular buttons and flat lists?

In this session I'll show a UI that is highly customized using custom renderers, and tell you about the options you have as a developer to expand on the out-of-the-box Xamarin.Forms experience. Using an app that is actually in the AppStores as an example, I'll run through code samples and tips & tricks on how to solve platform specific issues when working with Xamarin.Forms.

Transcript

1. Building Out of the Ordinary UI’s with Xamarin Forms Roy Cornelissen SDN Event 20-03-2015
2. Introduction Roy Cornelissen Lead Consultant https://nl.linkedin.com/RoyCornelissenNL @roycornelissen roycornelissen.wordpress.com Insider Champ
3. Xamarin.Forms Goal Raise the level of code reuse even further Shared app logic
4. Xamarin.Forms Goal Raise the level of code reuse even further by abstracting common UI paradigms into a library Shared app logic Shared UI
6. Page abstractions
7. Layout abstractions
8. Control abstractions
9. Native controls per platform http://tinyurl.com/xamarin-forms
10. Native controls per platform http://tinyurl.com/xamarin-forms
11. Native controls per platform http://tinyurl.com/xamarin-forms
12. UILabel Xamarin.Forms architecture Xamarin.Forms is a thin layer that translates XAML controls to native equivalents on each platform Label TextView TextBlock LabelRenderer LabelRenderer LabelRenderer
13. Xamarin.Forms architecture Xamarin.Forms is a thin layer that translates XAML controls to native equivalents on each platform ListView LongListSelector ListViewRenderer UITableView ListView ListViewRenderer ListViewRenderer http://tinyurl.com/xamarin-forms
14. Bridging platforms with Forms MyEntry Entry MyEntryRenderer_Windows MyEntryRenderer_Android MyEntryRenderer_iOS Xamarin.Platform Windows.EntryRenderer Xamarin.Platform Android.EntryRenderer Xamarin.Platform iOS.EntryRenderer Platform specific Shared code
15. PCL Typical project setup (PCL)
16. Shared Typical project setup (Shared)
17. Possible targets PCL / Shared Project Phone 8 Silverlight Windows Store Phone RT iPhone iPad Phone Tablet
18. Demo
19. Lightweight MVVM framework
20. Device services with IoC MyViewModel IMediaPicker WindowsMediaPicker: IMediaPicker AndroidMediaPicker: IMediaPicker iOSMediaPicker: IMediaPicker DependencyService.Get<IMediaPicker>(); [assembly: Dependency (typeof (WindowsMediaPicker))]
21. Platform tweaks Use Device class in shared code • Device.Styles Styles for controls, e.g. labels & lists • Device.GetNamedSize Font sizes • Device.Idiom Tablet or phone specific code / behavior • Device.OS Target platform specific code • Device.OnPlatform() Target platform specific values • Device.OpenUri() • Device.StartTimer() • Device.BeginInvokeOnMainThread() Xamarin.Forms.Device
22. Messaging center Messaging Center Master Subscribes Receives message Detail Sends message
23. Animations • Cross-platform animations • Async / Await API
25. Party time! We want an app for ~300 people They must be able to sign up for the party And post pictures to a gallery
29. Yes… well actually, we want it to look a little bit more festive. Something like…
33. • Sharing code is still possible • Using the Parse API • Dealing with data and pictures • We can still use Xamarin.Forms • App has pretty basic navigation flow • Although round and fancy, all in all they’re just buttons (abstraction) • We learned about bridging platform differences • Taking pictures • Using custom renderers to deal with the round buttons
34. PCL Shared
36. Demo
37. When to use Forms? • When you want to target multiple platforms • Data driven apps • UI requirements within feature set offered by Forms • Not much platform specific functionality • Code share is more important than custom UI • When you want to target only one platform • When you want to leverage unique capabilities of the platforms • Highly specialized/polished native UI’s • When you want to keep up with all new features per platform
38. Thanks! https://nl.linkedin.com/RoyCornelissenNL @roycornelissen roycornelissen.wordpress.com And by the way… We’re hiring!
39. http://www.xpirit.com Leading IT specialists in Microsoft Application Lifecycle Management, Cloud, Enterprise Mobility & Security