apac webinar: say hello to xamarin.forms
TRANSCRIPT
Traditional Xamarin Development
Using the Native UI SDKs
Shared UI Code!
■ Build native UIs ■ UIKit & Storyboards on iOS ■ AXML for Android ■ XAML for Windows Phone
■ Write shared C# code ■ Database, Web Services ■ Business Logic
■ Share 60-80% of the code
UIKit Layout XAML
Using Xamarin.Forms
Shared UI Code !
To Build the User Interface■ Use the same strategies for sharing
■ Database, Web Services ■ Business Logic
■ Build the UI with a single shared codebase
■ Share 99% of the code
UIKit Layout XAML
Using Xamarin.Forms
Shared UI Code !
■ Code sharing/re-use ■ Native look and feel ■ 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 UIKit Layout XAML
Shared C# User Interface Code
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.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
Demo■ File > New Project ■ Create a screen ■ Add some code ■ Run on iOS, Android,
& Windows Phone
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 Class
How Xamarin.Forms worksAnatomy of a Xamarin.Forms Solution■ PCL or Shared Project ■ NuGet Package ■ App Class ■ Android app
How Xamarin.Forms worksAnatomy of a Xamarin.Forms Solution■ PCL or Shared Project ■ NuGet Package ■ App Class ■ Android app ■ iOS app
How Xamarin.Forms worksAnatomy of a Xamarin.Forms Solution■ PCL or Shared Project ■ NuGet Package ■ App Class ■ Android app ■ iOS app ■ Windows Phone app
Platform RenderersTaking Xamarin.Forms UI to the people (devices)
?
??
Platform RenderersTaking Xamarin.Forms UI to the people
Platform RenderersTaking Xamarin.Forms UI to the people
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
Demo■ Write Platform Specific Code
Dependency ServiceEasily call into platform-specific code■ In the common code
■ Code to an Interface
public interface ITextToSpeech{ void Speak (string text); }
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
Custom RenderersExtend or Create Xamarin.Forms Controls■ Subclass the built-in Platform Renderers
■ Build your own Xamarin.Forms control and renderers(eg. OxyPlot)
Further Reading…
■ developer.xamarin.com ■ forums.xamarin.com ■ Creating Mobile Apps with
Xamarin.Forms - Charles PetzoldAvailable as a FREE download
