Diving Into Xamarin.Forms (Floaties Not Included)

Nate RickardPranav Khandelwal

Who is BluetubeBluetube 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 TopicsBrief 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

Diving Into Xamarin.FormsA 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)

How Does It Work?

Diving Into Xamarin.FormsPractical Application of Xamarin.Forms

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.

Diving Into Xamarin.FormsExtending Xamarin.Forms

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 - ExampleDefine an interface the Xamarin.Forms PCL:

public interface INativeServices

{

bool LaunchUri (Uri uri);

}

Dependency Service - iOSImplement 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 - AndroidImplement 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 - UsageUse 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 CenterExample

• 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 RenderersCustomize 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 RenderersAdd 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 RenderersAdd 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 ViewsExample

• 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 - ReviewBrief 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

bluetubeinc.com