Introduction to Xamarin.Forms
Presented to the! Indianapolis .NET Mobile !
Developers Group,!by Brad Pillow!PillowSoft LLC
Presentation
First Xamarin’s Forms Overview A bit more on Xamarin.Forms…
2
Xamarin + Xamarin.FormsWith Xamarin.Forms:
more code-sharing, native controlsTraditional Xamarin approach
Shared UI Code
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
Pages
Content MasterDetail Navigation Tabbed Carousel
Layouts
Stack Absolute Relative Grid ContentView ScrollView Frame
Only used as a base classA bit like AutoLayout on iOS
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
DEMO 1Displaying List of Data
Model-View-ViewModel
ModelView ViewModel
How to display information
What to display Flow of interaction
Business Logic Data objects
Events
DataData
Model-View-ViewModel
ModelView ViewModel
Xamarin.Forms Data Binding
Events
Data
Data Binding
Data Binding
Data Binding
Data Binding
DEMO 2Stocks App
www.github.com/JamesMontemagno/MyStocks.Forms
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/
Extensibility
▪ Standard Entry Control !!
Extensibility
▪ Step 1: Custom Xamarin.Forms Control !!!!!!
Extensibility
▪ Step 2: Use Custom Control in our shared Pages !!!!!!
Extensibility
▪ Step 3: Implement Custom Renderer !!!!!!
Extensibility
▪ Step 4: Export Renderer !!!!!!
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. !!
Extensibility
▪ Step 1: Interface !!
Extensibility
▪ Step 2: Implement on each Platform
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.
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.
DEMO 3Stocks App +Text to Speech
www.github.com/JamesMontemagno/MyStocks.Forms
Animations API
www.github.com/JamesMontemagno/FormsAnimations
www.github.com/JamesMontemagno/FormsAnimations
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(); !!
Messaging Center
▪ MessagingCenter.Subscribe<T>(object subscriber, string message, Action<T> callback); !
▪ MessagingCenter.Send(T item, string message); !
!!
Messaging Center▪ Master Page: !!!!!!!!
▪ Detail Page: !
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 !!!
Beyond The Intro
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 !!!!
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/ !
!!!
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 !
!!!!
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); } );
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)
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
C# Video Demo
C# Video Demo
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
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/)