Native User Interfaces with Shared C# Code

rumar@microsoft.com
http://ruimarinho.net

Native User Interfaces Native API Access Native Performance

Silo approach
iOS WindowsAndroid
Objective-C/Swift
Xcode
C#
Visual Studio
Java
Android Studio
No shared code • Many languages and development environments • Multiple teams

Write once, run anywhere
Lua
Javascript
Actionscript
HTML+CSS
Limited native API access • Slow performance • Poor user experience
App
generator

iOS C# UI Windows C# UIAndroid C# UI
Shared C# logic
Xamarin’s unique approach
Shared C# codebase • 100% native API access • High performance

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#

iOS – 100% API coverage
MapKit UIKit iBeacon CoreGraphics CoreMotion
C#

Android – 100% API coverage
Text-to-speech ActionBar Printing Framework Renderscript NFC
C#

Xamarin Native approach
3 Native User Interfaces
Shared App Logic
Shared C# Logic
Windows C#Android C#iOS C#

Xamarin.Forms- Cross Platform UI
Shared Native User Interface
Shared App Logic
Shared C# Logic
Shared UI Code

Layouts
Pages
Stack Absolute Relative Grid ContentView ScrollView Frame
Content MasterDetail Navigation Tabbed Carousel

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

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/

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

• 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

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

vNext
• Page Embedding
• Layout Compression
• Right-to-Left
• ListView enhancements
• Gesture enhancements
• FlexLayout
• VSM
• macOS, GTK

XAML Standard
• Lots of feedback!
• Reconciling the APIs we can without breakage
• Share implementations of
• x:Bind
• Visual State Manager

Xamarin.Forms
Page Embedding
Shared C# Logic
Windows C#Android C#iOS C#
iOS
Obj-C
Swift
Android Java ?

• 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;
…..

• 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();
}
…..

Layout Lifecycle:
Invalidation Loop Has Parent?
InvalidateMeasure Called
Call InvalidateMeasure on
Parent
Queue Delay Layout
Yes
No
1
2
3
4

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

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

Grid
StackLayout
ContentView
Label
Button WebView
Grid
Image
Panel
LabelRenderer
TextBlock
ButtonRenderer
Button
WebViewRenderer
WebView
LabelRenderer
Label
ButtonRenderer
Button
ImageRenderer
Image
ScrollViewRenderer
ImageRenderer
Image
Forms
UWP+Compression

Grid
StackLayout
ContentView
Label
Button WebView
Grid
Image
Panel
LabelRenderer ButtonRenderer WebViewRenderer
WebView
LabelRenderer ButtonRenderer ImageRenderer ScrollViewRenderer
ImageRenderer
Forms
UWP+Compression+Fast Renderers

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

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" />
</FlexLayout>
</ContentPage>
Flex Element 1 Flex Element 2 Flex Element 3
Flex Element 4 Flex Element 5

AlignContent AlignItems Position Overflow
Wrap Order AlignSelf Flex
JustifyContent IsIncluded Grow Shrink
FlexLayout Properties

Floating Action Button
An Android-only control that has no
Xamarin.Forms abstraction.

#if to target only the desired platform

• Continuously deploy & debug apps
Xamarin Live Player

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

Open Source – open.xamarin.com

Thank you.
Questions?
Rui Marinho
Software Engineer, Xamarin Forms, Mobile Developer Tools
@ruiespinho

Native User Interfaces with Shared C# Code

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Native User Interfaces with Shared C# Code

Similar a Native User Interfaces with Shared C# Code (20)

Último

Último (9)

Native User Interfaces with Shared C# Code

Notas del editor