Diving Into Xamarin.Forms

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

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

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 

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

A Brief Overview of Xamarin.Forms

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.

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)

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.

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.

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.

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.

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

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

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

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);

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

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
});

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

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))]

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

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

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.

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.

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);
}
}
}

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

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

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

Diving Into Xamarin.Forms

More Related Content

What's hot (7)

Similar to Diving Into Xamarin.Forms (20)

More from Catapult New Business (7)

Recently uploaded (6)

Diving Into Xamarin.Forms