#VirtualXamarin

• Questions All lines are muted, so post your questions in the chat console for Q&A at the end.

• IssuesIf you lose your internet connection, reconnect using the link emailed to you.

If you lose your phone connection, re-dial the phone number and re-join.

For more support: Call ReadyTalk Support at (800) 843-9166

• FeedbackLet us know what you thought about our presentation in our post-webinar survey!

• SlidesThe presentation will be sent to the email you registered with. We will also post the

slides on our SlideShare account. Find them at @VirtualXamarin

• Socialize Use the #VirtualXamarin hashtag to participate on social media

#VirtualXamarin

Using ReadyTalk

Thank you to our

sponsors!

#VirtualXamarin

How To Make A Killer App With Custom Control Rendering In Xamarin Forms

Pranav Khandelwal (PK)

#VirtualXamarin

My Background

PK

• Engineering @ Georgia Tech

• Software Engineer – Mobile @ Bluetube

• Xamarin Certified Mobile Developer•

#VirtualXamarin

Who Is Bluetube

• Established in 1999

• Award-Winning Solutions

• Experts with Technology and Usability

• Enterprise Corporations & Non-profit Clients

• Premier Xamarin Consulting Partner

• Xamarin Test Cloud Consulting Partners

Bluetube designs and

builds enterprise mobile

apps & responsive

websites.

Xamarin Forms

• Cross-platform UI Code

• Native user-interfaces

• Native SDK access when you need it

#VirtualXamarin

Renderers

• Renderer Class – Used to render page, layout,

or control

• Can be extended with your own

implementation

#VirtualXamarin

#VirtualXamarin

Code Examples

• Customizing an existing control

• Customizing pages

• Gesture-based Interaction

Customizing Existing Controls

DEMO

#VirtualXamarin

#VirtualXamarin

Customizing Existing Controls

• Create subclass of existing control

• Add additional properties

• Create custom renderer in platform-specific

projects

• Associate renderer to custom controls

#VirtualXamarin

Creating New Controls

• Create subclass of View

• Add additional properties

• Create renderer deriving from

ViewRenderer<TView, TNativeView>

• Handle any property changes

#VirtualXamarin

Customizing Pages

DEMO

#VirtualXamarin

Customizing Pages

• Create subclass of a Page

• Create renderer deriving from PageRenderer

• Access model data through

OnElementChanged

#VirtualXamarin

Gesture Based Interaction

DEMO

#VirtualXamarin

Gesture Based Interaction

• Create subclass of a Control

• Add methods to handle gestures to custom

control – call OnPropertyChanged()

• Create custom renderer

• Implement platform specific gesture handlers

in renderer

• Call custom control gestures handlers from

renderer

#VirtualXamarin

Recap

Use custom renders to:

• Add functionality to existing controls

• Create brand new controls

• Customize pages

• Handle gesture based interaction

#VirtualXamarin

Referenceshttp://blog.xamarin.com/using-custom-controls-in-

xamarin.forms-on-android/

http://www.xforms-kickstarter.com/

http://blog.xamarin.com/using-custom-uiviewcontrollers-in-

xamarin.forms-on-ios/

http://developer.xamarin.com/guides/cross-platform/xamarin-

forms/custom-renderer/

Questions

?

#VirtualXamarin

Next Presentation Wednesday, June 10

12-1pm EST

virtualusersgroup.org/xamarin

#VirtualXamarin

@VirtualXamarin

Thank you to our

sponsors!

#VirtualXamarin