In this week of the workshop Xamarin Forms – Noob to master, we talked about custom renderers and effects.

1. XAMARIN FORMS
NOOB TO MASTER
By Rendy Del Rosario and Charlin Agramonte
Week 4

2. Objectives
- Understand what is a Control/Bindable properties and how to use it
- Understand what is a Custom Renderer
- Understand what is an Effect

3. Custom Renderers

4. What is a Custom Renderer?
Custom renderers provide a powerful approach for customizing the appearance
and behavior of Xamarin.Forms controls

5. Native Controls
Every Xamarin.Forms control has an accompanying renderer for each platform
that creates an instance of a native control.

6. Native Controls

7. Creating a Custom Renderer Step by Steps
1-Create a Xamarin.Forms custom control
2-Consume the custom control from Xamarin.Forms
3-Create the custom renderer for the control on each platform.

8. 1-Create a Custom control
Can be created by subclassing the Control

9. 2-Consume the custom control
- Add the nameSpace of your Control in your XAML, with a
variable (in this case Local)
- Use your variable with your Control Name

10. 3-Create the custom renderer for the control on each
platform.
1- Subclass the platform renderer for the element on each platform

11. 3-Create the custom renderer for the control on each
platform.
2- Override the OnElementChanged method that renders the native
control and write logic to customize the control. This method is called
when the corresponding Xamarin.Forms control is created.

12. 3-Create the custom renderer for the control on each
platform.
3-Add an ExportRenderer attribute to the custom renderer class to
specify that it will be used to render the Xamarin.Forms control.

13. GROUP PRACTICE
Creating our first Custom Renderer

14. Renderer Good Pattern

15. Custom Properties
A bindable property is a special type of property, where the property's value is tracked by the
Xamarin.Forms property system.

16. INDIVIDUAL EXERCISE
Create a Custom Renderer for Underline a Label
TIME: 30 MINUTES

17. Effects

18. What is an Effect?
Effects allow the native controls on each platform to be customized, and are
typically used for small styling changes.

19. Why Use an Effect over a Custom Renderer?
Effects simplify the customization of a control, are reusable, and can be
parameterized to further increase reuse.

20. Creating an Effect Step by Steps
1-Create a subclass of the PlatformEffect class
2-Override the OnAttached method and write logic to customize the control
3-Override the OnDetached method and write logic to clean up the control
customization, if required.
4-Setting an effect identifier
5-Consum your effect

21. 1-Create a subclass of the PlatformEffect class

22. 2-Override the OnAttached method and write logic to
customize the control
OnAttached is called when the effect is added to a control

23. 3-Override the OnDetached method and write logic
to clean up the control customization, if required.
OnDetached indicates the effect is being removed from the control, should reverse
any visual changes, remove event handlers, etc

24. Monitoring runtime changes
Effects can also monitor changes to the Xamarin.Forms Element by overriding the
OnElementPropertyChanged method

25. 4-Add a ResolutionGroupName attribute to the effect
class.

26. 5-Consume your effect
1- Declare a control that will be customized by the effect
2-Attach the effect to the control by adding it to the control's Effects
collection.
XAML
CODE BEHIND

27. GROUP PRACTICE
Creating our first Effect

28. Effect Parameters
A public class that subclasses the RoutingEffect class should be created to represent
effect parameters, as demonstrated in the following code example:
Creating
Consuming

29. INDIVIDUAL EXERCISE
Create an Effect for Underline a Label
TIME: 30 MINUTES

30. HOMEWORK PRACTICE
Basic Paint

31. Recommended Lectures
- Custom Renderers
- https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/custom-rendere
r/
https://www.youtube.com/watch?v=55r1wHdOLBo
- Effects
https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/effects/creating/
https://www.youtube.com/watch?v=cFcwQhc1utg

32. By Rendy Del Rosario and Charlin Agramonte
Week 4
THANK YOU!!!