Xamarin Forms Custom Renderers for the Rescue...

Editor's Notes

• #3: My name is Udara Alwis, fun fact singaporeans find it very hard to pronounce my name, so if you happens to be one of them, I'm all cool with it. I'm a xamarin developer here in Singapore. Must admit I'm a crazy enthusiast in Xamarin, having mad love for mobile development. Not a mature adult, just a 23 year old kid causing trouble here and there. I've got other hobbies such as.... Well that's about me!
• #4: So we are gonna go on a little journey today, here's the journey I'm going to take you through...
• #5: Xamarin is Great... It let's you create mobile applications using dot net. Having full native performance and looks and feels of each native platform. As you can see in the diagram, thanks to xamarin now we can maintain the same code base across all three platforms, having the individual native UI implementation, which allows us to maintain up to about 70% percent shared codebase. So yeah its all great.
• #6: Xamarin forms is awesome! its more like the cross platform extension of Xamarin this is the component that brings to life of the concept, Write once, Run Everywhere, and not Suck allowing us to share the UI code layer among three platforms. So you no longer need to implement the UI separately for each platform.
• #7: Xamarin and Xamarin Forms ? Some people are confused about these differentiation between these two, let me put it this way... Xamarin Forms is more like the true cross platform extension of Xamarin. Where as Xamarin Forms provides us a unified UI Layer which has all the common UI controls of all three mobile platforms.
• #8: Still Confuzed ? Let me explain... I'm not very sure why I put two diagrams, but however, in my left hand side you can see the Native Xamarin architecture where you share the back-end code base, but you have to implement the UI separately for each platoform, allowing us to share upto 70-80% of code base. Where as in Xamarin Forms you can share almost upto 100% of the code base across all three platforms with the Shared UI Layer.
• #9: Story time... There's this developer who started developing an application with Xamarin forms, where he's given all the UI sketches and so on. So he start off with nice and simple controls in Xamarin Forms and manages to implement the basic UI design of the app. And then he slowly gets into complex UI designs implementations... So he starts going through all the available properties in these Xamarin Forms Controls, and starts wonder where are all the properties he needs to customize the app accordingly to the complex design. So he looks up and down, here and there, wondering where did all the properties go? Oh boy, he's in trouble isn't he... He realizes Xamarin Forms UI controls has limited set of properties for customization, and its very hard to do complex customizations in these controls.
• #10: Any solutions ? Well he could always go back to native development, but its late for it now, and it'll put him through a lot of trouble for sure, having to implement in three platforms.
• #11: Now that's where Xamarin Forms Custom Renderers comes in for the rescue, let me explain.
• #12: First of all let me explain how the Xamarin Forms UI rendering process works. Each and every UI Control in Xamarin Forms has it's own Native Renderer which renders and maps its Properties and Behaviours to the Native Control level. This happens accordingly to the Native Platforms. This is why we get the Native look and feel and performance with Xamarin Forms. So yeah behold the Magic of Xamarin Forms. Now if you take a look at the Diagram here it shows how the default texbox UI Control of Xamarin Forms, which is called Entry control gets renderered down to the Native level through the Renderers. Now if you take a look at the iOS rendering, you can see the Entry control gets rendered down to the native UITextField control. And on Android and Windows Phone, EditText and UserControl respectively.
• #13: Now Xamarin being a Good guy, they have allowed us to access this Rendering process, which allows us to Override this default process and use it for our own requirements. So by accessing this process we can customize all kinds of properties and behaviours of the Xamarin Forms controls, in each platform according to our needs.
• #14: So in order to access this rendering process we need to create Custom Renderers of our own by sub classing the base Renderers Xamarin provides. Thereby it allows us to access and modify the native level properties and behaviors of the Xamarin Forms Controls. So why do we need them? Well you already have the answer... Now if you take a look at the Diagram, you can see how our Custom Renderers gets involved in the Rendering process. Where as this Entry control goes through our Custom Renderer and down to the base renderer, where we control and modify it in our Custom Renderer as we need. So there you have it, Custom Renderers and How they work...
• #15: Next let's see how to create a Custom Renderer... Just 3 simple steps. First you subclass the default Xamarin Forms Control that you need to create a Custom Renderer for. Second you consume that sub-classed custom control in your Xamarin Forms application. Thirdly and finally, you implement the Custom Renderer in the Native level project. Yeah how hard could it be, just three simple steps!
• #16: Demo of creating a sample Custom Renderer Now before I get to the actual implementation of our Custom Renderers, I'm going to take you guys through some important facts you need to keep in mind when implementing custom renderers. So while going through those facts we'll be getting back to the code step by step.... So that you get a good understanding about how to implement a custom renderer and what to keep in mind...
• #18: Whenever you create a custom renderer you need to Export it and register it, otherwise Xamarin would not recognize your Custom Renderer and it will go ahead with the default base class Renderer for your Custom Control. Let me refresh your memory in our Demo.
• #19: Whenever a Custom Renderer is being executed, the first method it fires is the OnElementChanged() method. This method gets called when the Rendering process starts for the custom control, which allows us the opportunity to tap into the native properties and behaviours and modify them as we wish by overriding this method. Also something to keep in mind this method consumes an important parameter, ElementChangedEventArgs which contains two important Properties. The OldElement property represents the Xamarin Forms level Control this renderer was attached to (previously attached to) and the NewElement property represents the Xamarin Forms level Control this renderer is currently attached to, its more of a reference. So if you are using any event handlers in your Custom Renderer, you have to keep an eye out for these two properties in order to Subscribe and Unsubscribe accordingly in order to prevent memory leaks. So let's have a look at it in our Demo, shall we?
• #20: A Custom Renderer is more like a middle guy, in between Xamarin Forms level Control and the Native level Control, where as he's got hooks for both sides. So those hooks are represented by these two important properties, Control and Element. Now if you take a look at Element property, it holds a reference to the Xamarin.Forms control that's being rendered, so you could use this property to access anything on the Xamarin Forms level control. Where as the Control property holds a reference to the native control being used for the Custom Control. So using this property you can straight away add your customizations and behaviors to the Rendering Control. So let's see how it's done.
• #21: What if you want to get rid of the current rendering Native Control ? And create your own Native control and use it for your Custom Control ? As an example You need to have a TextBox with an underneath shadow, in iOS you can't do this with the default native UITextView, so one way to do it is by adding another UIView along with the UITextView, where as you merge two native views together to form one View. So for instances like that, you could use the SetNativeControl() method, and pass in your custom native view, which will get rid of the default native view and override it with your custom native view. But you have to keep in mind something very important, hence you are flushing the default native control, you have to handle all the Behaviours manually by yourself. So let's try that in our demo, shall we?
• #22: Now I hope you remember I told you for every Xamarin Forms control, there is a base renderer, and we have been using those base renderers this whole time. Now what if you wanted to create your own BaseRenderer ? Let's say you are creating a total complex Custom Control by yourself, and you need to have your own Renderer for it? And yes it is possible, you just have to derive your base renderer from the generic ViewRenderer. Well actually Xamarin doesn't really recommend this, but it is possible if you ever needed to.
• #23: Here's something interesting I really want mention you all, Xamarin doesn't really require in depth Mobile Development knowledge but it is very beneficial to have some, specially in scenarios like these custom renderer implementation. The more you are aware of the Native development, the more advantages for you. So if you are planning to move towards Xamarin mobile development, I would suggest you take a little look at native development as well. So there goes a little sharing of Wisdom.
• #25: You need to think twice before you move on towards Custom Renderer implementation for your UI, Once you get familiar with Custom Renderer implementation, you get very tempted to go for custom renderers all the time. I understand that, I experience that all the time.. why I say this is because, and untold truth about Custom Renderers is that, they are a little process intensive. Therefore it's wise to first of all explore all the possibilities from Xamarin Forms level to solve your requirement. So do not over-use custom renderers just because of the ease of development. You could try out other alternatives such as Xamarin Forms Controls sub-classing. And Xamarin Forms Effects (which is almost like Custom Renderers but simplified).
• #26: Whenever you decide to implement a Custom Renderer You need to pay attention to the reusability of it. Make sure to implement it in a way its reusable as much as possible. Don't only focus on the current implementation, look ahead and , implement all the possible needs in one go, without implementing custom renderers for every single need of one type of control. Hence Custom renderers are process intensive. As an example let's say you have two Custom Renderers, called Curved Cornered Image Renderer and Circle Image Renderer, what I would tell you is that get rid of both of them and merge them into one, thereby you save resources and processing power.
• #27: Last but not least before you implement your Custom Renderer always make sure to take a look down through your Rendering hierarchy,
• #28: look at the available properties and behaviours down to the Native control and see whether if it fulfills your requirements, in all three platforms. That way you will have a better idea on how to implement the Custom renderer more efficiently.
• #29: So as in conclusion of our Journey... Custom Renderers plays an extremely important role in Xamarin Forms development. In my opinion it's more like the Magic behind the whole Xamarin Forms Awesomeness. Don't be scared of Custom Renderer's because they are here for your rescue. Also finally make sure to keep in mind all the important tid bits I discussed today, so it will help you implement custom renderers more efficiently and effectively.