Techorama 2018: Xamarin Updates

Take a wild ride through all the latest cool stuff now shipping from Microsoft in Xamarin. See beautiful UIs, fluid animations and interactions from Grial Kit and Gorilla Player. Explore the upcoming features such as Xamarin.Forms Shell, CollectionView, and CarouselView.

Transcript

2. XAMARIN: NEW AND NEXT
3. David Ortinau @davidortinau 21 yrs. web, interactive, mobile Xamarin MVP 2013 - 2017 BA English, Maryville University Senior Program Manager Visual Studio Mobile Developer Tools Xamarin
4. DESKTOP WEB CLOUD MOBILE GAMING IoT AI .NET Your platform for building anything
5. Xamarin: Anything you can do in Objective-C, Swift, or Java, you can do in C# and Visual Studio • Native user interface • High-fidelity API access • Native performance
6. iOS APIs Windows APIs Android APIs Shared C# logic .NET for Mobile Apps Shared C# codebase • 100% native API access • High performance
7. Xamarin Native approach 3 Native User Interfaces Shared App Logic Shared C# Logic Windows C# Android C# iOS C#
8. Xamarin.Forms - Cross Platform Native UI Shared Native User Interface Shared App Logic Shared C# Logic Shared UI Code
9. Layouts Pages Stack Absolute Relative Grid ContentView ScrollView Frame Flex Content MasterDetail Navigation Tabbed Carousel
10. 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
11. 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/
13. Improving Build Times • Optimizing full builds • Optimize passes • Fix dependencies • Avoid unnecessary rebuilds • Optimize incremental builds • For your continuous testing
14. Creating an Android Package (APK) C# Compile Android Resource Compilation Inspect for Bridgeable Elements Extract Java and Native Libraries Compile Java DLL .java .aar Resources .cs constants User C# Code Compile DEX .dex .so Process Result shipped in final APK Intermediate file XAML Compile .cs glue
15. Cumulative Results – Complex app •Smart Hotel 360 application • 25,000 lines of C# • 99 NuGet packages • 47 from .NET standard • 16 Android Support Libraries (“extras”) • 5 Google Play Services • 3 Azure • 26 other (Skia + native code, Splat, Plugins, NewtonSoft.Json, helpers) • 32 XAML screens •Stable release (15.9): 02:15s •Current master: 0:57s
16. Fast Forms Inner Loop C# Compile Android Resource Compilation Inspect for Bridgeable Elements Extract Java and Native Libraries Compile Java DLL .java .aar Resources .cs constants User C# Code Compile DEX .dex .so Process Result shipped in final APK Intermediate file XAML Compile .cs glue
17. Speeding up your Workflow • Rebuild and run in 3 seconds • Proof of concept “Xamarin.Android.Lite”
18. IOS 12 XCODE 10
19. Shortcuts – Intents, Siri Integration • Surface your app to Siri • Your app can be part of a script • App “Donates” actions to the OS, that can be searched, replayed, and can have parameters.
20. ARKit 2.0 3D object detection, world sharing
21. Graham & Brown
22. ARKit – Resources
23. XAMARIN.FORMS LITTLE THINGS
24. Xamarin.Forms Ecosystem
28. Awesome Xamarin https://javiersuarezruiz.wordpress.com/2018/08/20/xamarin-forms-challenge-pulsemusic/
29. Awesome Xamarin https://github.com/jsuarezruiz/awesome-xamarin-forms
30. Lottie https://t.co/t1DTDGUsv0
31. Steven Thewissen https://www.thewissen.io/xamarin-forms-ui-spotify/
32. Steven Thewissen https://www.thewissen.io/xamarin-forms-ui-spotify/
33. Steven Thewissen https://www.thewissen.io/xamarin-forms-ui-spotify/
34. F100: Addressing the Little Things • Entry/Editor - IsSpellCheckEnabled - MaxLength - DetectReadingOrderFromContent (UWP) - Text prediction options - Autocapitalization - AutoResizable Editor - ButtonType for return button - Position and Color of caret - Placeholder color • Label - Bindable Spans - Commandable Spans, Span Gestures - LineHeight • ListView - Full width separators - SelectionMode • SearchBar IsSpellCheckEnabled • ImeOptions • DesignModeEnabled • Android Bottom Tabs • WebView mixed content (Android) • WebView evaluate javascript • Binding Mode OneTime • ProgressBar colors • Switch colors • Slider colors • Hide scroll bars • Button AccessKey • TabbedPage Icons (UWP) • Drop Shadows (iOS/UWP) • App DI Container Hooks • Button Padding • Page TitleView • BoxView rounded corners • WKWebView for iOS Coming Soon Label MaxLines Entry Read-Only ImageButton GIF Support Button and Label Parity PinsSource on Forms.Map WebView Zoom Controls (Android) Help Wanted Rounded Corners Rounded Image ProgressBar.Height InkWell Ripple Effect Size WebView to Content Floating Action Button Android Theme Capitalization override Project Board
35. Demo https://github.com/davidortinau/TheLittleThingsPlayground
36. LiveXAML https://www.livexaml.com/
37. Android Bottom Tabs 1 2 3 4 5 6 7 8 9 <TabbedPage … BarBackgroundColor="#F1F1F1" xmlns:android="clr- namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly =Xamarin.Forms.Core" android:TabbedPage.ToolbarPlacement="Bottom" android:TabbedPage.BarItemColor="#666666" android:TabbedPage.BarSelectedItemColor="Black">
38. TitleView
39. Bindable Span <Label> <Label.FormattedText> <FormattedString> <Span Text="Welcome " /> <Span Text="{Binding YourName}" FontAttributes="Bold"/> <Span Text=" to the Xamarin.Forms 3.1.0 playground!" /> </FormattedString> </Label.FormattedText> </Label>
40. Commandable Span Gestures <Label> <Label.FormattedText> <FormattedString> <Span Text="Sometimes you want a span to be tappable, like a phone number or URL: " /> <Span Text="{Binding Url, Mode=OneWay}" TextColor="Blue"> <Span.GestureRecognizers> <TapGestureRecognizer Command="{Binding TapCommand, Mode=OneWay}" CommandParameter="https://www.xamarin.com"/> </Span.GestureRecognizers> </Span> <Span Text=". Tap it to launch a browser."/> </FormattedString> </Label.FormattedText> </Label>
41. Button Padding <Button Text="Pad Me" Padding="60,40" BackgroundColor="Black" TextColor="White"/>
42. OnPlatform & OnIdiom XAML Extensions • Concise syntax • Supports Default value • Support Converter and ConverterParamter <BoxView FlexLayout.AlignSelf="Center" WidthRequest="100" HeightRequest="100" BackgroundColor="{OnPlatform Android=#333333, iOS=#CC3300, Default=Green}" />
43. Next Things Demos • CollectionView • CarouselView • Shell
44. Key Features of Shell • Performant by default • Same design on iOS and Android via Material Shell or Cupertino Shell • Platform specific design via Shell • Single file application structure • Flyout and Tabbed navigation • URL routed navigation, deep linking • Back navigation handling • Integrated Search handler • Snackbar • Bottom Sheet • Floating Action Button • Left Bar Button • Screen segues • Screen transitions • Plus everything you can already do today in Xamarin.Forms
45. THANKS! david.ortinau@microsoft.com @davidortinau
46. Xamarin Essentials A kit of essential cross platform APIs for your mobile apps – Native Android, Native iOS or Forms
47. More CSS Properties • ActivityIndicator, BoxView, ProgressBar, Switch • color • Grid • row-gap • column-gap • VisualElement • transform • transform-origin • Label • vertical-align
48. • Editor, Entry, SearchBar • -xf-placeholder • -xf-placeholder-color • Editor and Entry • -xf-max-length • NavigationPage, TabbedPage • -xf-bar-background-color • -xf-bar-text-color • ScrollView and StackLayout • -xf-orientation New Xamarin.Forms Specific CSS Properties
49. CollectionView • ListView but better • RecyclerView on Android • You provide the layout • Grid • Horizontal • Vertical • FlexLayout (?) • Context Menus • Gestures
50. Demo – CollectionView
52. Demo – CarouselView
53. Demo – CarouselView
54. Xamarin.Forms Shell • Performant by default • Same design on iOS and Android via MaterialShell • Platform design via Shell • Easily describe your entire app in one file • Flyout and Tabbed navigation • URL routed navigation, deep linking • Back navigation handling • Integrated Search handler • Snackbar • Bottom Sheet • Floating Action Button • Left Bar Button • Screen segues • Screen transitions • Plus everything you can already do today in Xamarin.Forms
55. <?xml version="1.0" encoding="UTF-8"?> <Shell xmlns=…> <Shell.Resources> <ResourceDictionary Source="Styles/Global.xaml"/> </Shell.Resources> <ShellItem Route="main" Title="Home"> <ShellSection Route="home" Title=“Home”> <ShellContent ContentTemplate="{DataTemplate local:MainPage}" /> </ShellSection> <ShellSection Route="activity" Title="Activity"> <ShellContent Route="shared" Title="Shared" ContentTemplate="{DataTemplate local:ActivityPage}" /> <ShellContent Route="notifications" Title="Notifications" ContentTemplate="{DataTemplate local:NotificationsPa </ShellSection> <ShellSection Route="updates" Title="Updates"> <ShellContent ContentTemplate="{DataTemplate local:UpdatesPage}" /> </ShellSection> </ShellItem> </Shell>
56. Supported Navigation UI Patterns In Shell 1 Page Bottom Tabs Bottom & Top Tabs Flyout Top Tabs <ShellItem Route="main" Title="Home"> <ShellContent Title="Home“ ContentTemplate="{DataTemplate local:MainPage}" /> <ShellSection Title="Notifications"> <ShellContent Title="Recent" ContentTemplate="{DataTemplate local:RecentActivityPage}" /> <ShellContent Title=“Alert Settings" ContentTemplate="{DataTemplate local:AlertSettingsPage}" /> </ShellSection> </ShellItem> <Shell FlyoutBehavior=“Disabled” …> <ShellContent> <local:MainPage /> </ShellContent> </Shell> <ShellItem> <ShellContent Title="Home“ ContentTemplate="{DataTemplate local:MainPage}" /> <ShellContent Title=“Notifications“ ContentTemplate="{DataTemplate local:NotificationsPage}" /> </ShellItem> <ShellItem Route="main" Title="Home"> <ShellSection> <ShellContent Title=“Page 1" ContentTemplate="{DataTemplate local:FirstPage}" /> <ShellContent Title=“Page 2" ContentTemplate="{DataTemplate local:SecondPage}" /> </ShellSection> </ShellItem> <Shell.FlyoutHeader> <ContentView HeightRequest=“300”> <Label Text=“Hello XamStore” …/> </ContentView> </Shell.FlyoutHeader> <ShellItem Route="main" Title="Home"> <ShellContent ContentTemplate=“{DataTemplate local:MainPage}” /> </ShellItem> <ShellItem Route=“notifications” Title=“Notifications”> <ShellContent ContentTemplate=“{DataTemplate local:NotificationsPage}” /> </ShellItem>
57. Gestures • Generic Touch • Long Press • Pan • IsPanning • Pinch • Rotate • Tap • IsTapping • NumberOfTouches • UpdateEventArgs Needs Your Input and Vote https://github.com/xamarin/Xamarin.Forms/labels/a%2Fgest ures
58. THANKS! david.ortinau@microsoft.com @davidortinau
61. <?xml version="1.0" encoding="UTF-8"?> <Shell xmlns=…> <Shell.Resources> <ResourceDictionary Source="Styles/Global.xaml"/> </Shell.Resources> <ShellItem Route="main" Title="Home"> <ShellSection Route="home" Title=“Home”> <ShellContent ContentTemplate="{DataTemplate local:MainPage}" /> </ShellSection> <ShellSection Route="activity" Title="Activity"> <ShellContent Route="shared" Title="Shared" ContentTemplate="{DataTemplate local:ActivityPage}" /> <ShellContent Route="notifications" Title="Notifications" ContentTemplate="{DataTemplate local:NotificationsPa </ShellSection> <ShellSection Route="updates" Title="Updates"> <ShellContent ContentTemplate="{DataTemplate local:UpdatesPage}" /> </ShellSection> </ShellItem> </Shell>
62. Supported Navigation UI Patterns in Shell 1 Page Bottom Tabs Bottom & Top Tabs Flyout Top Tabs
63. <?xml version="1.0" encoding="UTF-8"?> <Shell xmlns=…> <Shell.Resources> <ResourceDictionary Source="Styles/Global.xaml"/> </Shell.Resources> <ShellItem Route="main" Title="Home"> <ShellSection> <ShellContent Route="home" Title=“Home” ContentTemplate="{DataTemplate local:MainPage}" /> </ShellSection> <ShellSection Route="activity" Title="Activity"> <ShellContent Route="shared" Title="Shared" ContentTemplate="{DataTemplate local:ActivityPage}" /> <ShellContent Route="notifications" Title="Notifications" ContentTemplate="{DataTemplate local:NotificationsPa </ShellSection> <ShellSection> <ShellContent Route="updates" Title="Updates“ ContentTemplate="{DataTemplate local:UpdatesPage}" /> </ShellSection> </ShellItem> </Shell>
64. Supported Navigation UI Patterns In Shell 1 Page Bottom Tabs Bottom & Top Tabs Flyout Top Tabs <ShellItem Route="main" Title="Home"> <ShellContent Title="Home“ ContentTemplate="{DataTemplate local:MainPage}" /> <ShellSection Title="Notifications"> <ShellContent Title="Recent" ContentTemplate="{DataTemplate local:RecentActivityPage}" /> <ShellContent Title=“Alert Settings" ContentTemplate="{DataTemplate local:AlertSettingsPage}" /> </ShellSection> </ShellItem> <Shell FlyoutBehavior=“Disabled” …> <ShellContent> <local:MainPage /> </ShellContent> </Shell> <ShellItem> <ShellContent Title="Home“ ContentTemplate="{DataTemplate local:MainPage}" /> <ShellContent Title=“Notifications“ ContentTemplate="{DataTemplate local:NotificationsPage}" /> </ShellItem> <ShellItem Route="main" Title="Home"> <ShellSection> <ShellContent Title=“Page 1" ContentTemplate="{DataTemplate local:FirstPage}" /> <ShellContent Title=“Page 2" ContentTemplate="{DataTemplate local:SecondPage}" /> </ShellSection> </ShellItem> <Shell.FlyoutHeader> <ContentView HeightRequest=“300”> <Label Text=“Hello XamStore” …/> </ContentView> </Shell.FlyoutHeader> <ShellItem Route="main" Title="Home"> <ShellContent ContentTemplate=“{DataTemplate local:MainPage}” /> </ShellItem> <ShellItem Route=“notifications” Title=“Notifications”> <ShellContent ContentTemplate=“{DataTemplate local:NotificationsPage}” /> </ShellItem>