Xamarin.Forms or Write Once, Run Anywhere

• Microsoft & Xamarin MVP• @Tinytoot | www.tomwalker.codes

• Tom Walker

Meet Tom Walker | @Tinytoot• Founder @LdnOntNetDevs | LondonNetDevelopers.ca

• Windows Platform Development MVP • Xamarin MVP• Developer for 15+ years now focusing on mobile and web

frontend – Worked with large enterprises, startups and software

companies– Design & build internal enterprise and consumer facing

software

• Define the Problem• What is Xamarin.Forms• Explaining the parts• Demo – BBQ Receipes• Why I use Xamarin.Forms

Silo Approach

Define the Problem

Xamarin’s Unique Approach

• Native User Interface• Native Performance• Shared code across

platforms• C# & .NET Framework• Full API Coverage

With Xamarin.Forms: more code-sharing, native controls

Shared UI Code

Explaining the parts

Content MasterDetail Navigation Tabbed Carousel

Pages

Stack Absolute Relative Grid ContentView ScrollView Frame

Layouts

ActivityIndicator BoxView Button DatePicker Editor

Entry Image Label ListView Map

OpenGLView Picker ProgressBar SearchBar Slider

Stepper TableView TimePicker WebView EntryCell

ImageCell SwitchCell TextCell ViewCell

Controls

Xamarin’s Xaml

The equivalent Xamarin XAML is:

Consider this simple Microsoft XAML example:

Databinding Basics

Platform Specific XAML

Global Styles

<Application xmlns=http://xamarin.com/schemas/2014/forms xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="WorkingWithAppResources.App">

<Application.Resources> <ResourceDictionary>

<Style x:Key="labelStyle" TargetType="Label"> <Setter Property="TextColor" Value="Green"

/> </Style>

</ResourceDictionary> </Application.Resources>

</Application>

App.xaml

Let’s talk about Style

• Global Styles• Built in Styles• Behaviors• Triggers

Built in StylesThere are built-in styles available in the Device.Styles class:

• BodyStyle• CaptionStyle• ListItemDetailTextStyle• ListItemTextStyle• SubtitleStyle• TitleStyle

Built in Styles in C#

var mylabel = new Label {

Text = "This uses TitleStyle",

Style = Device.Styles.TitleStyle };

Built in Styles in XAML

<Label Text="This uses TitleStyle in XAML" Style="{DynamicResource TitleStyle}"/>

<Label Text="This uses SubtitleStyle in XAML" Style="{DynamicResource SubtitleStyle}"/>

Behaviors

<Entry Placeholder="Sample">  <Entry.Behaviors>    <local:SampleBehavior  />  </Entry.Behaviors></Entry>

1. XAML 2. inherit from Behavior<T> 

and override two methods OnAttachedTo(Tview) OnDetachingFrom(T view).

3. Write class behaviorpublic class SampleBehavior : Behavior{ ...}

Triggers

<Entry Placeholder="enter name"> <Entry.Triggers> <Trigger TargetType="Entry" Property="IsFocused" Value="True"> <Setter Property="BackgroundColor" Value="Yellow" /> </Trigger> </Entry.Triggers> </Entry>

Dependency Services1. Interface 2. Implementation on platform 

3. Calling in shared code

public interface ITextToSpeech { void Speak (string text); }

[assembly: Xamarin.Forms.Dependency (typeof (TextToSpeech_iOS))]

public class TextToSpeech_iOS : ITextToSpeech { public TextToSpeech_iOS () {}

public void Speak (string text) {

speak.Clicked += (sender, e) => { DependencyService.Get<ITextToSpeech>().Speak("Hello from Xamarin Forms"); };

Demo – BBQ time!

• C#• XAML• Rapid Prototyping• Speed to Market

Why I use Xamarin.Forms

• Define the Problem• What is Xamarin.Forms• Explaining the parts• Demo – BBQ Receipes• Why I use Xamarin.Forms

Recap

Thanks you Questions?

• Microsoft & Xamarin MVP• @Tinytoot | www.tomwalker.codes

• Tom Walker