Introduction to Xamarin.Forms

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/)

Q & A

Find Me: @BradPillow | www.pillowsoft.com [email protected]

photo