View
71
Download
3
Category
Preview:
Citation preview
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
Recommended