Native cross-platform mobile apps with C# and Xamarin.Forms

Native
cross-platform
mobile apps with
C# and
Xamarin.Forms
Peter Major
Apr 25, 2015

Agenda
- Xamarin
- Xamarin Forms
- Should I use Xamarin Forms?

Objective-C / Swift - Xcode
Java - Eclipse / Android Studio
.NET - Visual Studio
Native

Hybrid
Code:
HTML + Javascript
Framework:
Ionic + Angular
Container:
Cordova, PhoneGap

What is Xamarin?
C# shared code
Compiled-to-native code
Native UI

What is Xamarin NOT?
Write once, run anywhere UI
Replacement for learning about each platform

Xamarin - iOS
AOT compiled
to ARM assembly
Mono framework included
Exposes CocoaTouch SDK

Xamarin - Android
Compiled to IL
Runs in MonoVM
Exposes Android SDK

Xamarin - Windows Phone
Compiled to IL
Uses built in phone runtime
No Mono / Xamarin SDK required

- Can I use my favorite SDK?
Yes
- Can I use my favorite Nuget package?
Sometimes
FAQ

- Are apps slower than native?
About the same *
- Are apps bigger than native?
Yes
FAQ
* https://medium.com/@harrycheung/mobile-app-performance-redux-e512be94f976

- Can I use async / await?
Yes
- Can I use “xyz” feature of .NET?
Yes *
FAQ

Xamarin + Forms
from xamarin.com

- WPF? Forms will be familiar.
- Develop by feature, not by platform
Xamarin Forms

Forms?
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage x:Class="EntryTest.Login">
<ContentPage.Content>
<StackLayout WidthRequest="200"
HorizontalOptions="Center"
VerticalOptions="Center">
<Entry Placeholder="Username" />
<Entry Placeholder="Password" />
<Button Text="Login"/>
</StackLayout>
</ContentPage.Content>
</ContentPage>

XAML or code
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage x:Class="EntryTest.Login">
<ContentPage.Content>
<StackLayout WidthRequest="200"
HorizontalOptions="Center"
VerticalOptions="Center">
<Entry Placeholder="Username" />
<Entry Placeholder="Password" />
<Button Text="Login"/>
</StackLayout>
</ContentPage.Content>
</ContentPage>
var page = new ContentPage
{
Content = new StackLayout
{
WidthRequest = 200,
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center,
Children =
{
new Entry { Placeholder = "Username" },
new Entry { Placeholder = "Password" },
new Button { Text = "Login" }
}
}
};

How it works
Forms controls
are converted by renderers
to native controls

Same vs Different
- promote brand
- familiar platform

Customization - Style
<Style x:Key="ButtonStyle" TargetType="Button">
<Setter Property="TextColor" Value="Black" />
<Setter Property="BorderWidth" Value="1" />
<Setter Property="BorderRadius" Value="3" />
<Setter Property="BackgroundColor" Value="{StaticResource ButtonBackgroundColor}" />
<Setter Property="BorderColor" Value="{StaticResource ButtonBorderColor}" />
<Setter Property="Font" Value="{StaticResource ButtonFont}" />
<Style.Triggers>
<Trigger Property="controls:ButtonExtensions.IsPrimary" Value="True" TargetType="Button">
<Setter Property="BackgroundColor" Value="{StaticResource PrimaryBackgroundColor}" />
<Setter Property="BorderColor" Value="{StaticResource PrimaryBorderColor}" />
</Trigger>
</Style.Triggers>
</Style>

Customization - Renderer
public class StandardEntryRenderer : EntryRenderer
{
protected override void OnElementChanged (ElementChangedEventArgs<Entry> e)
{
base.OnElementChanged (e);
if (e.OldElement == null) {
AddBorderToControl ();
Control.Started += (sender, args) => Control.Layer.BorderColor = YellowBorderColor.CGColor;
Control.Ended += (sender, args) => Control.Layer.BorderColor = GreyBorderColor.CGColor;
}
}
void AddBorderToControl()
{
Control.Layer.CornerRadius = 3;
Control.Layer.BorderWidth = 1;
Control.Layer.BorderColor = GreyBorderColor.CGColor;
}
}

