O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
Introduction to 
Xamarin.Forms 
www.michaelridland.com @rid00z
Portable Class Libraries
Xamarin + Xamarin.Forms 
With Xamarin.Forms: 
more code-sharing, native controls 
Traditional Xamarin approach 
Shared UI ...
What’s Included 
 40+ Pages, Layouts, and Controls 
 Build from code behind or XAML 
 Two-way Data Binding 
 Navigatio...
Pages 
Content MasterDetail Navigation Tabbed Carousel 
www.michaelridland.com @rid00z
Layouts 
Stack Absolute Relative Grid ContentView ScrollView Frame 
www.michaelridland.com @rid00z
Controls 
ActivityIndicator BoxView Button DatePicker Editor 
Entry Image Label ListView Map 
OpenGLView Picker ProgressBa...
DEMO 1 
Displaying List of Data 
www.michaelridland.com @rid00z
Model-View-ViewModel 
Data 
Data 
View ViewModel Model 
How to display 
information 
What to display 
Flow of interaction ...
Model-View-ViewModel 
Data 
View ViewModel Model 
Events 
Xamarin.Forms 
Data Binding 
www.michaelridland.com @rid00z
Data Binding 
www.michaelridland.com @rid00z
Data Binding 
www.michaelridland.com @rid00z
Data Binding 
www.michaelridland.com @rid00z
Data Binding 
www.michaelridland.com @rid00z
DEMO 2 
Stocks App 
www.michaelridland.com @rid00z
www.michaelridland.com @rid00z
Extensibility 
Custom Renderer 
Easily subclass any control you wish to 
customize. 
Add your own custom controls. 
Ad...
Extensibility 
Standard Entry Control 
www.michaelridland.com @rid00z
Extensibility 
Step 1: Custom Xamarin.Forms Control 
www.michaelridland.com @rid00z
Extensibility 
Step 2: Use Custom Control in our shared Pages 
www.michaelridland.com @rid00z
Extensibility 
Step 3: Implement Custom Renderer 
www.michaelridland.com @rid00z
Extensibility 
Step 4: Export Renderer 
www.michaelridland.com @rid00z
Extensibility 
Dependency Service 
Lets shared code access platform-specific SDK features via an Interface 
implementati...
Extensibility 
Step 1: Interface 
www.michaelridland.com @rid00z
Extensibility 
Step 2: Implement on each Platform 
www.michaelridland.com @rid00z
Extensibility 
Step 3: Register with Dependency Service 
www.michaelridland.com @rid00z
Extensibility 
Step 4: Access from shared code 
www.michaelridland.com @rid00z
DEMO 3 
Stocks App + 
Text to Speech 
www.michaelridland.com @rid00z
Animations API 
www.michaelridland.com @rid00z
www.michaelridland.com @rid00z
Navigation 
Root Page: 
NavigationPage – Gives each page an INavigation 
Standard Navigation 
Navigation.PushAsync(pag...
Messaging Center 
MessagingCenter.Subscribe<T>(object subscriber, string message, Action<T> callback); 
MessagingCenter....
Messaging Center 
Master Page: 
Detail Page: 
www.michaelridland.com @rid00z
Xamarin.Forms 
My Experiences and Tips 
www.michaelridland.com @rid00z
Good Parts 
Fast and Easy to Create Cross Platform UI 
Elements 
Some good features/extensibility points - custom 
rende...
Not so good parts 
At the moment it still stuffers from common denominator. e.g. 
Save and Cancel are different on Androi...
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 th...
Tip 2. Prototype 
Prototype your app in Xamarin.Forms.. see if it’s going to work… 
Traditional Xamarin.iOS and Xamarin.An...
Tip 3. Xamarin.Forms.Device.StartTimer 
www.michaelridland.com @rid00z
Tip 4. StackLayout, BoxView to style forms 
www.michaelridland.com @rid00z
Tip 5.Preview PETZOLD’s Xamarin.Forms 
Book 
http://blogs.msdn.com/b/microsoft_press/archive/2014/10/06/www.michaelridland...
Tip 6. Xamarin.Forms.Labs 
Fill some gaps in Xamarin.Forms… 
Labs Demo! 
(*Labs is really labs code, recommended to work o...
Tip 6. Xamarin.Forms.Labs 
What else is there? 
- HybridWebView can be useful when used Razor! 
- INetwork service get the...
Tip 7. Giving back to Xamarin.Forms.Labs 
We need you! 
- Fork Xamarin.Forms.Labs in GitHub 
- Clone to your local machine...
Tip 8. Bindable Property code template 
public static readonly BindableProperty $Name$Property 
= BindableProperty.Create<...
Tip 9. Xamarin Hack Day Sydney 
Xamarin Hack Day Sat 6th Dec 
www.xamarinhackday.com 
Please come along for a great day! 
...
Tip 10. Layer Views using AbsoluteLayout 
www.michaelridland.com @rid00z
Resources 
Documentation 
http://developer.xamarin.com/guides/cross-platform/xamarin-forms/ 
XAML Documentation 
http:...
Q & A 
Find Me: 
rid00z@gmail.com 
www.michaelridland.com @rid00z
Próximos SlideShares
Carregando em…5
×

Introduction to Xamarin.Forms and Lessons Learnt

2.241 visualizações

Publicada em

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.

Publicada em: Tecnologia
  • Entre para ver os comentários

  • Seja a primeira pessoa a gostar disto

Introduction to Xamarin.Forms and Lessons Learnt

  1. 1. Introduction to Xamarin.Forms www.michaelridland.com @rid00z
  2. 2. Portable Class Libraries
  3. 3. Xamarin + Xamarin.Forms With Xamarin.Forms: more code-sharing, native controls Traditional Xamarin approach Shared UI Code www.michaelridland.com @rid00z
  4. 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. 5. Pages Content MasterDetail Navigation Tabbed Carousel www.michaelridland.com @rid00z
  6. 6. Layouts Stack Absolute Relative Grid ContentView ScrollView Frame www.michaelridland.com @rid00z
  7. 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. 8. DEMO 1 Displaying List of Data www.michaelridland.com @rid00z
  9. 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. 10. Model-View-ViewModel Data View ViewModel Model Events Xamarin.Forms Data Binding www.michaelridland.com @rid00z
  11. 11. Data Binding www.michaelridland.com @rid00z
  12. 12. Data Binding www.michaelridland.com @rid00z
  13. 13. Data Binding www.michaelridland.com @rid00z
  14. 14. Data Binding www.michaelridland.com @rid00z
  15. 15. DEMO 2 Stocks App www.michaelridland.com @rid00z
  16. 16. www.michaelridland.com @rid00z
  17. 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. 18. Extensibility Standard Entry Control www.michaelridland.com @rid00z
  19. 19. Extensibility Step 1: Custom Xamarin.Forms Control www.michaelridland.com @rid00z
  20. 20. Extensibility Step 2: Use Custom Control in our shared Pages www.michaelridland.com @rid00z
  21. 21. Extensibility Step 3: Implement Custom Renderer www.michaelridland.com @rid00z
  22. 22. Extensibility Step 4: Export Renderer www.michaelridland.com @rid00z
  23. 23. Extensibility Dependency Service Lets shared code access platform-specific SDK features via an Interface implementation www.michaelridland.com @rid00z
  24. 24. Extensibility Step 1: Interface www.michaelridland.com @rid00z
  25. 25. Extensibility Step 2: Implement on each Platform www.michaelridland.com @rid00z
  26. 26. Extensibility Step 3: Register with Dependency Service www.michaelridland.com @rid00z
  27. 27. Extensibility Step 4: Access from shared code www.michaelridland.com @rid00z
  28. 28. DEMO 3 Stocks App + Text to Speech www.michaelridland.com @rid00z
  29. 29. Animations API www.michaelridland.com @rid00z
  30. 30. www.michaelridland.com @rid00z
  31. 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. 32. Messaging Center MessagingCenter.Subscribe<T>(object subscriber, string message, Action<T> callback); MessagingCenter.Send(T item, string message); www.michaelridland.com @rid00z
  33. 33. Messaging Center Master Page: Detail Page: www.michaelridland.com @rid00z
  34. 34. Xamarin.Forms My Experiences and Tips www.michaelridland.com @rid00z
  35. 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. 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. 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. 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. 39. Tip 3. Xamarin.Forms.Device.StartTimer www.michaelridland.com @rid00z
  40. 40. Tip 4. StackLayout, BoxView to style forms www.michaelridland.com @rid00z
  41. 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. 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. 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. 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. 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. 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. 47. Tip 10. Layer Views using AbsoluteLayout www.michaelridland.com @rid00z
  48. 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. 49. Q & A Find Me: rid00z@gmail.com www.michaelridland.com @rid00z

×