Nate Rickard takes you on a deep dive into Xamarin.Forms, providing a brief overview, a practical application analysis of this took, and how to extend Xamarin.Forms. You will be able to answer the following questions: 1. What are some considerations when deciding whether to use Xamarin.Forms? 2. When does it make sense to use Xamarin.Forms? 3. How can I use built in features/tactics to improve development on Xamarin.Forms? 4. How can I supplement Xamarin.Forms with additional (or changed) functionality?

1. Diving Into Xamarin.Forms
(Floaties Not Included)
Nate Rickard
Pranav Khandelwal

2. Who is Bluetube
Bluetube designs & builds award-
winning mobile applications and
responsive websites that revolutionize
how organizations do business.
• Mobile User Experience Experts
• Atlanta’s Leading Xamarin Premier Consulting Partner
• Xamarin Test Cloud Consulting Partner
• Service Global 2000s and Major Non-Profits

3. My Background
Nate Rickard
• Director of Architecture @ Bluetube
• Working with Xamarin MonoTouch
since late 2012
• Xamarin Certified Developer
• Relative newcomer to Xamarin.Forms
(but isn’t everyone?)
•  Has a terrible picture 

4. Presentation Topics
Brief Overview of Xamarin.Forms
– What it is
– Why it matters
Practical Application of Xamarin.Forms
– What are some considerations when deciding whether to use it?
– When does it make sense to use it?
Extending Xamarin.Forms
– Using built in features/tactics to improve development
– Supplementing Xamarin.Forms with additional (or changed)
functionality

5. Diving Into Xamarin.Forms
A Brief Overview of Xamarin.Forms

6. What Is Xamarin.Forms?
• Xamarin.Forms is a cross-platform, natively-backed UI toolkit.
• A shared set of pages, layouts, views (and controls) that abstract
native functionality across platforms.
• Allows developers to create native user interfaces that can be shared
across mobile platforms.
• A compelling set of features that include XAML support, 2-way
property bindings, good support for the MVVM pattern, UI layout
engine, native dependency service location, messaging center.

7. Why Should You Care?
• It can save you time! Build apps in half the time.
• It can save you money! Build apps at half the cost.
• It makes you more efficient! Maintain less code.
• Bottom line: It allows the same development team to work on
multiple platforms at the same time, share the (majority of the)
code, fix issues on multiple platforms simultaneously, and use a
great development paradigm (in MVVM)

8. How Does It Work?

9. Diving Into Xamarin.Forms
Practical Application of Xamarin.Forms

10. When To Use Xamarin.Forms
• When maximum code sharing is the main priority.
• When creative flexibility exists.
• When you can plan your UI around Xamarin.Forms.
• When multiple platforms are a requirement but
budget is tight.

11. When NOT To Use Xamarin.Forms
• When a specific creative UI is required.
• When you need a component that can not be shared.
• When UI performance is paramount.
• When you are unwilling to meet Xamarin.Forms pattern for
implementation.
• Bottom line: Xamarin.Forms is meant to be used when you are
willing (and able) to adopt it’s Paradigm.

12. It’s Per Screen, Not Per App
• Xamarin.Forms can be extended.
• Xamarin.Forms can be mixed with native screens in the same
Xamarin application.
• Just because a screen or component needs to be custom it
doesn’t mean the whole app must be.

13. Diving Into Xamarin.Forms
Extending Xamarin.Forms

14. Dependency Service
• Allows access to Native SDKs.
• Simplifies how platform specific features are implemented.
• Allows you to register classes which will then be pre-initialized
for you upon request.
• It removes the need for you to “new” every time you need to
use that class.

15. Dependency Service - Example
Define an interface the Xamarin.Forms PCL:
public interface INativeServices
{
bool LaunchUri (Uri uri);
}

16. Dependency Service - iOS
Implement the interface in the iOS platform project:
[assembly: Xamarin.Forms.Dependency (typeof(NativeServices))]
namespace MyApp.iOS
{
public class NativeServices : INativeServices
{
public bool LaunchUri (Uri uri)
{
var app = UIApplication.SharedApplication;
var url = NSUrl.FromString (uri.ToString ()) ?? new
NSUrl (uri.Scheme, uri.Host, uri.LocalPath);
if (app.CanOpenUrl (url)) {
return app.OpenUrl (url);
}
return false;
}
}
}

17. Dependency Service - Android
Implement the interface in the Android platform project:
[assembly: Xamarin.Forms.Dependency (typeof(NativeServices))]
namespace MyApp.Droid
{
public class NativeServices : INativeServices
{
public bool LaunchUriAsync (Uri uri)
{
Device.OpenUri (uri);
return true;
}
}
}

18. Dependency Service - Usage
Use the DependencyService to get the platform-specific
implementation of the interface in the shared PCL Xamarin.Forms
project:
DependencyService.Get<INativeServices> ()
.LaunchUri (contact.CellUri);

