Introduction to Xamarin.Forms and Lessons Learnt
•Download as PPTX, PDF•
1 like•2,365 views
Presentation given a Sydney Mobile .NET usersgroup. First part is an introduction to Xamarin.Forms and the second half with some tips and tricks. If you have any questions or need any help with Xamarin.Forms, find me over at http://www.michaelridland.com I'm always happy to help.
Recommended
Recommended
More Related Content
Similar to Introduction to Xamarin.Forms and Lessons Learnt
Similar to Introduction to Xamarin.Forms and Lessons Learnt (20)
Recently uploaded
Recently uploaded (20)
Introduction to Xamarin.Forms and Lessons Learnt
- 1. Introduction to Xamarin.Forms www.michaelridland.com @rid00z
- 3. Xamarin + Xamarin.Forms With Xamarin.Forms: more code-sharing, native controls Traditional Xamarin approach Shared UI Code www.michaelridland.com @rid00z
- 4. What’s Included 40+ Pages, Layouts, and Controls Build from code behind or XAML Two-way Data Binding Navigation Animation API Dependency Service Messaging Center Shared UI Code www.michaelridland.com @rid00z
- 5. Pages Content MasterDetail Navigation Tabbed Carousel www.michaelridland.com @rid00z
- 6. Layouts Stack Absolute Relative Grid ContentView ScrollView Frame www.michaelridland.com @rid00z
- 7. Controls ActivityIndicator BoxView Button DatePicker Editor Entry Image Label ListView Map OpenGLView Picker ProgressBar SearchBar Slider Stepper TableView TimePicker WebView EntryCell ImageCell SwitchCell TextCell ViewCell www.michaelridland.com @rid00z
- 8. DEMO 1 Displaying List of Data www.michaelridland.com @rid00z
- 9. Model-View-ViewModel Data Data View ViewModel Model How to display information What to display Flow of interaction Business Logic Data objects Events www.michaelridland.com @rid00z
- 10. Model-View-ViewModel Data View ViewModel Model Events Xamarin.Forms Data Binding www.michaelridland.com @rid00z
- 11. Data Binding www.michaelridland.com @rid00z
- 12. Data Binding www.michaelridland.com @rid00z
- 13. Data Binding www.michaelridland.com @rid00z
- 14. Data Binding www.michaelridland.com @rid00z
- 15. DEMO 2 Stocks App www.michaelridland.com @rid00z
- 17. Extensibility Custom Renderer Easily subclass any control you wish to customize. Add your own custom controls. Add custom bindable properties http://developer.xamarin.com/guides/cross-platform/ xamarin-forms/custom-renderer/ www.michaelridland.com @rid00z
- 18. Extensibility Standard Entry Control www.michaelridland.com @rid00z
- 19. Extensibility Step 1: Custom Xamarin.Forms Control www.michaelridland.com @rid00z
- 20. Extensibility Step 2: Use Custom Control in our shared Pages www.michaelridland.com @rid00z
- 21. Extensibility Step 3: Implement Custom Renderer www.michaelridland.com @rid00z
- 22. Extensibility Step 4: Export Renderer www.michaelridland.com @rid00z
- 23. Extensibility Dependency Service Lets shared code access platform-specific SDK features via an Interface implementation www.michaelridland.com @rid00z
- 24. Extensibility Step 1: Interface www.michaelridland.com @rid00z
- 25. Extensibility Step 2: Implement on each Platform www.michaelridland.com @rid00z
- 26. Extensibility Step 3: Register with Dependency Service www.michaelridland.com @rid00z
- 27. Extensibility Step 4: Access from shared code www.michaelridland.com @rid00z
- 28. DEMO 3 Stocks App + Text to Speech www.michaelridland.com @rid00z
- 29. Animations API www.michaelridland.com @rid00z
- 31. Navigation Root Page: NavigationPage – Gives each page an INavigation Standard Navigation Navigation.PushAsync(page: nextPage); Navigation.PopAsync(); Modal Navigation Navigation.PushModalAsync(page: modalPage); Navigation.PopModalAsync(); www.michaelridland.com @rid00z
- 32. Messaging Center MessagingCenter.Subscribe<T>(object subscriber, string message, Action<T> callback); MessagingCenter.Send(T item, string message); www.michaelridland.com @rid00z
- 33. Messaging Center Master Page: Detail Page: www.michaelridland.com @rid00z
- 34. Xamarin.Forms My Experiences and Tips www.michaelridland.com @rid00z
- 35. Good Parts Fast and Easy to Create Cross Platform UI Elements Some good features/extensibility points - custom renderers, message centre etc. The idea and concept is great. But we all need to pitch in to make it better, aka Xamarin.Forms.Labs. www.michaelridland.com @rid00z
- 36. Not so good parts At the moment it still stuffers from common denominator. e.g. Save and Cancel are different on Android, iOS and WP. The coverage of UI elements isn’t huge Tiny Cuts - No Bordering, ToolBarButtons only on rightside, Only TapGestureRegonizers, Picker not databound www.michaelridland.com @rid00z
- 37. Tip 1. Don’t fight the framework ‘I want Cancel here because that’s how I do it in iOS’… ‘I want swipe cell because that’s how I do it in iOS’… If you use Xamarin.Forms, try not to bring in pre conceptions of how you want your UI to be. You can build nice UI’s with Xamarin.Forms but you just need to be within it’s constraints and no swipe cells. www.michaelridland.com @rid00z
- 38. Tip 2. Prototype Prototype your app in Xamarin.Forms.. see if it’s going to work… Traditional Xamarin.iOS and Xamarin.Android is still great if you want a amazing experience on all platforms. www.michaelridland.com @rid00z
- 39. Tip 3. Xamarin.Forms.Device.StartTimer www.michaelridland.com @rid00z
- 40. Tip 4. StackLayout, BoxView to style forms www.michaelridland.com @rid00z
- 41. Tip 5.Preview PETZOLD’s Xamarin.Forms Book http://blogs.msdn.com/b/microsoft_press/archive/2014/10/06/www.michaelridland.com @rid00z
- 42. Tip 6. Xamarin.Forms.Labs Fill some gaps in Xamarin.Forms… Labs Demo! (*Labs is really labs code, recommended to work off the code) www.michaelridland.com @rid00z
- 43. Tip 6. Xamarin.Forms.Labs What else is there? - HybridWebView can be useful when used Razor! - INetwork service get the InternetConnectionStatus (WIIFI)? - Photo library/take a photo - Extended TextFields - Fonts and Border properties - + More www.michaelridland.com @rid00z
- 44. Tip 7. Giving back to Xamarin.Forms.Labs We need you! - Fork Xamarin.Forms.Labs in GitHub - Clone to your local machine - Build the Xamarin.Forms.Labs Project - Add the projects into your project - add new features - Do a pull Request back into the Project www.michaelridland.com @rid00z
- 45. Tip 8. Bindable Property code template public static readonly BindableProperty $Name$Property = BindableProperty.Create<$owner$, $type$>(p => p.$Name$, default($type$)); public $type$ $Name$ { get { return ($type$)GetValue($Name$Property); } set { SetValue($Name$Property, value); } } www.michaelridland.com @rid00z
- 46. Tip 9. Xamarin Hack Day Sydney Xamarin Hack Day Sat 6th Dec www.xamarinhackday.com Please come along for a great day! * Want to present? Twitter me @rid00z www.michaelridland.com @rid00z
- 47. Tip 10. Layer Views using AbsoluteLayout www.michaelridland.com @rid00z
- 48. Resources Documentation http://developer.xamarin.com/guides/cross-platform/xamarin-forms/ XAML Documentation http://developer.xamarin.com/guides/cross-platform/xamarin-forms/xaml-for- xamarin-forms/ Samples https://github.com/xamarin/xamarin-forms-samples www.michaelridland.com @rid00z
- 49. Q & A Find Me: rid00z@gmail.com www.michaelridland.com @rid00z
Editor's Notes
- Xamarin Forms is a new set of APIs allowing you to quickly and easily write shared User Interface code that is still rendered natively on each platform, while still providing direct access to the underlying SDKs if you need it.
- We see here the Xamarin approach we talked about earlier This enables you to be highly productive, share code, but build out UI on each platform and access platform APIs With Xamarin.Forms you now have a nice Shared UI Code layer, but still access to platform APIs You can start from native, pick a few screens, or start with forms, and replace with native later
- First you have a set of pages for each screen of your application There are things like Content, and MasterDetail which gives you a nice flyout With a tabbed view you get the correct look on each platform iOS on bottom, Android on top, and on WP you have a Pivot control
- Inside of a page are layouts A lot of options from something simple like a stack panel to complex and powerful grids
- You have more than 40 controls, layouts, and pages to mix and match from. These are all of the controls you have out of the box, you can of course create your own. What is unique is you get the native control and have access to it. Consider an Entry Field On iOS it is mapped to UITextField Android it is EditText Windows Phoneit is a TextBox
- Let’s take a look at getting started with Xamarin.Forms and displaying some data across all platforms.
- Xamarin.Forms was build with MVVM in mind. It is optional, but if you are used to an MVVM style of programming you are going to feel right at home. MVVM is an architectural pattern that is used to abstract our Views/Pages from our Business Logic Let’s look how it works. Our View just knows how to display Information It can pass data and event back and forth to the ViewModel The ViewModel simply tells the View what to display and can accept events. The model sits off to the side and only our ViewModel interact with it to gather data (maybe from the database or REST services)
- The “Magic” of MVVM is with a Data Binding framework. This allows us to change data in the ViewModel and our View automatically reacts. This is build into WPF/Windows Phone/Windows Store, but does not exist for Android or iOS. However, Xamarin.Forms has a full data binding framework built right in. Let’s take a look.
- The core of data binding comes with “INotifyPropertyChanged” This allows any UI element to subscribe and “Bind” to a property and react when the “PropertyChanged” method is raised.
- When we update a field such as FirstName we trigger a property changed and anyone subscribed gets notified.
- Here we are creating a label and the “TextProperty” is being bound to the “FirstName” property in the ViewModel.
- We can also setup 2 way data binding so if our view update so does our ViewModel and vise versa.
- Let’s take a look at some data binding in action, which we will access through XAML!
- The extensibility framework in Xamarin.Forms enables us to 1.) Customize any of the built in controls 2.) Use any custom control that we might have developed
- This is a standard Entry control in Xamarin.Forms. As we can see it renders a native iOS TextField for text entry. Let’s say we want to change the look and feel of the control past what is exposed. Well we can create our own version called “MyEntry”
- First we will create our own Xamarin.Forms control in our shared code. In this case we are simply inheriting from “Entry”, however you can even inherit from View which can be anything. Optional: Add custom properties and bindings
- We can simply reference and use this new custom control like any of the other control that come out of the box.
- As I mentioned earlier each Xamarin.Forms control has a custom renderer that knows how to “render” and display the native control. Each Xamarin.Forms control has a Renderer that we can inherit from (including “View” for our custom controls that we might have purchased or created). Here we will inherit from EntryRenderer and customize the actual UITextField control and set the border style and background color.
- The last thing to do is add an export assembly attribute and we are done!
- First step for using the the Dependency service is to setup an Interface that is accessible from your shared code.
- For each platform we plan to support (iOS, Android, and Windows Phone), we will implement the native functionality. For instance here, we are using AVSpeechSynthesizer on iOS to perform TextToSpeech
- The built in dependency service uses an assembly attribute to know what class to use for the interface implementation.
- The dependency service allows you to easily resolve your interface for the platform specific implementation. Here we are playing back “Hello from Xamarin Forms” when we click a button.
- Xamarin.Forms has a complete cross platform animations api as well. It takes advantage of the underlying APIs on each platform such as CoreAnimation on iOS. Additionally, it is completely asynchronous with an async/await api.