Download - Introduction to Xamarin.Forms
![Page 1: Introduction to Xamarin.Forms](https://reader036.vdocuments.us/reader036/viewer/2022062313/559aa1481a28ab02098b4770/html5/thumbnails/1.jpg)
Introduction to Xamarin.Forms
Presented to the! Indianapolis .NET Mobile !
Developers Group,!by Brad Pillow!PillowSoft LLC
![Page 2: Introduction to Xamarin.Forms](https://reader036.vdocuments.us/reader036/viewer/2022062313/559aa1481a28ab02098b4770/html5/thumbnails/2.jpg)
Presentation
First Xamarin’s Forms Overview A bit more on Xamarin.Forms…
2
![Page 3: Introduction to Xamarin.Forms](https://reader036.vdocuments.us/reader036/viewer/2022062313/559aa1481a28ab02098b4770/html5/thumbnails/3.jpg)
Xamarin + Xamarin.FormsWith Xamarin.Forms:
more code-sharing, native controlsTraditional Xamarin approach
Shared UI Code
![Page 4: Introduction to Xamarin.Forms](https://reader036.vdocuments.us/reader036/viewer/2022062313/559aa1481a28ab02098b4770/html5/thumbnails/4.jpg)
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
![Page 5: Introduction to Xamarin.Forms](https://reader036.vdocuments.us/reader036/viewer/2022062313/559aa1481a28ab02098b4770/html5/thumbnails/5.jpg)
Pages
Content MasterDetail Navigation Tabbed Carousel
![Page 6: Introduction to Xamarin.Forms](https://reader036.vdocuments.us/reader036/viewer/2022062313/559aa1481a28ab02098b4770/html5/thumbnails/6.jpg)
Layouts
Stack Absolute Relative Grid ContentView ScrollView Frame
Only used as a base classA bit like AutoLayout on iOS
![Page 7: Introduction to Xamarin.Forms](https://reader036.vdocuments.us/reader036/viewer/2022062313/559aa1481a28ab02098b4770/html5/thumbnails/7.jpg)
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
![Page 8: Introduction to Xamarin.Forms](https://reader036.vdocuments.us/reader036/viewer/2022062313/559aa1481a28ab02098b4770/html5/thumbnails/8.jpg)
DEMO 1Displaying List of Data
![Page 9: Introduction to Xamarin.Forms](https://reader036.vdocuments.us/reader036/viewer/2022062313/559aa1481a28ab02098b4770/html5/thumbnails/9.jpg)
Model-View-ViewModel
ModelView ViewModel
How to display information
What to display Flow of interaction
Business Logic Data objects
Events
DataData
![Page 10: Introduction to Xamarin.Forms](https://reader036.vdocuments.us/reader036/viewer/2022062313/559aa1481a28ab02098b4770/html5/thumbnails/10.jpg)
Model-View-ViewModel
ModelView ViewModel
Xamarin.Forms Data Binding
Events
Data
![Page 11: Introduction to Xamarin.Forms](https://reader036.vdocuments.us/reader036/viewer/2022062313/559aa1481a28ab02098b4770/html5/thumbnails/11.jpg)
Data Binding
![Page 12: Introduction to Xamarin.Forms](https://reader036.vdocuments.us/reader036/viewer/2022062313/559aa1481a28ab02098b4770/html5/thumbnails/12.jpg)
Data Binding
![Page 13: Introduction to Xamarin.Forms](https://reader036.vdocuments.us/reader036/viewer/2022062313/559aa1481a28ab02098b4770/html5/thumbnails/13.jpg)
Data Binding
![Page 14: Introduction to Xamarin.Forms](https://reader036.vdocuments.us/reader036/viewer/2022062313/559aa1481a28ab02098b4770/html5/thumbnails/14.jpg)
Data Binding
![Page 15: Introduction to Xamarin.Forms](https://reader036.vdocuments.us/reader036/viewer/2022062313/559aa1481a28ab02098b4770/html5/thumbnails/15.jpg)
DEMO 2Stocks App
www.github.com/JamesMontemagno/MyStocks.Forms
![Page 16: Introduction to Xamarin.Forms](https://reader036.vdocuments.us/reader036/viewer/2022062313/559aa1481a28ab02098b4770/html5/thumbnails/16.jpg)
![Page 17: Introduction to Xamarin.Forms](https://reader036.vdocuments.us/reader036/viewer/2022062313/559aa1481a28ab02098b4770/html5/thumbnails/17.jpg)
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/
![Page 18: Introduction to Xamarin.Forms](https://reader036.vdocuments.us/reader036/viewer/2022062313/559aa1481a28ab02098b4770/html5/thumbnails/18.jpg)
Extensibility
▪ Standard Entry Control !!
![Page 19: Introduction to Xamarin.Forms](https://reader036.vdocuments.us/reader036/viewer/2022062313/559aa1481a28ab02098b4770/html5/thumbnails/19.jpg)
Extensibility
▪ Step 1: Custom Xamarin.Forms Control !!!!!!
![Page 20: Introduction to Xamarin.Forms](https://reader036.vdocuments.us/reader036/viewer/2022062313/559aa1481a28ab02098b4770/html5/thumbnails/20.jpg)
Extensibility
▪ Step 2: Use Custom Control in our shared Pages !!!!!!
![Page 21: Introduction to Xamarin.Forms](https://reader036.vdocuments.us/reader036/viewer/2022062313/559aa1481a28ab02098b4770/html5/thumbnails/21.jpg)
Extensibility
▪ Step 3: Implement Custom Renderer !!!!!!
![Page 22: Introduction to Xamarin.Forms](https://reader036.vdocuments.us/reader036/viewer/2022062313/559aa1481a28ab02098b4770/html5/thumbnails/22.jpg)
Extensibility
▪ Step 4: Export Renderer !!!!!!
![Page 23: Introduction to Xamarin.Forms](https://reader036.vdocuments.us/reader036/viewer/2022062313/559aa1481a28ab02098b4770/html5/thumbnails/23.jpg)
Extensibility
▪ Dependency Service ▪ Lets shared code access platform-specific SDK features via an
Interface implementation ▪ B.Pillow Note: This is more commonly know as the “Service Locator”
pattern. Not to be confused with dependency injection. !!
![Page 24: Introduction to Xamarin.Forms](https://reader036.vdocuments.us/reader036/viewer/2022062313/559aa1481a28ab02098b4770/html5/thumbnails/24.jpg)
Extensibility
▪ Step 1: Interface !!
![Page 25: Introduction to Xamarin.Forms](https://reader036.vdocuments.us/reader036/viewer/2022062313/559aa1481a28ab02098b4770/html5/thumbnails/25.jpg)
Extensibility
▪ Step 2: Implement on each Platform
![Page 26: Introduction to Xamarin.Forms](https://reader036.vdocuments.us/reader036/viewer/2022062313/559aa1481a28ab02098b4770/html5/thumbnails/26.jpg)
Extensibility
▪ Step 3: Register with Dependency Service
* B.Pillow Note: Finally, add this [assembly] attribute above the class (and outside any namespaces that have been defined), including any required using statements.
![Page 27: Introduction to Xamarin.Forms](https://reader036.vdocuments.us/reader036/viewer/2022062313/559aa1481a28ab02098b4770/html5/thumbnails/27.jpg)
Extensibility
▪ Step 4: Access from shared code
* B.Pillow Note: If you need more than service location/injection, like full IOC, then there area number of adapters for Xamarin.Forms for other IOC frameworks.
![Page 28: Introduction to Xamarin.Forms](https://reader036.vdocuments.us/reader036/viewer/2022062313/559aa1481a28ab02098b4770/html5/thumbnails/28.jpg)
DEMO 3Stocks App +Text to Speech
www.github.com/JamesMontemagno/MyStocks.Forms
![Page 29: Introduction to Xamarin.Forms](https://reader036.vdocuments.us/reader036/viewer/2022062313/559aa1481a28ab02098b4770/html5/thumbnails/29.jpg)
Animations API
![Page 30: Introduction to Xamarin.Forms](https://reader036.vdocuments.us/reader036/viewer/2022062313/559aa1481a28ab02098b4770/html5/thumbnails/30.jpg)
www.github.com/JamesMontemagno/FormsAnimations
![Page 31: Introduction to Xamarin.Forms](https://reader036.vdocuments.us/reader036/viewer/2022062313/559aa1481a28ab02098b4770/html5/thumbnails/31.jpg)
![Page 32: Introduction to Xamarin.Forms](https://reader036.vdocuments.us/reader036/viewer/2022062313/559aa1481a28ab02098b4770/html5/thumbnails/32.jpg)
![Page 33: Introduction to Xamarin.Forms](https://reader036.vdocuments.us/reader036/viewer/2022062313/559aa1481a28ab02098b4770/html5/thumbnails/33.jpg)
![Page 34: Introduction to Xamarin.Forms](https://reader036.vdocuments.us/reader036/viewer/2022062313/559aa1481a28ab02098b4770/html5/thumbnails/34.jpg)
www.github.com/JamesMontemagno/FormsAnimations
![Page 35: Introduction to Xamarin.Forms](https://reader036.vdocuments.us/reader036/viewer/2022062313/559aa1481a28ab02098b4770/html5/thumbnails/35.jpg)
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(); !!
![Page 36: Introduction to Xamarin.Forms](https://reader036.vdocuments.us/reader036/viewer/2022062313/559aa1481a28ab02098b4770/html5/thumbnails/36.jpg)
Messaging Center
▪ MessagingCenter.Subscribe<T>(object subscriber, string message, Action<T> callback); !
▪ MessagingCenter.Send(T item, string message); !
!!
![Page 37: Introduction to Xamarin.Forms](https://reader036.vdocuments.us/reader036/viewer/2022062313/559aa1481a28ab02098b4770/html5/thumbnails/37.jpg)
Messaging Center▪ Master Page: !!!!!!!!
▪ Detail Page: !
![Page 38: Introduction to Xamarin.Forms](https://reader036.vdocuments.us/reader036/viewer/2022062313/559aa1481a28ab02098b4770/html5/thumbnails/38.jpg)
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 !!!
![Page 39: Introduction to Xamarin.Forms](https://reader036.vdocuments.us/reader036/viewer/2022062313/559aa1481a28ab02098b4770/html5/thumbnails/39.jpg)
Beyond The Intro
![Page 40: Introduction to Xamarin.Forms](https://reader036.vdocuments.us/reader036/viewer/2022062313/559aa1481a28ab02098b4770/html5/thumbnails/40.jpg)
MVVM▪ MVVM Approaches ▪ ReactiveUI - MVVM via Reactive Extensions (Rx) - https://github.com/reactiveui/ReactiveUI
▪ MvvmCross with Xamarin.Forms Example - https://github.com/Cheesebaron/Xam.Forms.Mvx
▪ FodyWeavers - PropertyChangedNotification Weaving - http://arteksoftware.com/fody-propertychanged-xamarin-studio/
▪ MVVM Light - http://blog.falafel.com/learning-xamarin-mvvm-light-xamarin-forms/
▪ Tamarin (F# only, really MVC) - https://github.com/fsprojects/Tamarin !!!!
![Page 41: Introduction to Xamarin.Forms](https://reader036.vdocuments.us/reader036/viewer/2022062313/559aa1481a28ab02098b4770/html5/thumbnails/41.jpg)
Example code▪ Run Tracker (CoreLocation, SQLite, RelativeLayout) - https://github.com/alt234/simple-run
▪ Xamarin Control Cheat Sheet - http://blog.xamarin.com/cheat-sheet-for-top-mobile-app-controls/
▪ Drawit - https://github.com/MitchMilam/Drawit/tree/master ▪ CrossChat - chat application - https://github.com/EgorBo/CrossChat-Xamarin.Forms
▪ XamarinFormsReactiveUIExample - https://github.com/damiensawyer/XamarinFormsReactiveUIExample
▪ Xamarin.Forms Programming in F# - http://www.knowing.net/index.php/2014/08/27/xamarin-forms-programming-in-f/ !
!!!
![Page 42: Introduction to Xamarin.Forms](https://reader036.vdocuments.us/reader036/viewer/2022062313/559aa1481a28ab02098b4770/html5/thumbnails/42.jpg)
Useful PCL Libraries▪ Splat - x-platform geometry and mage handling - https://github.com/paulcbetts/splat
▪ Akavache - asynchronous, persistent key-value store- https://github.com/akavache/Akavache
▪ Fody - Extensible tool for weaving .net assemblies- https://github.com/Fody/Fody
▪ System.Drawing - cross-platform - not ready for prim time - https://github.com/mono/sysdrawing-coregraphics
▪ Fusillade - An opinionated HTTP library - https://github.com/paulcbetts/fusillade !
!!!!
![Page 43: Introduction to Xamarin.Forms](https://reader036.vdocuments.us/reader036/viewer/2022062313/559aa1481a28ab02098b4770/html5/thumbnails/43.jpg)
Tips▪ The Bait and Switch PCL Trick - http://log.paulbetts.org/the-bait-and-switch-pcl-trick/
▪ Platform Tweaks - very handy - http://developer.xamarin.com/guides/cross-platform/xamarin-forms/working-with/platform-specifics/ !
!!!!!
Device.OnPlatform( Android: () =>{ PositiveBalance = PositiveBalance.AddLuminosity(0.3); NegativeBalance = NegativeBalance.AddLuminosity(0.3); SubTitle = Color.FromRgb(115, 129, 130); }, WinPhone: () =>{ PositiveBalance = PositiveBalance.AddLuminosity(0.3); NegativeBalance = NegativeBalance.AddLuminosity(0.3); } );
![Page 44: Introduction to Xamarin.Forms](https://reader036.vdocuments.us/reader036/viewer/2022062313/559aa1481a28ab02098b4770/html5/thumbnails/44.jpg)
Xamarin-Forms-Labs - Part 1
Calendar Control (beta) ExtendedTabbedPage ImageButton (beta) ExtendedLabel (beta) ExtendedEntry (IOS) ExtendedViewCell (beta) ExtendedTextCell (beta) AutoComplete (beta) HybridWebView (alpha) Web Image (beta) GridView (IOS beta) RepeaterView (beta) SegmentedControlView (IOS beta) ExtendedScrollView (IOS beta) DynamicListView (beta) ExtendedContentView (beta) IconButton (IOS beta)
Available controlsText To Speech Device (battery info, device info, sensors, accelerometers) Phone Service (cellular network info, make phone calls) Geolocator Camera (Picture and Video picker, Take Picture, Take Video) Accelerometer Display Cache SoundService
Available services (Beta)
Calendar Control (beta) ExtendedTabbedPage ImageButton (beta) ExtendedLabel (beta) ExtendedEntry (IOS) ExtendedViewCell (beta) ExtendedTextCell (beta) AutoComplete (beta) HybridWebView (alpha) Web Image (beta) GridView (IOS beta) RepeaterView (beta) SegmentedControlView (IOS beta) ExtendedScrollView (IOS beta) DynamicListView (beta) ExtendedContentView (beta) IconButton (IOS beta)
Available Mvvm helpers (Beta)
![Page 45: Introduction to Xamarin.Forms](https://reader036.vdocuments.us/reader036/viewer/2022062313/559aa1481a28ab02098b4770/html5/thumbnails/45.jpg)
Xamarin-Forms-Labs - Part 2
Serialization (ServiceStackV3, ProtoBuf, JSON.Net) Caching (SQLLiteSimpleCache) Dependency Injection containers (TinyIOC, Autofac, NInject, SimpleInjector, Unity) Web (RestClient) Charting (Line, Bar & Pie) (Alpha)
Available Plugins (Beta)
https://github.com/XForms/Xamarin-Forms-Labs
![Page 46: Introduction to Xamarin.Forms](https://reader036.vdocuments.us/reader036/viewer/2022062313/559aa1481a28ab02098b4770/html5/thumbnails/46.jpg)
C# Video Demo
![Page 47: Introduction to Xamarin.Forms](https://reader036.vdocuments.us/reader036/viewer/2022062313/559aa1481a28ab02098b4770/html5/thumbnails/47.jpg)
C# Video Demo
![Page 48: Introduction to Xamarin.Forms](https://reader036.vdocuments.us/reader036/viewer/2022062313/559aa1481a28ab02098b4770/html5/thumbnails/48.jpg)
F# And Xamarin.Forms
Need latest version of Xamarin Studio Need latest F# plugin No templates yet, so clone this github project and modify the project xml by hand Use the beta PCL 78 F# Core Link to the facade assemblies for Monotouch, these vector PCL calls to correct namespaces in platform dll’s See this blog post: http://www.knowing.net/index.php/2014/08/27/xamarin-forms-programming-in-f/ If you do the above incorrectly, you will get errors with things like INotifyPropertyChanged not found, etc. No “shared projects” for F# yet, for now use combo of native and PCL
![Page 49: Introduction to Xamarin.Forms](https://reader036.vdocuments.us/reader036/viewer/2022062313/559aa1481a28ab02098b4770/html5/thumbnails/49.jpg)
F# Examplenamespace FSXF1 open System open MonoTouch.UIKit open MonoTouch.Foundation open Xamarin.Forms type App = class static member GetMainPage = let lbl = new Label() lbl.Text <- "Hello, F# Xam.Forms!" lbl.VerticalOptions <- LayoutOptions.CenterAndExpand lbl.HorizontalOptions <- LayoutOptions.CenterAndExpand let cp = new ContentPage() cp.Content <- lbl cp end [<Register("AppDelegate")>] type AppDelegate() = inherit UIApplicationDelegate() member val Window = null with get, set // This method is invoked when the application is ready to run. override this.FinishedLaunching(app, options) = this.Window <- new UIWindow(UIScreen.MainScreen.Bounds) Forms.Init() this.Window.RootViewController <- App.GetMainPage.CreateViewController() this.Window.MakeKeyAndVisible() true module Main = [<EntryPoint>] let main args = UIApplication.Main(args, null, "AppDelegate") 0 (from: http://www.knowing.net/index.php/2014/08/27/xamarin-forms-programming-in-f/)