19. Messaging Center
• The Xamarin.Forms MessagingCenter allows you to send and
receive “Messages” without knowing who they are going to or
who they are coming from
• It is very similar to using Event Handlers, but messages are
global, more decoupled, and more flexible
• This form of messaging is often named Event Aggregation or an
event bus

20. Messaging Center
Example
• Publish a message:
MessagingCenter.Send<WelcomePage, string> (this,
"Authenticated", User.Id.ToString ());
• Subscribe to a message:
MessagingCenter.Subscribe<WelcomePage, string> (this,
"Authenticated", (sender, arg) => {
//do something whenever the "Authenticated” message is sent
//using the 'arg' parameter which is a string
});

21. Custom Renderers
• Renderers form the backbone of the Xamarin.Forms magic
• Xamarin.Forms contains dozens of built in renderers for every
most Pages, Layouts, Views, and Cells
• Custom renderers involve us changing the way a
Xamarin.Forms element is rendered natively, or adding
functionality via new views/controls or extending an existing
view

22. Custom Renderers
Customize an existing view
– Find the renderer it uses and derive your own
– Use native native and renderer ‘lifecycle’ events/features to customize
the way the view is rendered on that platform
– Example: I don’t want ListView cells to show their ‘selected’ state
• Inherit from ViewCellRenderer
• iOS - Override GetCell() and set the cell’s selection style:
cell.SelectionStyle = UIKit.UITableViewCellSelectionStyle.None
• Tag the renderer with the ExportRenderer attribute:
[assembly:ExportRenderer (typeof(ViewCell),
typeof(NonHighlightViewCellRenderer))]

23. Custom Renderers
Add features to an existing view
– Create a new class inheriting from an existing View
– Add new member(s) – properties, methods, etc.
– Use the derived view in your XAML/code instead of the base View
– Implement a custom renderer that uses the extended view
– Example: I want a 2 line title/subtitle in the navigation bar
• Inherit from Page or NavigationPage and add a Subtitle property
• Add a custom renderer that inherits from NavigationRenderer
• iOS – add a new UIView with multiple labels for title/subtitle and set
the TitleView of the NavigationBar

24. Custom Renderers
Add a new type of view/control
– Create a new class inheriting from an existing View or just View
– Use the new view in your XAML/code
– Implement a custom renderer that uses the new view
– Renderer could inherit from another renderer or simply
VisualElementRenderer or ViewRenderer
– Example: I want a view that draws a shape, ShapeView
• Create ShapeView : BoxView and
ShapeViewRenderer : VisualElementRenderer<ShapeView>
• Implement drawing/masking code in renderer to achieve shapes

25. Extending Views
• Sometimes you can customize the behavior of a View without a
custom renderer.
• Inherit from Xamarin.Forms View, Page, Layout, Cell, etc. and
add or change functionality.

26. Extending Views
Example
• Need: ListView does not have an ICommand to bind an item
tapped command to, only an ItemTapped event.
• Solution: An extended ListView that provides an
ItemTappedCommand that can be bound and used in a
ViewModel.
• How: Derive our own ListView class and wrap the event
handling into an ICommand.

27. Extending Views
public class ExtendedListView : ListView
{
public static readonly BindableProperty ItemTappedCommandProperty =
BindableProperty.Create<ExtendedListView, ICommand> (bp => bp.ItemTappedCommand,
default(ICommand));
public ICommand ItemTappedCommand {
get { return (ICommand)GetValue (ItemTappedCommandProperty); }
set { SetValue (ItemTappedCommandProperty, value); }
}
public ExtendedListView ()
{
this.ItemTapped += ExtendedListView_ItemTapped;
}
void ExtendedListView_ItemTapped (object sender, ItemTappedEventArgs e)
{
if (ItemTappedCommand != null) {
ItemTappedCommand.Execute (e.Item);
}
}
}

28. Custom Renderer
• Need:
– Xamarin.Forms provides a CarouselPage, which allows the user to swipe
entire pages of content left or right.
– What if we only want to swipe a portion of the page? Maybe an Image
slider/carousel?
• Options:
– Go complain in the Xamarin forums
– Look for a pre-built 3rd party component
– Build our own
• Issues:
– We can’t customize CarouselPage
– Xamarin.Forms does not have a Swipe gesture recognizer (?!?)
Example

29. Custom Renderer
• What we’ll build
– A reusable ImageCarousel view (control) that allows the user to swipe
images left/right
– Use custom renderer(s) to ‘forward’ the swipe gestures to our view
• Goals
– Maximize code reuse – most of the logic stays in our PCL
– Support for code-based UI layout and Xaml
Example

30. Topics - Review
Brief Overview of Xamarin.Forms
– What it is
– Why it matters
Practical Application of Xamarin.Forms
– What are some considerations when deciding whether to use it?
– When does it make sense to use it?
Extending Xamarin.Forms
– Using built in features/tactics to improve development
– Supplementing Xamarin.Forms with additional (or changed)
functionality

31. bluetubeinc.com