What’s New In Xamarin.Forms NET322 Michael Ridland

Who’s this guy? Michael Ridland michaelridland.com / xam-consulting.com @rid00z michael@xam-consulting.com

It’s less buggy… much less buggy… 1800+ bugs resolved

it’s more performant… much more performant… 5-10x More Performant

Xamarin.Forms is Open Source!

1.3.0 - 1.3.5 Application Class Behaviors Triggers NavigationPage.HasBackButton protected virtual bool OnBackButtonPressed ();

New Application Class * Shared Application Class Global Events Set Apps MainPage (at any time) public partial class App : Application { public App() { InitializeComponent(); MainPage = new ContentPage { Content = new Label { Text = "My First Forms" } }; } protected override void OnStart() { // Handle when your app starts } protected override void OnSleep() { // Handle when your app sleeps } protected override void OnResume() { // Handle when your app resumes } }

Behaviours <Entry Grid.Column="1" Text="{Binding OtherPostcode}" Keyboard="Telephone"> <Entry.Behaviors> <local:PostcodeValidationBehavior/> </Entry.Behaviors> </Entry> public class PostcodeValidationBehavior : Behavior<Entry> { public static readonly BindableProperty MaxLengthProperty = BindableProperty.Create("MaxLength", typeof(int), typeof(PostcodeValidationBehavior), 4); public int MaxLength { get { return (int)GetValue(MaxLengthProperty); } set { SetValue(MaxLengthProperty, value); } } protected override void OnAttachedTo(Entry bindable) { bindable.TextChanged += OnEntryTextChanged; base.OnAttachedTo(bindable); }

Triggers /* Event Triggers */ <Label Text="Text must be a valid double or it will turn red." /> <Entry Placeholder="Enter a System.Double"> <Entry.Triggers> <EventTrigger Event="TextChanged"> <local:NumericValidationTriggerAction /> </EventTrigger> </Entry.Triggers> </Entry> /* Data Triggers */ <Label Text="Entry requires length>0 before button is enabled" FontSize="Small" /> <Entry x:Name="entry" Text="" Placeholder="required field" /><!-- referenced below in DataTrigger--> <Button x:Name="button" Text="Save" FontSize="Large" HorizontalOptions="Center"> <Button.Triggers> <DataTrigger TargetType="Button" Binding="{Binding Source={x:Reference entry}, Path=Text.Length}" Value="0"> <Setter Property="IsEnabled" Value="False" /> </DataTrigger> </Button.Triggers> </Button>

NavigationPage.HasBackButton public partial class HomeWallPage : ContentPage { public HomeWallPage() { //Remove the back button from navigation bar NavigationPage.SetHasBackButton(this, false); }

OnBackButtonPressed Override public partial class HomeWallPage : ContentPage { //Allows you to control the hardware back button (Android) protected override bool OnBackButtonPressed() { return true; }

1.4 ScrollView Enhancements ListView Enhancements

2.0 - 2.0.1 Precompiled XAML - XamlC Android AppCompat PanGestureRecognizer PinchGestureRecognizer ListViewCachingStrategy Layout Optimization

XamlC - Compiled Xaml XAML XAMLC Compile-time Runtime Parsed & turned into IL Runtime Parsed and inflated

XamlC - Benefits Faster Smaller App Size See XAML errors at build time

XamlC - Performance Analysis Overall it’s about 5x faster It increases build time a little (15s average app) Data thanks to Matthew - MFractor (http://www.mfractor.com/)

Android AppCompat [Activity(Label = "Ignite2017Demo.Droid", Icon = "@drawable/icon", Theme = "@style/MyTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)] public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity { protected override void OnCreate(Bundle bundle) { TabLayoutResource = Resource.Layout.Tabbar; ToolbarResource = Resource.Layout.Toolbar; base.OnCreate(bundle); global::Xamarin.Forms.Forms.Init(this, bundle); LoadApplication(new App()); } }

PinchGestureRecognizer <Image Source="waterfront.jpg"> <Image.GestureRecognizers> <PinchGestureRecognizer PinchUpdated="OnPinchUpdated" /> </Image.GestureRecognizers> </Image> void OnPinchUpdated(object sender, PinchGestureUpdatedEventArgs args) { Debug.WriteLine($"{args.Scale} {args.ScaleOrigin} {args.Status} "); }

PanGestureRecognizer <Image Source="MonoMonkey.jpg"> <Image.GestureRecognizers> <PanGestureRecognizer PanUpdated="OnPanUpdated" /> </Image.GestureRecognizers> </Image> void OnPanUpdated(object sender, PanUpdatedEventArgs args) { Debug.WriteLine($"{args.TotalX} {args.TotalY} {args.StatusType} "); }

ListView Cell Recycling Recycles old cells and updates the BindingContext Huge Performance Improvements <ListView CachingStrategy="RecycleElement" ItemsSource="{Binding Items}" ItemTemplate="{StaticResource homeTemplate}" > </ListView>

ListView Cell Recycling Recycles old cells and updates the BindingContext Huge Performance Improvements using System; namespace Xamarin.Forms { public enum ListViewCachingStrategy { RetainElement, RecycleElement } }

DataTemplateSelector Supports cell recycling Allows multiple views/types of cells public class MessageViewDataTemplateSelector : DataTemplateSelector { public DataTemplate IncomingTemplate { get; set; } public DataTemplate OutgoingTemplate { get; set; } protected override DataTemplate OnSelectTemplate(object item, BindableObject container) { return item is IncomingViewModel ? IncomingTemplate : OutgoingTemplate; } }

2.1 UWP support ControlTemplates DataTemplates DataTemplateSelector Effects

Control Templates Re-usable container templates

Control Templates /* Setup in Resources */ <ControlTemplate x:Key="AquaTemplate"> <Grid> <BoxView Grid.ColumnSpan="2" Color="Aqua" /> <Label Grid.Column="1" Text="Control Template Demo App" TextColor="Blue" /> <ContentPresenter Grid.Row="1" Grid.ColumnSpan="2" /> <BoxView Grid.Row="2" Grid.ColumnSpan="2" Color="Aqua" /> <Label Grid.Row="2" Grid.Column="1" Text="(c) Xamarin 2016" TextColor=“Blue" /> </Grid> </ControlTemplate> /* Used in Pages */ <ContentView x:Name="contentView" ControlTemplate="{StaticResource AquaTemplate}” Padding="0,20,0,0" > <StackLayout VerticalOptions="CenterAndExpand"> <Label Text="Welcome to the app!" HorizontalOptions="Center" /> <Button Text="Change Theme" Clicked="OnButtonClicked" /> </StackLayout> </ContentView>

DataTemplateSelector Allows multiple different type of cells Supports Cell Recycling public class HomeWallListDataTemplateSelector : DataTemplateSelector { public DataTemplate WhatsOnYourMindTemplate { get; set; } public DataTemplate FeedItemTemplate { get; set; } protected override DataTemplate OnSelectTemplate(object item, BindableObject container) { return item is WhatOnYourMindViewModel ? WhatsOnYourMindTemplate : FeedItemTemplate; } }

Effects Custom Renderer ‘lite’ Modify native control properties Optional - per platform Composition (No Inheritance)

Effects * /* Create a routing effect in our common library */ namespace FBPlay { public class CustomSearchBarEffects : RoutingEffect { public Color PlaceHolderBackgroundColor { get; set; } public CustomSearchBarEffects() : base("XamConsulting.CustomSearchBarEffects") { } } } /* Reference the effect */ <SearchBar BackgroundColor="{StaticResource FriendListGrey}" HorizontalOptions="FillAndExpand" Placeholder="Search"> <SearchBar.Effects> <local:CustomSearchBarEffects PlaceHolderBackgroundColor="{StaticResource FriendListGrey}"/> </SearchBar.Effects> </SearchBar>

Effects * [assembly: ResolutionGroupName("XamConsulting")] [assembly: ExportEffect(typeof(FBPlay.iOS.CustomSearchBarEffectsiOS), "CustomSearchBarEffects")] namespace FBPlay.iOS { public class CustomSearchBarEffectsiOS : PlatformEffect { protected override void OnAttached() { var effect = (CustomSearchBarEffects)Element.Effects.FirstOrDefault(i => i is CustomSearchBarEffects); var searchBar = (UISearchBar)Control; searchBar.TintColor = UIColor.White; UITextField text = (UITextField)searchBar.ValueForKey(new NSString("_searchField")); text.BackgroundColor = effect.PlaceHolderBackgroundColor.ToUIColor(); } protected override void OnDetached() { } } }

2.2 CarouselView UWP Maps Margins

CarouselView (not CarouselPage) Embeddable Carousel ItemTemplate & DataTemplate Fully Customisable Uses Recycling

2.3 - 2.3.3 Data Pages Themes Embedded Native Controls Support native view declaration in Xaml, and native Bindings Platform Specifics Previewer

Directly Embed Native Controls Native Embedding * Directly Embed Native Controls

Native Embedding *

Native Embedding - Xaml <StackLayout> <androidWidget:TextView x:Arguments="{x:Static formsandroid:Forms.Context}" Text="{Binding LabelName}" /> <ios:UITextView Text="{Binding LabelName, Mode=TwoWay, UpdateSourceEventName=Ended}" /> <iosColorPicker:ColorPickerView SelectedColor="{Binding Path=FormsSelectedColor, Mode=TwoWay, Converter={StaticResource colorConverterIOS}, > </iosColorPicker:ColorPickerView> </StackLayout>

Platform Specifics [iOS] Blur support for any VisualElement [iOS] Translucent navigation bar [Windows] Toolbar placement options [Windows] Partially collapsed navigation bar (with icons) on MasterDetailPage [Android] AdjustResize/AdjustPan

Platform Specifics <AbsoluteLayout HorizontalOptions="Center"> <Image Source="monkeyface.png" /> <BoxView x:Name="boxView" ios:VisualElement.BlurEffect="ExtraLight" HeightRequest="300" WidthRequest="300" /> </AbsoluteLayout> <Application ... xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.And android:Application.WindowSoftInputModeAdjust="Resize">

Xaml Previewer

Release Schedule Milestone Estimated Release 2.3.3-next February 2017 2.3.4 Q1 2017 2.4.0 Q2 2017 2.5.0 Q3 2017

RoadMap - 2.3.4 - Q1 2017 Performance Startup Time Improvements - Performance XAMLC Enhancements - Performance Features Bindable Picker OnIdiom Support for Desktop (UWP)

RoadMap - 2.4 - Q2 2017 Performance Compiled Native Views Fast Renderers Layout Compression Startup Time Improvements Features Accessibility (A11y) Support CarouselView v1 Stable CSS with FlexBox Support Popover Control Xamarin.Forms Embedding Xamarin.Forms for macOS Preview

RoadMap - 2.5 - Q3 2017 Performance Bulk renderer creation - (Android) Cut down on GPU overdraw for Android Fast Renderers Reduce native views created Single DLL Features G18n support MenuPage Popover Control Xamarin.Forms for macOS

RoadMap - Focus Quality Stability Performance

Continue your Ignite learning path Visit Channel 9 to access a wide range of Microsoft training and event recordings https://channel9.msdn.com/ Head to the TechNet Eval Centre to download trials of the latest Microsoft products http://Microsoft.com/en-us/evalcenter/ Visit Microsoft Virtual Academy for free online training visit https://www.microsoftvirtualacademy.com

Win a Spark After Dark drone pilot pass by completing your session evaluation ASAP  #MSAUIGNITE

Thank you Chat with me in the Speaker Lounge (all day today) Find me @rid00z or michaelridland.com