Customization - Renderer
public class PullToRefreshViewRenderer : VisualElementRenderer<PullToRefreshView>
{
UIRefreshControl refreshControl;
protected override void OnElementChanged(ElementChangedEventArgs<PullToRefreshView> e)
{
base.OnElementChanged (e);
var renderer = Subviews [0] as ListViewRenderer;
if (renderer == null)
return;
refreshControl = new UIRefreshControl ();
refreshControl.ValueChanged += OnRefreshingChanged;
renderer.Control.AddSubview(refreshControl);
UpdateIsRefreshing();
}
}

Customization - per-platform
<OnPlatform x:TypeArguments="Font"
Android="sans-serif,None,21"
iOS="HelveticaNeue,None,16"
x:Key="TitleFont"/>
<Style x:Key="TitleLabel" TargetType="Label">
<Setter Property="AbsoluteLayout.LayoutBounds" Value="0,0,AutoSize,AutoSize" />
<Setter Property="AbsoluteLayout.LayoutFlags" Value="PositionProportional" />
<Setter Property="Font" Value="{StaticResource TitleFont}" />
<Setter Property="TextColor" Value="#333" />
</Style>

MVVM
<StackLayout>
<Entry Text="{Binding Username}"/>
<Entry Text="{Binding Password}"/>
<Button Text="Login"
Command="{Binding LoginCommand}"/>
</StackLayout>
public class LoginViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public Command LoginCommand { get; private set; }
string _username;
public string Username
{
get { return _username; }
set {
_username = value;
NotifyPropertyChanged(); }
}
// continued…
}

Attached Properties / Triggers
<Style x:Key="ButtonStyle" TargetType="Button">
<Setter Property="TextColor" Value="Black" />
<Setter Property="BorderWidth" Value="1" />
<Setter Property="BorderRadius" Value="3" />
<Setter Property="BackgroundColor" Value="{StaticResource ButtonBackgroundColor}" />
<Setter Property="BorderColor" Value="{StaticResource ButtonBorderColor}" />
<Setter Property="Font" Value="{StaticResource ButtonFont}" />
<Style.Triggers>
<Trigger Property="controls:ButtonExtensions.IsPrimary" Value="True" TargetType="Button">
<Setter Property="BackgroundColor" Value="{StaticResource PrimaryBackgroundColor}" />
<Setter Property="BorderColor" Value="{StaticResource PrimaryBorderColor}" />
</Trigger>
</Style.Triggers>
</Style>

Behaviors
<Entry Placeholder="Enter a System.Double">
<Entry.Behaviors>
<local:NumericValidationBehavior />
</Entry.Behaviors>
</Entry>
public class NumericValidationBehavior : Behavior<Entry>
{
protected override void OnAttachedTo(Entry entry)
{
entry.TextChanged += OnEntryTextChanged;
base.OnAttachedTo(entry);
}
protected override void OnDetachingFrom(Entry entry)
{
entry.TextChanged -= OnEntryTextChanged;
base.OnDetachingFrom(entry);
}
void OnEntryTextChanged(object sender, TextChangedEventArgs args)
{
double result;
bool isValid = Double.TryParse (args.NewTextValue, out result);
((Entry)sender).TextColor = isValid ? Color.Default : Color.Red;
}
}

- DependencyService
- MessagingCenter
- Navigation
Other features

- Are XF apps slower than native?
Yes
- Are XF apps bigger than native?
Yes
Speed / size redux

- New or Existing product?
- New or Existing team?
- Resources vs user experience
Should I use XF?

- Mockups
- Prototypes
And even if you don’t...

- One UI layout
- Very customizable
- Initial customization investment
- Develop by feature
- Very active development
Good

- Bugs, fix with renderers
- Renderers have “internal” code
- No XAML designer
- Open source?
Bad

- Getting started:
http://developer.xamarin.com/guides/cross-platform/getting_started/
- Licensing:
https://store.xamarin.com/
- Samples:
https://github.com/xamarin/monotouch-samples / https://github.com/xamarin/monodroid-
samples
- Forms documentation:
http://developer.xamarin.com/guides/cross-platform/xamarin-forms/
- Forms samples:
https://github.com/xamarin/xamarin-forms-samples
Resources

Native cross-platform mobile apps with C# and Xamarin.Forms

More Related Content

Viewers also liked (14)

Similar to Native cross-platform mobile apps with C# and Xamarin.Forms (20)

Recently uploaded (20)

Native cross-platform mobile apps with C# and Xamarin.Forms

Editor's Notes