Xamarin Forms Custom Renderers for the Rescue…

- Udara Alwis -CODENAME: [ÇøŋfuzëÐ SøurcëÇødë]

I am Udara Alwis• Xamarin Developer / Enthusiast• Mad Love for Mobile Development / UX• Microsoft Dot Net FTW!

• 23 Years of Awesomess… • Nature Walks, Adventures, Running, Cycling and Socializing• Occasional YouTube-er and Vine-er!

linkedin.com/in/UdaraAlwis

The Journey I'm going to take you through...• Xamarin is Great!• Xamarin Forms is…• A story of a Xamarin Forms developer…• Xamarin Forms UI Rendering process• What is a Custom Renderer?• Let’s create a Custom Renderer…• Important facts when Implementing Custom Renderers…• Important facts before Implementing Custom Renderers…

Xamarin is…• Is Great!• Build Mobile apps from dot net• Native performance• Cross Platform

Xamarin Forms is…• Is Awesome!• Concept : Write once, Run everywhere, and not suck!• Shared Common UI Layer

• No longer separate UI implementation

Xamarin and Xamarin Forms ?

Confused ? Here’s more…

Story Time…

• So He starts off developing…• Manages to implement the basic UI Design…• Slowly gets into the Complex UI implementation…• Detail Properties of Xamarin Forms Controls ???• Ops! He’s in trouble…

Story of a real life Xamarin Forms Developer!

Any solutions ?

• Back to Native implementation ? • Oh boy! NOPE!

• So what now ?

This is where….

Xamarin Forms Custom Renderers

comes for rescue…

Xamarin Forms UI Rendering process• How? Each Xamarin Forms Control has it’s own Native Renderer• Renders / Maps Xamarin Forms Controls into Native Controls• Accordingly to the Native Platform

• This is why,• Native look and feel• Performance

• Behold the Magic!

Overriding this Rendering process ?• Good guy Xamarin…• Allowing developers to access

• Override the default process• Customize Properties• Customize Behaviors

• For each platform up on our choice…

Xamarin Forms Custom Renderers• What is a Custom Renderer ?• Access Rendering process / Sub-classing base Renderers

• Why do we need them?

Steps for creating a Custom Renderers ?1. Create the Custom control by Sub-classing the Xamarin.Forms Control.

2. Consume (implement) the Custom control in Xamarin.Forms.

3. Create the Custom Renderer for the Custom control on each platform.

Demo – Let’s create a Custom Renderer

Important facts when Implementing Custom Renderers…

Important facts to consider when implementing custom renderers

1. Always Export your Renderer• Registering the Custom Renderer with Xamarin Forms• Once Registered, it will be available throughout the entire assembly• ExportRenderer attribute

2. Overriding OnElementChanged• Called when the Xamarin.Forms control is created in order to render the

corresponding native control

• Parameter – ElementChangedEventArgs, contains two important properties

• e.NewElement • e.OldElement

• Xamarin.Forms element that the renderer was attached to, is attached to• Subscribe and Unsubscribe from events, to avoid memory leaks

3. Control vs Element Properties• Custom Renderer is a Middle Guy!

• Element• Reference to the Xamarin.Forms control

• Control• Reference to the rendering native control• Straight away access to the Native Properties

4. You can override the whole Native Control• What if You want to get rid of the rendering Native Control?• Create your own Native Control and use it ?

• SetNativeControl() method• Override the current rendering Native Control and Set your own

Native Control• Even merge multiple native views together and create single control

• Keep in Mind : Handle all the events / behaviors manually!

4. You can create your own Base Renderer• Every Xamarin Forms Control -> Base Renderer. • We have been using built-in Base Renderers (ButtonRenderer,

EntryRenderer, LabelRenderer, etc…)

• Create your own Base Renderer? Yes you can.

• Use the default ViewRenderer to create your own renderer• ViewRenderer<TCustomControl, TNativeControl>• Not much recommended though, but well….

For Xamarin Development you don’t need any in depth knowledge in Mobile Development…

but it’s very useful to have some….

Important facts before Implementing Custom Renderers…

Important facts to consider before implementing custom renderers

1. Think twice…• Explore options from Xamarin Forms default Properties• An untold Truth : Xamarin Forms Custom Renderers are heavy stuff• It’s tempting but…• Do not Over-use Custom Renderers!

• Try Alternatives : • Xamarin Forms default Controls Sub-classing• Xamarin Forms Effects aren’t so bad

2. Re-usability• Make it reusable, as much as possible• Don't only focus on current situation, look ahead• Implement it all in one go

• Curved cornered Image renderer and Ellipse Image renderer ?• None! UNIFY!

3. Mapping of

Xamarin Forms Control• Default Xamarin Forms UI Control (ex: Button)

Xamarin Renderer• Corresponding Renderer for the XF Control (ex:

ButtonRenderer)

Xamarin Native Control• Platform specific native UI Control (ex: iOS UIButton /

Android Button)

• Look out for the available details of…• Properties and Behaviors• Do they fit your Requirements ?

Conclusion • Xamarin Forms Custom Renderers extremely important

• the Magic behind the Xamarin Forms Awesomeness

• Nothing to be scared, Renderers are there to rescue you

• Make sure to keep in mind the important facts before and during Custom Renderer Implementation

Thank You!

For Weekly Xamarin Articles check out my blog, https://theconfuzedsourcecode.wordpress.com

-Udara AlwisCODENAME: [ÇøŋfuzëÐ SøurcëÇødë]