Some people are a little bit confuse on how and when should use custom renderers or effects. In this article, I’m going to clarify this by first explaining how to create each one step by step and finally some closing thoughts on when to use one or the other.

Let’s start with the basics.

Xamarin Forms framework has a lot of controls such as Label, Entry, Button, ListView, etc. Each one has their own appearance and behavior based on the platform you are running on. For example, this is how an Entry looks when running in iOS:

But what happens if you want to customize this appearance by adding an orange border to the Entry. The Xamarin Forms Entry doesn’t have a property to set the border color, so you will need a custom renderer or an effect to achieve this. Which will basically let you modify the appearance and behavior of the control.

For this example the result will be:

Custom Renderer

So let’s do this using custom renderer in just six steps:

1-Create a control

The first thing we are going to do is creating a new class on our forms project. This class will extend from the control class we want to modify or extend.

2-Create a renderer class for each platform 

Now we will create a new class on each platform to support the functionality we want.

Is important to mention that I’m adding it in all the platform because I want to modify the entry on each one. In case you only want to modify it only in one then only add the renderer in that platform and the others will continue rendering the default control behavior.

3-Extend of the native control class

In this new class we will extend from the native renderer. In the following image, you will see which class to use according to the control you are modifying. For example, if you want to modify the BoxView then you will have to extend from the class BoxRenderer which basically will use the native UIView in iOS, ViewGroup in Android, etc

We are modifying the entry so we will extend from the EntryRenderer class.

4-Adding the custom code 

We are going to override the OnElementChanged method and add our customization code there. In case we want to handle property changes in runtime then is necessary to override the OnElementPropertyChanged method too and add the property handling code there as well.

Tip: If you don’t know much about native functionalities you can try googling how to do it in Xamarin iOS/Xamarin Android, or even in Java/Swift and then translate the code to C#. 

5-Add the ExportRenderer attribute 

In the first typeof we will indicate the Forms control it will use (Created in step one) and in the second one, we will add the type of the renderer class created.

In case we want to apply the renderer to all the entries, then in the first parameter instead of typeof(ExtendedEntry) we put typeof (Entry)

6-Use the control  

Add the reference of the control created in step 1 and use it.

Effects

Let’s do the same now but using an Effect

1-Create a new RoutingEffect class

In your forms project create a new BorderLineEffect class, and extend from RoutingEffect.

Add a group name and an effect name.

Tip: The group name is unique per project, so maybe is better to add it in a constant, so that you can use the same group name if you create more effects.

2-In each platform create a new effect class and extend from PlatformEffect

After doing that you will have to implement the following methods:

• OnAttached: It occurs when the effect is attached, here you will add the customization code
• OnDetached: It occurs when the effect is detached, here you will clean the customization done on the OnAttached method

Another optional method is the OnElementPropertyChanged, which will let you handle property changes at runtime.

3-Add the customization code inside the OnAttached/OnDetached method 

iOS:

Android:

4-Add attributes to your effect  

In the platform-specific projects, we need to add ResolutionGroupName and ExportEffect attributes

5-Use the effect

Add the reference of the effect created in step 1 and use it.

When to use effects and when to use custom renderers

As you see above we achieved the same using a custom renderer and effect.

The rules of when to use one or the other are:

Use effects when you want a small styling change 

A good rule could be to use it when you want to modify a property of the native control. For example changing the background style of a button, adding an underline to a label, adding a shadow, etc. That means that in the example we just did, the best option is to use an effect instead of a custom renderer.

Use custom renderer when you need to create a new control that doesn’t exist in Xamarin Forms

DrawView

To achieve the control in the image above, Is necessary to use a custom renderer because Xamarin Forms doesn’t have a DrawView, we will have to create our own inhering from View class.

public class DrawViewRenderer : ViewRenderer<DrawView, NativeDrawView>

Full source code here .

Use custom renderer when you need to override native control method 

When using effects is not possible to override native methods, so for example in the sample above to detect when the user start painting you need to override the Touches method (TouchesEnded, TouchesBegin, TouchedEnd). To do that you need to use a custom renderer.

 

That’s all for now, check the full source code here.

References

• https://blog.xamarin.com/customizing-xamarin-forms-controls-with-effects/
• https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/custom-renderer/
• https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/effects/introduction

Happy coding!