Your First

Xamarin.Forms
App

Craig Dunn
Developer Evangelist
@conceptdev
Forget Everything!
 Meet Xamarin.Forms
Build native UIs for iOS, Android and Windows Phone
from a single, shared C# codebase.
 Meet Xamarin.Forms
Build native UIs for iOS, Android and Windows Phone
from a single, shared C# codebase.
 Meet Xamarin.Forms
Build native UIs for iOS, Android and Windows Phone
from a single, shared C# codebase.
 Meet Xamarin.Forms
C# XAML
<?xml version="1.0" encoding="UTF-8"?>
public class HelloWorld : ContentPage <ContentPage xmlns="http://xamarin.com/schemas/2014/fo
{ x:Class="HelloForms.HelloWorld">
public HelloWorld () <StackLayout>
{ <Label Text="Hello World" />
var button = new Button <Button Text="Say Hello"
{ Text = "Say Hello" } ; OnClick="SayHelloClicked" />
button.Clicked += SayHelloClicked; </StackLayout>
</ContentPage>
Content = new StackLayout {
new Label { Text = "Hello World" } , !
button
}; public partial class HelloWorld : ContentPage
} {
! public HelloWorld ()
void SayHelloClicked (object s, EventArgs e) {
{ InitializeComponent ();
// do something }
} void SayHelloClicked (object s, EventArgs e)
} {
// do something
}
}
Your first Xamarin.Forms app

File > New Project

Design a screen

Add some code

Run on iOS, Android,

& Windows Phone
Traditional Xamarin Development
Using the native UI SDKs

Write shared C# code

Database, Web Services UIKit Layout XAML

Business Logic

Build native UIs

SharedShared
C# AppApp
Logic
Logic

UIKit & Storyboards on iOS

AXML for Android

XAML for Windows Phone

Share 60-80% of the code

Using Xamarin.Forms
To build the User Interface

Use the same strategies for sharing

Database, Web Services UIKit Layout XAML

Business Logic
Shared C# User Interface Code

Build the UI with a single shared

codebase SharedShared
C# AppApp
Logic
Logic

Share 99% of the code

Using Xamarin.Forms
Benefits

Native look and feel

Code sharing/re-use
Shared C# User Interface Code

Access to native SDKs using Custom

Renderers and DependencyService

Camera, accelerometer, GPS, SharedShared
C# AppApp
Logic
Logic

NFC & more on Android

PassKit & more on iOS

Tiles & more on Windows Phone
How Xamarin.Forms works

Anatomy of a Xamarin.Forms solution

Controls

Layouts

Pages
How Xamarin.Forms works
Anatomy of a Xamarin.Forms Solution

PCL or Shared Project

How Xamarin.Forms works
Anatomy of a Xamarin.Forms Solution

PCL or Shared Project

NuGet Package
How Xamarin.Forms works
Anatomy of a Xamarin.Forms Solution

PCL or Shared Project

NuGet Package

App.cs
How Xamarin.Forms works
Anatomy of a Xamarin.Forms Solution

PCL or Shared Project

NuGet Package

App.cs

Android app
How Xamarin.Forms works
Anatomy of a Xamarin.Forms Solution

PCL or Shared Project

NuGet Package

App.cs

Android app

iOS app
How Xamarin.Forms works
Anatomy of a Xamarin.Forms Solution

PCL or Shared Project

NuGet Package

App.cs

Android app

iOS app

Windows Phone app

 How Xamarin.Forms works
Controls
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" /> image: Balsamiq
How Xamarin.Forms works
Layouts
var 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 works
Pages
public 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>

image: Balsamiq
</ContentPage>

Platform Renderers
Taking Xamarin.Forms UI to the people (devices)

?
?
Platform Renderers
Taking Xamarin.Forms UI to the people
Xamarin.Forms brings common UX to everyone
MasterDetailPage

iOS does not have a native control Android has a native 'drawer' Windows Phone doesnt have a
for the iPhone, however control which Xamarin.Forms uses. comparable UI metaphor, so
Xamarin.Forms uses Xamarin.Forms provides an
UISplitViewController on iPad. implementation.
Xamarin.Forms brings common UX to everyone
NavigationPage

Android has the navigation stack
built in, but Xamarin.Forms adds
iOS has the UINavigationController
the automatic 'back' button for API
which Xamarin.Forms leverages.
consistency.
Windows Phone also has a back-
stack with hardware button, so
Xamarin.Forms takes advantage of
that.
 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 Service
Easily call into platform-specific code

In the common code public interface ITextToSpeech

{
void Speak (string text);

Code to an Interface }
!
!
DependencyService.Get<ITextToSpeech>().Speak("Hello from Xamarin Forms");

!
!
!
Dependency Service
Easily call into platform-specific code

In the common code public interface ITextToSpeech

{
void Speak (string text);

Code to an Interface }
!

Use DependencyService
!

DependencyService.Get<ITextToSpeech>().Speak("Hello from Xamarin Forms");

!
!
!
Dependency Service
Easily call into platform-specific code

In the common code [assembly: Xamarin.Forms.Dependency (typeof (Speech))]

public class Speech : ITextToSpeech

Code to an Interface {
public Speech () { }

Use DependencyService public void Speak (string text)
{

For each platform var speechSynthesizer = new AVSpeechSynthesizer ();

var speechUtterance = new AVSpeechUtterance (text) {
Rate = AVSpeechUtterance.MaximumSpeechRate/4,

implement the Interface Voice = AVSpeechSynthesisVoice.FromLanguage ("en-US"),
Volume = 0.5f,
PitchMultiplier = 1.0f
} ;
speechSynthesizer.SpeakUtterance (speechUtterance);
}
}
Dependency Service
Easily call into platform-specific code

In the common code [assembly: Xamarin.Forms.Dependency (typeof (Speech))]

public class Speech : ITextToSpeech

Code to an Interface {
public Speech () { }

Use DependencyService public void Speak (string text)
{

For each platform var speechSynthesizer = new AVSpeechSynthesizer ();

var speechUtterance = new AVSpeechUtterance (text) {
Rate = AVSpeechUtterance.MaximumSpeechRate/4,

implement the Interface Voice = AVSpeechSynthesisVoice.FromLanguage ("en-US"),
Volume = 0.5f,

use Dependency PitchMultiplier = 1.0f
attribute on the } ;
speechSynthesizer.SpeakUtterance (speechUtterance);
assembly }
}
Data Binding
Sync views and models

Enables MVVM-style development

SetBinding in C#

{Binding} in XAML

also supports the Command pattern

Messaging Center
Loosely-coupled publish and subscribe

1. Register 2. Send Message

Messaging
Subscriber Publisher
Center

3. Receive
Custom Renderers
Extend or Create Xamarin.Forms Controls

Subclass the built-in Platform Renderers

!

Build your own Xamarin.Forms

control and renderers
(eg. OxyPlot)
!

Attend Jasons
Extending Xamarin.Forms talk
on Thursday
Further Reading

developer.xamarin.com

forums.xamarin.com

Creating Mobile Apps with

Xamarin.Forms - Charles Petzold
PREVIEW EDITION available for
all Evolve 2014 attendees
 Whats next?

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
 Your First
Xamarin.Forms
App
Craig Dunn
@conceptdev
craig@xamarin.com