Downloaded 10 times
![Don’t forget! [assembly: ExportRenderer(typeof(MyEntry), typeof(MyEntryRenderer))] namespace CustomRenderer.iOS { public class MyEntryRenderer: EntryRenderer {](https://image.slidesharecdn.com/superchargexamarinformswithcustomrenderersandanimations-161111040830/75/Supercharge-xamarin-forms-with-custom-renderers-and-animations-23-2048.jpg)
Uploaded byTom Walker
Supercharge xamarin forms with custom renderers and animations
The document provides an overview of enhancing Xamarin.Forms through custom renderers and animations by Tom Walker, a Microsoft and Xamarin MVP. It discusses implementing animations for improved UI and outlines the process for creating custom controls with detailed coding examples. The presentation emphasizes the importance of custom renderers in modifying the behavior and appearance of Xamarin.Forms controls across different platforms.
Supercharge xamarin forms with custom renderers and animations
- 1. Supercharge Xamarin Forms withCustom 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 Introto Xamarin • Animations • Custom Renderers
- 4. Quick Intro toXamarin 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.
- 6. Animations • Great wayto 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 providesnumber 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 BootstrappedMobile 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 voidInitialize() { 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.
- 12. Sport App foriOS and Android
- 13.
- 14.
- 15.
- 16. Custom Renderers • Customerrenders 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 createa custom rendered Custom Controls • Calendar • Accordion • Charting Custom Rendering • Text Decoration • Shadows • Platform-specific features
- 18. What We’ll BuildFirst
- 19. Steps To ASimple Customized Control • Create the new class (MyEntry) • Derive from Entry • Create custom rendered in each platform • Key method is OnElementChanged
- 20. The MyEntry Class publicclass MyEntry: Entry { }
- 21. Consuming the CustomControl <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) publicclass 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.
- 25. Views Renderer iOSAndroid 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? TomWalker Microsoft and Xamarin MVP tomwalkercodes@outlook.com