Supercharge Xamarin Forms with Custom Renders and Animations

Tom Walker Microsoft and Xamarin MVPtomwalkercodes@outlook.com

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

Summary• Quick Intro to Xamarin• Animations• Custom Renderers

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# BackendShared C# Backend

Animations

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

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

Introduction Xamarin Bootstrapped Mobile Apps

https://blog.xamarin.com/kickstart-your-project-with-our-new-bootstrapped-mobile-apps/

LoginPage.xaml

<ContentPage> …<StackLayout x:Name="StackLayoutHeader" Spacing="30" Grid.ColumnSpan="2" Scale="0">

<Image…<Label ….

...</ContentPage>

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);

}

Demo

Sport App for iOS and Android

Custom Renderers

Xamarin.Forms rendering modelEntry

Xamarin.Forms

EntryRendererPlatform.iOS

UITextField

EntryRendererPlatform.UWP

TextBox

EntryRendererPlatform.Android

EditText

Custom RendererEntry

Xamarin.Forms

CustomEntryRendererPlatform.iOS

UITextField

CustomEntryRendererPlatform.UWP

TextBox

CustomEntryRendererPlatform.Android

EditText

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.

When to create a custom rendered

Custom Controls• Calendar• Accordion• Charting

Custom Rendering

• Text Decoration• Shadows• Platform-specific

features

What We’ll Build First

Steps To A Simple Customized Control

• Create the new class (MyEntry)• Derive from Entry • Create custom rendered in each platform• Key method is OnElementChanged

The MyEntry Class

public class MyEntry: Entry{ }

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>

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; } }}

Don’t forget!

[assembly: ExportRenderer(typeof(MyEntry), typeof(MyEntryRenderer))]namespace CustomRenderer.iOS{ public class MyEntryRenderer: EntryRenderer {

Demo

Views Renderer iOS Android UWP

BoxView

BoxRenderer (iOS and Android)BoxViewRenderer (Windows Phone and WinRT)

UIView ViewGroup Rectangle

Button ButtonRenderer UIButton Button ButtonCarouselView CarouselViewRenderer UIScrollVie

w RecyclerView FlipViewDatePicker DatePickerRenderer UITextField EditText DatePickerEditor EditorRenderer UITextView EditText TextBoxEntry EntryRenderer UITextField EditText TextBox

https://developer.xamarin.com/guides/xamarin-forms/custom-renderer/renderers/

Thank you, Questions?

Tom Walker Microsoft and Xamarin MVPtomwalkercodes@outlook.com