Your First Xamarin.Forms

App

Developer Evangelist@conceptdev

Craig Dunn

Forget Everything!

Meet Xamarin.FormsBuild native UIs for iOS, Android and Windows Phone

from a single, shared C# codebase.

Meet Xamarin.FormsBuild native UIs for iOS, Android and Windows Phone

from a single, shared C# codebase.

Meet Xamarin.FormsBuild native UIs for iOS, Android and Windows Phone

from a single, shared C# codebase.

Meet Xamarin.Forms

public class HelloWorld : ContentPage{ public HelloWorld () { var button = new Button { Text = "Say Hello" } ; button.Clicked += SayHelloClicked; Content = new StackLayout { new Label { Text = "Hello World" } , button }; } ! void SayHelloClicked (object s, EventArgs e) { // do something } }

<?xml version="1.0" encoding="UTF-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" x:Class="HelloForms.HelloWorld"> <StackLayout> <Label Text="Hello World" /> <Button Text="Say Hello" OnClick="SayHelloClicked" /> </StackLayout> </ContentPage>

!public partial class HelloWorld : ContentPage { public HelloWorld () { InitializeComponent (); } void SayHelloClicked (object s, EventArgs e) { // do something } }

C# XAML

Your first Xamarin.Forms app

■ File > New Project ■ Design a screen ■ Add some code ■ Run on iOS, Android,

& Windows Phone

■ Write shared C# code ■ Database, Web Services ■ Business Logic

■ Build native UIs ■ UIKit & Storyboards on iOS ■ AXML for Android ■ XAML for Windows Phone

■ Share 60-‐80% of the code

Using the native UI SDKs

Traditional Xamarin Development

Shared App LogicShared C# App Logic

UIKit Layout XAML

Shared App Logic

UIKit Layout XAML

Shared C# User Interface CodeShared C# App Logic

■ Use the same strategies for sharing ■ Database, Web Services ■ Business Logic

■ Build the UI with a single shared codebase

!

■ Share 99% of the code

Using Xamarin.FormsTo build the User Interface

■ Native look and feel ■ Code sharing/re-‐use ■ Access to native SDKs using Custom

Renderers and DependencyService ■ Camera, accelerometer, GPS, ■ NFC & more on Android ■ PassKit & more on iOS ■ Tiles & more on Windows Phone

Benefits

Using Xamarin.Forms

Shared App Logic

Shared C# User Interface Code

Shared C# App Logic

How Xamarin.Forms works

■ Anatomy of a Xamarin.Forms solution ■ Controls ■ Layouts ■ Pages

How Xamarin.Forms worksAnatomy of a Xamarin.Forms Solution■ PCL or Shared Project

How Xamarin.Forms worksAnatomy of a Xamarin.Forms Solution■ PCL or Shared Project ■ NuGet Package

How Xamarin.Forms worksAnatomy of a Xamarin.Forms Solution■ PCL or Shared Project ■ NuGet Package ■ App.cs

How Xamarin.Forms worksAnatomy of a Xamarin.Forms Solution■ PCL or Shared Project ■ NuGet Package ■ App.cs ■ Android app

How Xamarin.Forms worksAnatomy of a Xamarin.Forms Solution■ PCL or Shared Project ■ NuGet Package ■ App.cs ■ Android app ■ iOS app

How Xamarin.Forms worksAnatomy of a Xamarin.Forms Solution■ PCL or Shared Project ■ NuGet Package ■ App.cs ■ Android app ■ iOS app ■ Windows Phone app

How Xamarin.Forms works

var hello = new Label { Text = "Hello World" }; var ok = new Button { Text = "OK" };ok.Clicked += async (sender, e) => { await DisplayAlert("OK", "You said OK", "Done");};

!!<Label Text="Hello World" /> <Button Text="OK" OnClick="OkClicked" />

Controls

image: Balsamiq

How Xamarin.Forms worksLayoutsvar layout = new StackLayout { Orientation = StackOrientation.Vertical, Children = { hello, ok } };

<StackLayout Orientation="Vertical"> <Label x:Name="hello" Text="Hello World" /> <Button x:Name="ok" Text="OK" OnClick="OkClicked"/></StackLayout>

image: Balsamiq

How Xamarin.Forms worksPagespublic class HelloWorld : ContentPage{ public HelloWorld () { var button = new Button { Text = "OK" } ; button.Clicked += SayHelloClicked; Content = new StackLayout { new Label { Text = "Hello World" } , button }; } void SayHelloClicked (object s, EventArgs e) { // display an alert } } !<?xml version="1.0" encoding="UTF-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009 x:Class="HelloForms.HelloWorld"> <StackLayout Orientation="Vertical"> <Label x:Name="hello" Text="Hello World" /> <Button x:Name="ok" Text="OK" OnClick="OkClicked" /> </StackLayout> </ContentPage> image: Balsamiq

Platform RenderersTaking Xamarin.Forms UI to the people (﴾devices)﴿

?

??

Platform RenderersTaking Xamarin.Forms UI to the people

Xamarin.Forms brings common UX to everyone

iOS does not have a native control for the iPhone, however Xamarin.Forms uses UISplitViewController on iPad.

Android has a native 'drawer' control which Xamarin.Forms uses.

Windows Phone doesn’t have a comparable UI metaphor, so Xamarin.Forms provides an implementation.

MasterDetailPage

Xamarin.Forms brings common UX to everyone

iOS has the UINavigationController which Xamarin.Forms leverages.

Android has the navigation stack built in, but Xamarin.Forms adds the automatic 'back' button for API consistency.

Windows Phone also has a back-‐stack with hardware button, so Xamarin.Forms takes advantage of that.

NavigationPage

140 new Controls!Welcome to our new Xamarin.Forms partners

http://blog.xamarin.com/enterprise-‐component-‐vendors-‐join-‐xamarin.forms-‐ecosystem/

Your second Xamarin.Forms app

■ File > New Project ■ Design some screens ■ Add some code ■ Run on iOS, Android,

& Windows Phone

Dependency ServiceEasily call into platform-‐specific code■ In the common code

■ Code to an Interface

public interface ITextToSpeech{ void Speak (string text);} !!DependencyService.Get<ITextToSpeech>().Speak("Hello from Xamarin Forms");

!!!

Dependency ServiceEasily call into platform-‐specific code■ In the common code

■ Code to an Interface ■ Use DependencyService

public interface ITextToSpeech{ void Speak (string text);} !!DependencyService.Get<ITextToSpeech>().Speak("Hello from Xamarin Forms");

!!!

Dependency ServiceEasily call into platform-‐specific code■ In the common code

■ Code to an Interface ■ Use DependencyService

■ For each platform ■ implement the Interface

[assembly: Xamarin.Forms.Dependency (typeof (Speech))] public class Speech : ITextToSpeech{ public Speech () { } public void Speak (string text) { var speechSynthesizer = new AVSpeechSynthesizer (); var speechUtterance = new AVSpeechUtterance (text) { Rate = AVSpeechUtterance.MaximumSpeechRate/4, Voice = AVSpeechSynthesisVoice.FromLanguage ("en-US"), Volume = 0.5f, PitchMultiplier = 1.0f } ; speechSynthesizer.SpeakUtterance (speechUtterance); } }

Dependency ServiceEasily call into platform-‐specific code■ In the common code

■ Code to an Interface ■ Use DependencyService

■ For each platform ■ implement the Interface ■ use Dependency

attribute on the assembly

[assembly: Xamarin.Forms.Dependency (typeof (Speech))] public class Speech : ITextToSpeech{ public Speech () { } public void Speak (string text) { var speechSynthesizer = new AVSpeechSynthesizer (); var speechUtterance = new AVSpeechUtterance (text) { Rate = AVSpeechUtterance.MaximumSpeechRate/4, Voice = AVSpeechSynthesisVoice.FromLanguage ("en-US"), Volume = 0.5f, PitchMultiplier = 1.0f } ; speechSynthesizer.SpeakUtterance (speechUtterance); } }

Data BindingSync views and models■ Enables MVVM-‐style development ■ SetBinding in C# ■ {Binding} in XAML ■ also supports the Command pattern

Messaging CenterLoosely-‐coupled publish and subscribe

Subscriber PublisherMessaging Center

1. Register

3. Receive

2. Send Message

Custom RenderersExtend or Create Xamarin.Forms Controls■ Subclass the built-‐in Platform Renderers

!

■ Build your own Xamarin.Formscontrol and renderers(﴾eg. OxyPlot)﴿

!

■ Attend Jason’s Extending Xamarin.Forms talkon Thursday

Further Reading…

■ developer.xamarin.com ■ forums.xamarin.com ■ Creating Mobile Apps with

Xamarin.Forms -‐ Charles PetzoldPREVIEW EDITION available for all Evolve 2014 attendees

Today • Building cross platform applications -‐ Laurent Bugnion Tomorrow • XAML for Xamarin.Forms -‐ Charles Petzold • Extending Xamarin.Forms -‐ Jason Smith Friday • Xamarin.Forms is Cooler Than You Think -‐ Charles Petzold

!

Mini-‐hacks • Visit the Darwin Lounge

What’s next?

Your First Xamarin.Forms

App

Craig Dunn@conceptdev

craig@xamarin.com