1. What’s New In Xamarin.Forms
NET322
Michael Ridland

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

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

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

5. Xamarin.Forms is Open Source!

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

7. 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 } }

8. 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); }

9. 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>

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

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

12. 1.4
ScrollView Enhancements
ListView Enhancements

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

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

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

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

17. Android AppCompat
[Activity(Label = "Ignite2017Demo.Droid", Icon = Theme = 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()); } }

18. 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} "); }

19. 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} "); }

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

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

22. 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; } }

23. 2.1 UWP support ControlTemplates DataTemplates DataTemplateSelector
Effects

24. Control Templates
Re-usable container templates

25. 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>

26. 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; } }

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

28. 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>

29. 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() { } } }

30. 2.2
CarouselView
UWP Maps
Margins

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

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

33. Directly Embed Native Controls
Native Embedding *
Directly Embed Native Controls

34. Native Embedding *

35. 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>

36. 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

37. 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">

38. Xaml Previewer

39. Release Schedule Milestone Estimated Release 2.3.3-next February 2017
Q1 2017
Q2 2017
Q3 2017

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

41. 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

42. 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

43. RoadMap - Focus
Quality
Stability
Performance

44. Continue your Ignite learning path
Visit Channel 9 to access a wide range of Microsoft training and event recordings
Head to the TechNet Eval Centre to download trials of the latest Microsoft products
Visit Microsoft Virtual Academy for free online training visit

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

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