Presentation (Dutch): https://www.youtube.com/watch?v=J7GHFf3M9Ow With the release of Xamarin 3.0, a new way has been created to develop the UI for mobile applications. This library, named Xamarin.Forms, is the next generation of abstraction and makes it possible for developers to create cross-platform applications with 99,9% code re-use. Using Xamarin.Forms, you'll be able to use C# or XAML to define the mobile UI using one single way. Xamarin deliveres a load of standard controls, but makes it possible to create custom controls for a specific platform with ease. This way, you can create full native controls, and get the best performance and user experience out of your app. We'll dive into some basics of Xamarin.Forms, and check the power of the library as well as some bumps you might run into.

1. Xamarin.Forms

2. Hi!
Marcel de Vries
• @marcelv
• marcel.devries@infosupport.com
Marco Kuiper
• @marcofolio
• marco.kuiper@infosupport.com

3. Before
80% shared code
20% OS specific

4. Meet Xamarin.Forms

5. The promise
99,9% shared code
0,1% OS specific

6. Pages
ContentPage MasterDetailPage NavigationPage TabbedPage CarouselPage

7. Layouts
AbsoluteLayoutStackLayout RelativeLayout GridLayout ContentView ScrollView Frame

8. Views

9. Cheat Sheet http://tinyurl.com/x
amarin-forms

10. Cheat Sheet http://tinyurl.com/x
amarin-forms

11. Cheat Sheet http://tinyurl.com/x
amarin-forms

12. But how? C#

13. But how? XAML
ViewModel
Data binding

15. Case Study

16. ISKE App (Yes a new version is on its way!)

17. Xamarin forms Architecture
• The Forms code is a thin wrapper that tanslates XAML to the native
equivalents on the platform
Renderer
UILabel TextView TextBlock
LabelRendererLabelRendererLabelRenderer

18. Xamarin forms Architecture
• The Forms code is a thin wrapper that tanslates XAML to the native
equivalents on the platform
Renderer
UITableView ListView LongListSelector
ListViewRendererListViewRenderer ListViewRenderer

19. Challenges
• How to translate a specific
UI widget created in our
previous app?
• Custom controls to the
rescue

20. Custom controls
• Create a class that contains the properties you need to bind on the screen
• E.g. Date time String containing the Day, Month and Time
public class DateTile : View
{
public static readonly BindableProperty DateOnTileProperty =
BindableProperty.Create<DateTile, string>(p => p.DateOnTile,
DateTime.Now.ToString("dd MMM hh:mm"));
//Gets or sets the color of the progress bar
public string DateOnTile
{
get { return (string)GetValue(DateOnTileProperty); }
set { SetValue(DateOnTileProperty, value); }
}
}
Inherit from the control type that provides the
basics of your custom control

21. Custom controls
• Create a renderer for each platform (use the cheat sheet to know which
renderer to use)
public class DateTileRenderer : ViewRenderer<DateTile,UIView>
{
protected override void OnElementChanged(ElementChangedEventArgs<DateTile> e)
{
base.OnElementChanged (e);
if (e.OldElement != null || this.Element == null)
return;
var Control = new UIView(new RectangleF(0,0,60,78));
this.AddSubview(Control);
this.SetNativeControl(Control);
}
protected override void OnElementPropertyChanged(object sender,System.ComponentModel.PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged(sender, e);
if(e.PropertyName == DateTile.DateOnTileProperty.PropertyName)
{
var control = (DateTile)sender;
// insert your code here to show the updated control (in my case update the labels)
this.SetNativeControl(yourcustomNativeInstance);
}
}
Initially called to create the control
Called when a property on your control
gets changed

22. Custom controls that contains a set of other controls
• E.g. a control wrapping a row in a table and is nothing mre then a
composition of other controls
• In this case you can override the behavior in the shared code in stead of the
custom renderer per platform
• Construct the abstract control in code on creations
• Implement the OnPropertyChanged in the generic custom control

23. Platform specific (Alternative to #ifdef)
• C#:
Device.OnPlatform(
iOS: () => box.Padding = new Thickness (20, 0),
Android: () => box.Padding = new Thickness (20)
);
• XAML:
<StackLayout.Padding>
<OnPlatform x:TypeArguments="Thickness">
<OnPlatform.iOS>20, 0</OnPlatform.iOS>
<OnPlatform.Android>20</OnPlatform.Android>
</OnPlatform>
</StackLayout.Padding>

25. More than forms

26. Messaging Center
Messaging
CenterMaster
Subscribes
Receives message
Detail
Sends message

27. Animations
• Cross-platform animations
• Async / Await API

28. Dependency Service
Access to Native Features
Three steps
1. Interface
2. Registration
3. Location

30. Conclusion

31. Visual Studio vs Xamarin Studio
• Windows Phone support only in visual studio
and only Windows 8 Silverlight (no universal apps)
• Xamarin studio will not load Windows Phone apps
• Sometimes visual studio injects 2013 version in SLN
header -> Will render solution unusable in Xamarin Studio
• Xamarin studio now also supports NuGet
Arguably better implemented then in VS
• On Pull from GIT, Xamarin studio does not update the
solution, you need to manually Unload and reload
• Visual studio linker sometimes operated more aggressive
resulting in runtime error on missing libraries
• Image suffers from this problem at the moment
• Assembly redirects do not solve the issue, neither do the
auto generate redirects
• Shared Libraries are not implemented consistent cross
Ide’s
• Xamarin studio allows more-> results in crashed of VS

32. XAML
• Is not a 1:1 translation, since you need to work with new concepts
• StackPanel -> StackLayout
• TextBlock -> Label
• Etc.
• No UI editor
• XAML intellisense is non existent
• I first code in C# with Intellisense, then I translate it to Xaml

33. PCL vs Shared
• Shared projects are great but:
• They are clearly a 1.0 version
• No feature parity between VS and Xamarin studio
• Lot of stuff is allowed in Xamarin studio, that will break VS
• After a couple of tries, I moved to PCL
• Way more mature at the moment
• Did not hit any nasty issues yet
• When to use what (When it works eventualy)?
• In theory I would propose: Use Share Libs for the stuff you want to share
between platforms but you don’t want to reuse cross projects
• Use PCL when you create stuff that you would share cross projects
• Better, also bundle it as NuGet package in your build

34. Silver bullet ?
• At first we where very skeptical about this solution
• We always believed the Native UI on each platform is a key thing to good
apps
• Xamarin seems to have found a way to get best of both worlds
• Share cross platforms, but translate to native device equivalents
• This gives us both the native feel and the best performance
• The 99% looks nice, but:
• Remember the experience is counts not the % of code sharing you got!
• You will need (at least at the moment) custom renderers to fix UI things on
different platforms (e.g. set transparent color so you can have an image
background)

35. Thank you!