Xamarin Forms includes an assortment of commonly know controls out of the box to help developers build cross-platform UIs using XAML. However, if you are going to use Xamarin Forms for real-world projects you’re going to need to understand custom renderers on how to customizing the rendering of the controls to their native versions. Besides covering customer renders this session will cover how to leverage animation in your controls to add the extra professional polish to your Xamarin mobile apps.

1. Supercharge Xamarin Forms
with Custom Renders and
Animations
Tom Walker Microsoft and Xamarin MVP
tomwalkercodes@outlook.com

2. Meet Tom Walker | tomwalkercodes.@outlook.com
• Founder @LdnOntNetDevs | LondonNetDevelopers.ca
• Microsoft and Xamarin MVP
• Developer for 15+ years now focusing on mobile and
web frontend
• Xamarin Certified Developer

3. Summary
• Quick Intro to Xamarin
• Animations
• Custom Renderers

4. Quick Intro to Xamarin
Traditional Xamarin Approach
With Xamarin.Forms:
More code-sharing, all native
iOS C# UI Windows C# UIAndroid C# UI
Shared UI Code
Shared C# Backend
Shared C# Backend

5. Animations

6. Animations
• Great way to add polish to your user interface
• Changing a property from one state or position to
another state or position over a period of time

7. ViewExtensions
• Class provides number of extensions
• TranslateTo
• ScatleTo
• RotateTo
• FadeTo
• Async
• Can use Task.WhenAll to create composite animations
• Default animation takes 250 milliseconds
• CancelAinmations method can be used to cancel
animations

8. Introduction Xamarin Bootstrapped Mobile Apps
https://blog.xamarin.com/kickstart-your-project-with-our-new-bootstrapped-mobile-apps/

9. LoginPage.xaml
<ContentPage>
…
<StackLayout x:Name="StackLayoutHeader" Spacing="30"
Grid.ColumnSpan="2" Scale="0">
<Image…
<Label ….
...
</ContentPage>

10. LoginPage.xaml.cs
private async void Initialize()
{
await Task.Delay(300);
await StackLayoutHeader.ScaleTo(1, (uint)App.AnimationSpeed, Easing.SinIn);
await ButtonNowNow.ScaleTo(1, (uint)App.AnimationSpeed, Easing.SinIn);
await ButtonSignIn.ScaleTo(1, (uint)App.AnimationSpeed, Easing.SinIn);
}

11. Demo

12. Sport App for iOS and Android

13. Custom Renderers

14. Xamarin.Forms rendering model
Entry
Xamarin.Forms
EntryRenderer
Platform.iOS
UITextField
EntryRenderer
Platform.UWP
TextBox
EntryRenderer
Platform.Android
EditText

15. Custom Renderer
Entry
Xamarin.Forms
CustomEntryRenderer
Platform.iOS
UITextField
CustomEntryRenderer
Platform.UWP
TextBox
CustomEntryRenderer
Platform.Android
EditText

16. Custom Renderers
• Customer renders provide a powerful
approach for customizing the appearance
and behavior of Xamarin.Froms controls.
• If a custom renderer isn't registered,
then the default renderer for the
control's base class will be used.

17. When to create a custom rendered
Custom Controls
• Calendar
• Accordion
• Charting
Custom Rendering
• Text Decoration
• Shadows
• Platform-specific
features

18. What We’ll Build First

19. Steps To A Simple Customized Control
• Create the new class (MyEntry)
• Derive from Entry
• Create custom rendered in each platform
• Key method is OnElementChanged

20. The MyEntry Class
public class MyEntry: Entry
{
}

21. Consuming the Custom Control
<ContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:CustomRenderer;assembly=CustomRenderer"
x:Class="CustomRenderer.MainPageXaml">
<StackLayout …
<Label Text="Hello, Custom Renderer!" />
<local:MyEntry Text="In Shared Code" />
</StackLayout>
</ContentPage>

22. The MyEntryRenderer (iOS)
public class MyEntryRenderer: EntryRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
{
base.OnElementChanged(e);
if(Control != null)
{
Control.BackgroundColor = UIColor.FromRGB(204, 153, 255);
Control.BoderStyle = UITextBorderStyle.Line;
}
}
}

23. Don’t forget!
[assembly: ExportRenderer(typeof(MyEntry), typeof(MyEntryRenderer))]
namespace CustomRenderer.iOS
{
public class MyEntryRenderer: EntryRenderer
{

24. Demo

25. Views Renderer iOS Android UWP
BoxView
BoxRenderer (iOS and
Android)
BoxViewRenderer
(Windows Phone and
WinRT)
UIView ViewGroup Rectangle
Button ButtonRenderer UIButton Button Button
CarouselView CarouselViewRenderer UIScrollView RecyclerView FlipView
DatePicker DatePickerRenderer UITextField EditText DatePicker
Editor EditorRenderer UITextView EditText TextBox
Entry EntryRenderer UITextField EditText TextBox
https://developer.xamarin.com/guides/xamarin-
forms/custom-renderer/renderers/

26. Thank you, Questions?
Tom Walker Microsoft and Xamarin MVP
tomwalkercodes@outlook.com