Presentation: Introduction to Xamarin.Forms @ the Indy .Net Mobile Developers Meetup, September, 2014

1. Introduction to
Xamarin.Forms
Presented to the!
Indianapolis .NET Mobile !
Developers Group,!
by Brad Pillow!
PillowSoft LLC

2. Presentation
First Xamarin’s Forms Overview
A bit more on Xamarin.Forms…
2

3. Xamarin + Xamarin.Forms
With Xamarin.Forms:
more code-sharing, native controls
Traditional Xamarin approach
Shared UI Code

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

5. Pages
Content MasterDetail Navigation Tabbed Carousel

6. Layouts
Stack Absolute Relative Grid ContentView ScrollView Frame
A bit like AutoLayout on iOS Only used as a base class

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

8. DEMO 1
Displaying List of Data

9. Model-View-ViewModel
Data
View ViewModel Model
How to display
information
What to display
Flow of interaction
Business Logic
Data objects
Events
Data

10. Model-View-ViewModel
Data
View ViewModel Model
Events
Xamarin.Forms
Data Binding

11. Data Binding

12. Data Binding

13. Data Binding

14. Data Binding

15. DEMO 2
Stocks App
www.github.com/JamesMontemagno/MyStocks.Forms

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/

18. Extensibility
▪ Standard Entry Control
!!

19. Extensibility
▪ Step 1: Custom Xamarin.Forms Control
!
!
!
!
!!

20. Extensibility
▪ Step 2: Use Custom Control in our shared Pages
!
!
!
!
!!

21. Extensibility
▪ Step 3: Implement Custom Renderer
!
!
!
!
!!

22. Extensibility
▪ Step 4: Export Renderer
!
!
!
!
!!

23. 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.
!!

24. Extensibility
▪ Step 1: Interface
!!

25. Extensibility
▪ Step 2: Implement on each Platform

26. 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.

27. 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.

28. DEMO 3
Stocks App +
Text to Speech
www.github.com/JamesMontemagno/MyStocks.Forms

29. Animations API

30. www.github.com/JamesMontemagno/FormsAnimations

34. www.github.com/JamesMontemagno/FormsAnimations

35. 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();
!!

36. Messaging Center
▪ MessagingCenter.Subscribe<T>(object subscriber, string message, Action<T> callback);
!
▪ MessagingCenter.Send(T item, string message);
!
!!

37. Messaging Center
▪ Master Page:
!!!!!!!!
▪ Detail Page:
!

38. 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
!!!

39. Beyond The Intro

40. 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
!
!!!

41. 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/
!
!
!!

42. 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
!
!
!!!

43. 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);
}
);

44. Xamarin-Forms-Labs - Part 1
Available controls
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 services (Beta)
Text 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 Mvvm helpers (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)

45. Xamarin-Forms-Labs - Part 2
Available Plugins (Beta)
Serialization (ServiceStackV3, ProtoBuf, JSON.Net)
Caching (SQLLiteSimpleCache)
Dependency Injection containers (TinyIOC, Autofac, NInject, SimpleInjector, Unity)
Web (RestClient)
Charting (Line, Bar & Pie) (Alpha)
https://github.com/XForms/Xamarin-Forms-Labs

46. C# Video Demo

47. C# Video Demo

48. 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

49. F# Example
namespace 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/)

50. Find Me:
@BradPillow | www.pillowsoft.com
presentations@pillowsoft.com
photo
Q & A