This document discusses Xamarin and Xamarin Forms, which allow building native mobile apps for iOS, Android, and Windows using C# and XAML. Xamarin Forms provides a shared UI toolkit and allows developing a single cross-platform UI that renders natively on each device. While Xamarin Forms apps may be slower and larger than pure native apps, it promotes code reuse and developing by feature rather than platform. The document outlines considerations around whether to use Xamarin Forms and provides resources for getting started.

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

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

3. Building Apps Today

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

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

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

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

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

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

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

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

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

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

14. Architecture
from xamarin.com

15. Xamarin
from hanselman.com

16. Xamarin + Forms
from xamarin.com

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

18. 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>

19. 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" }
}
}
};

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

21. Same vs Different
- promote brand
- familiar platform

22. Familiar platform

23. 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>

24. 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;
}
}

25. 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();
}
}

26. 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>

27. 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…
}

28. 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>

29. 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;
}
}

30. - DependencyService
- MessagingCenter
- Navigation
Other features

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

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

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

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

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

36. - 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