Successfully reported this slideshow.

What's new in Xamarin.Forms

1

Share

Loading in …3
×
1 of 60
1 of 60

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

What's new in Xamarin.Forms

  1. 1. rumar@microsoft.com http://ruimarinho.net
  2. 2. Native User Interfaces Native API Access Native Performance
  3. 3. Silo approach iOS WindowsAndroid Objective-C/Swift Xcode C# Visual Studio Java Android Studio No shared code • Many languages and development environments • Multiple teams
  4. 4. Write once, run anywhere Lua Javascript Actionscript HTML+CSS Limited native API access • Slow performance • Poor user experience App generator
  5. 5. iOS C# UI Windows C# UIAndroid C# UI Shared C# logic Xamarin’s unique approach Shared C# codebase • 100% native API access • High performance
  6. 6. Windows APIs Microsoft.Phone Microsoft.Networking Windows.Storage Windows.Foundation Microsoft.Devices System.Data System.Windows System.Numerics System.Core System.ServiceModel System.Net System System.IO System.Linq System.Xml C#
  7. 7. iOS – 100% API coverage MapKit UIKit iBeacon CoreGraphics CoreMotion System.Data System.Windows System.Numerics System.Core System.ServiceModel System.Net System System.IO System.Linq System.Xml C#
  8. 8. Android – 100% API coverage Text-to-speech ActionBar Printing Framework Renderscript NFC System.Data System.Windows System.Numerics System.Core System.ServiceModel System.Net System System.IO System.Linq System.Xml C#
  9. 9. Xamarin Native approach 3 Native User Interfaces Shared App Logic Shared C# Logic Windows C#Android C#iOS C#
  10. 10. Xamarin.Forms- Cross Platform UI Shared Native User Interface Shared App Logic Shared C# Logic Shared UI Code
  11. 11. Layouts Pages Stack Absolute Relative Grid ContentView ScrollView Frame Content MasterDetail Navigation Tabbed Carousel
  12. 12. ActivityIndicator BoxView Button DatePicker Editor Entry Image Label ListView Map OpenGLView Picker ProgressBar SearchBar Slider Stepper TableView TimePicker WebView EntryCell ImageCell SwitchCell TextCell ViewCell Controls
  13. 13. Native UI ContentPage Label Picker Android Activity / Fragment TextView AlertDialog + LinearLayout + EditText + NumberPicker iOS UIViewController UILabel UITextField + UIPickerView + UIToolbar + UIBarButtonItem UWP Page TextBlock ComboBox developer.xamarin.com/guides/xamarin-forms/application-fundamentals/custom-renderer/renderers/
  14. 14. macOS Preview Enhanced GestureRecognizers Android Support Libraries PlatformSpecifics Fast Scroll NavigationPage Translucency Blur Behind .netstandard support Partial Collapse MasterPage Native Control Binding Map Extensibility Fast Renderers Preview Startup Time ListView Scrolling Memory Improvements XAMLC Bindable Picker Frame Corners Tizen Forms Previewer FlexLayout Preview Xamarin.Forms Embedding DataPages
  15. 15. • Aggressive bug triage • New issues reviewed within 24 hrs • Reproduction projects for quick resolution • Performance Improvements • Startup Time • Fast Renderers for Android • ListView improvements, Fast Scroll • XAMLC – 5x faster • Discussion: aka.ms/xfperformance Quality and Performance Source: Matthew Robbins - MFractor
  16. 16. 2.4.0 • .NET Standard 2.0 • Stability and Performance • Over 150 fixes • New Feature Flags API • Android Fast Renderers: Button, Image, Label • macOS Preview
  17. 17. vNext • Page Embedding • Layout Compression • Right-to-Left • ListView enhancements • Gesture enhancements • FlexLayout • VSM • macOS, GTK
  18. 18. XAML Standard • Lots of feedback! • Reconciling the APIs we can without breakage • Share implementations of • x:Bind • Visual State Manager
  19. 19. Xamarin.Forms Page Embedding Shared C# Logic Windows C#Android C#iOS C# iOS Obj-C Swift Android Java ?
  20. 20. • public class ButtonRenderer : ViewRenderer<Button, AppCompatButton>, AView.IOnAttachStateChangeListener { ButtonBackgroundTracker _backgroundTracker; TextColorSwitcher _textColorSwitcher; float _defaultFontSize; Typeface _defaultTypeface; bool _isDisposed; int _imageHeight = -1; public ButtonRenderer() { AutoPackage = false; } global::Android.Widget.Button NativeButton => Control; …..
  21. 21. • internal sealed class ButtonRenderer : AppCompatButton, IVisualElementRenderer, AView.IOnAttachStateChangeListener, AView.IOnFocusChangeListener, IEffectControlProvider, AView.IOnClickListener, AView.IOnTouchListener { public event EventHandler<VisualElementChangedEventArgs> ElementChanged; public event EventHandler<PropertyChangedEventArgs> ElementPropertyChanged; public ButtonRenderer() : base(Forms.Context) { _automationPropertiesProvider = new AutomationPropertiesProvider(this); _effectControlProvider = new EffectControlProvider(this); _textColorSwitcher = new Lazy<TextColorSwitcher>(() => new TextColorSwitcher(TextColors)); Initialize(); } …..
  22. 22. Layout Lifecycle: Invalidation Loop Has Parent? InvalidateMeasure Called Call InvalidateMeasure on Parent Queue Delay Layout Yes No 1 2 3 4
  23. 23. Has Parent? InvalidateMeasure Called Call InvalidateMeasure on Parent Queue Delay Layout Yes No 1 2 3 4 Wait for event callback to happen and trigger the layout mechanism 5 Has Children? LayoutChildren Invoked Layout called 6 7 8 Yes No Layout Cycle Completed 9 Layout Lifecycle: Layout Loop
  24. 24. Grid StackLayout ContentView Label Button WebView Grid Label Button Image ScrollView Image Panel Panel Panel LabelRenderer TextBlock ButtonRenderer Button WebViewRenderer WebView Panel LabelRenderer Label ButtonRenderer Button ImageRenderer Image ScrollViewRenderer ImageRenderer Image Forms UWP
  25. 25. Grid StackLayout ContentView Label Button WebView Grid Label Button Image ScrollView Image Panel LabelRenderer TextBlock ButtonRenderer Button WebViewRenderer WebView LabelRenderer Label ButtonRenderer Button ImageRenderer Image ScrollViewRenderer ImageRenderer Image Forms UWP+Compression
  26. 26. Grid StackLayout ContentView Label Button WebView Grid Label Button Image ScrollView Image Panel LabelRenderer ButtonRenderer WebViewRenderer WebView LabelRenderer ButtonRenderer ImageRenderer ScrollViewRenderer ImageRenderer Forms UWP+Compression+Fast Renderers
  27. 27. Pros: less renderers to create, manage and dispose less UI elements on screen Cons: compressed layouts can't have BG colors, gesture recognizers no transformation
  28. 28. FlexLayout Example <?xml version="1.0" encoding="UTF-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x=http://schemas.microsoft.com/winfx/2009/xaml x:Class="FormsFlexLayoutDemo.FlexDemoPage"> <FlexLayout x:Name="flexbox”> <Label Text="Flex Element 1" /> <Label Text="Flex Element 2" /> <Label Text="Flex Element 3" /> <Label Text="Flex Element 4" /> <Label Text="Flex Element 5" /> </FlexLayout> </ContentPage> Flex Element 1 Flex Element 2 Flex Element 3 Flex Element 4 Flex Element 5
  29. 29. AlignContent AlignItems Position Overflow Wrap Order AlignSelf Flex JustifyContent IsIncluded Grow Shrink FlexLayout Properties
  30. 30. Floating Action Button An Android-only control that has no Xamarin.Forms abstraction.
  31. 31. #if to target only the desired platform
  32. 32. Add the FAB
  33. 33. • Continuously deploy & debug apps Xamarin Live Player
  34. 34. Xamarin Live Player Setup
  35. 35. Call to action • Get started: xamarin.com/download • Use Xamarin.Forms 2.4.0 today! • Try Page Embedding, Layout Compression today from the Nightly Feed: • https://github.com/xamarin/Xamarin.Forms/wiki/Nightly-Builds
  36. 36. Open Source – open.xamarin.com
  37. 37. Sponsored By
  38. 38. Thank you. Questions? Rui Marinho Software Engineer, Xamarin Forms, Mobile Developer Tools @ruiespinho

Editor's Notes

  • https://github.com/jsuarezruiz/xamarin-forms-goodlooking-UI
  • Specially xaml and .net platforms
  • Multiple Teams
    Multiple Code Bases
    Expensive & Slow
    Positive = Great apps delivered to user’s platform
    Negative = Development hampered by multiple code bases & fragmentation
  • Inside of a page are layouts
    A lot of options from something simple like a stack panel to complex and powerful grids
  • You have more than 40 controls, layouts, and pages to mix and match from.
    These are all of the controls you have out of the box, you can of course create your own.
    What is unique is you get the native control and have access to it.
    Consider an Entry Field
    On iOS it is mapped to UITextField
    Android it is EditText
    Windows Phoen it is a TextBox
  • Screenshots of app UI tested. Maybe graph the improvement.
  • Kick off File > New with Live Player running
    What do we want to cover about building an app?
  • Listview - get rid xamarin of viewcells.. Add insert methods…
  • Kick off File > New with Live Player running
    What do we want to cover about building an app?
  • Possible embedding in Android or native Obj-C apps Navigate a Native level New Possibilities .. Just bring what you need to iOS or Android
  • Been working on layout compression for a while
    Initial testing is showing very positive results
    Will be a slow burn to get it fully implemented
  • 2 key parts of the layout lifecycle to know about
    First is invalidation loop
    Kicked off whenever a child calls invalidate measure
    The child will then begin chaining the call up to its parents, over and over
    This chart is of course an over-simplification and there are optimizations that can prevent this chaining from happening.
  • Second is the layout loop
    Occurs some undefined time AFTER the invalidation loop, may be immediate, not required to be
    Layout is called on a View
    View then calls Layout on all children, who then recurse into this
    Completes when all Layout cycles are finished
  • They are duplicate..
  • Pros:
    less renderers to create, manage and dispose
    less UI elements on screen
    Cons:
    compressed layouts can't have BG colors, gesture recognizers
    no transformation
    ...
  • Kick off File > New with Live Player running
    What do we want to cover about building an app?
  • https://itunes.apple.com/app/tickers/id1259870423?mt=12
  • Gtk# is a Graphical User Interface Toolkit for mono and .Net. The project binds the gtk+ toolkit and
    assorted GNOME libraries, enabling fully native graphical Gnome application development using the
    Mono and .Net development frameworks
  • Really beautiful, isn’t it. The talented people over at Samsung have done an incredible job.
  • Kick off File > New with Live Player running
    What do we want to cover about building an app?
  • Kick off File > New with Live Player running
    What do we want to cover about building an app?
  • https://github.com/rmarinho/XFNativeMix
  • https://developer.xamarin.com/guides/xamarin-forms/platform-features/platform-specifics/creating/
  • CheckableFab is a button implementation from Jeremie Laval
    https://blog.xamarin.com/embedding-native-controls-into-xamarin-forms/
  • ×