Getting the Most out of Visual Studio and Xamarin for Mobile Developers

Presented at DevReach in Sofia, Bulgaria.

There’s never been a better time to jump into mobile development with Xamarin. Microsoft continues to drive innovation for rapidly building Android, iOS, and Windows applications using languages and tools that make you productive. In this session we’ll explore the latest additions and improvements in Xamarin, Visual Studio, and App Center for mobile developers. Are you ready to do more?

Transcript

1. View Slide

2. View Slide

3. View Slide

4. View Slide

5. Native User Interfaces Native API Access Native Performance
   

   View Slide

6. View Slide

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

   View Slide

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

   View Slide

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

   View Slide

10. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

14. ActivityIndicator BoxView Button DatePicker Editor
    Entry Image Label ListView Map
    OpenGLView Picker ProgressBar SearchBar Slider
    Stepper TableView TimePicker WebView EntryCell
    ImageCell SwitchCell TextCell ViewCell
    

    View Slide

15. 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/
    

    View Slide

16. DependencyService
    MessagingCenter
    Navigation
    Themes
    

    View Slide

17. MvvmCross
    MvvmLight
    Prism
    FreshMvvm
    ReactiveUI
    And more…
    

    View Slide

18. View Slide

19. View Slide

20. https://javiersuarezruiz.wordpress.com/2018/08/20/xamarin-forms-challenge-pulsemusic/
    

    View Slide

21. https://t.co/t1DTDGUsv0
    

    View Slide

22. https://www.thewissen.io/xamarin-forms-ui-spotify/
    

    View Slide

23. View Slide

24. Effect Custom Renderer
    From standard experiences to total control
    

    View Slide

25. View Slide

26. View Slide

27. View Slide

28. View Slide

29. View Slide

30. View Slide

31. [assembly: XamlCompilation (XamlCompilationOptions.Compile)]
    Namespace MyApp { ….
    Grid.Row="0"
    ItemsSource="{x:Static local:NamedColor.All}"
    RowHeight="40">
    
    
    
    HeightRequest="32"
    WidthRequest="32"
    VerticalOptions="Center" />
    https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/data-binding/compiled-bindings/
    

    View Slide

32. xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
    android:ListView.IsFastScrollEnabled="true"
    

    View Slide

33. Button, Image, Label
    
    AppCompatButton AppCompatButton
    

    View Slide

34. View Slide

35. ContentPage 2
    3
    4
    5
    6
    7
    Spacing="0"
    CompressedLayout.IsHeadless="true"
    VerticalOptions="FillAndExpand"
    HorizontalOptions="FillAndExpand">
    CompressedLayout.IsHeadless="true”>
    ...
    
    ...
    
    

    View Slide

36. Uncompressed
    130 Views
    Compressed
    111 Views
    Compressed + Fast Renderers
    70 Views
    

    View Slide

37.  Xamarin.Forms Supported Features
    • XAML Compilation
    • Bindings
    • MessagingCenter
    • DependencyService
    • Create
    • UIViewController
    • Activity
    • Fragment
    • FrameworkElement
    Xamarin.Forms
    Shared C# Logic
    Windows C#
    Android C#
    iOS C#
    

    View Slide

38. CreateViewController()
    

    View Slide

39. View Slide

40. View Slide

41. https://github.com/xamarin/xamarin-android/wiki/Build-Performance-Results
    

    View Slide

42. View Slide

43. View Slide

44. View Slide

45. View Slide

46. View Slide

47. www.livexaml.com
    http://gorillaplayer.com
    https://github.com/ylatuya/XAMLator
    

    View Slide

48. View Slide

49. View Slide

50. F100: Addressing the Little Things
    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
    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
    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
    

    View Slide

51. Android Bottom Tabs
    1
    2
    3
    4
    5
    6
    7
    8
    9
    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">
    

    View Slide

52. TitleView
    

    View Slide

53. Bindable Span
    
    
    
    
    
    
    
    
    
    

    View Slide

54. Commandable Span Gestures
    
    
    
    
    
    
    Command="{Binding TapCommand, Mode=OneWay}"
    CommandParameter="https://www.xamarin.com"/>
    
    
    
    
    
    
    

    View Slide

55. Button Padding
    

    View Slide

56. OnPlatform & OnIdiom XAML Extensions
    FlexLayout.AlignSelf="Center"
    WidthRequest="100"
    HeightRequest="100"
    BackgroundColor="{OnPlatform Android=#333333, iOS=#CC3300, Default=Green}" />
    FlexLayout.AlignSelf="Center"
    WidthRequest="100"
    HeightRequest="100">
    
    
    
    
    
    
    
    

    View Slide

57. View Slide

58. View Slide

59. • Everything you can already
    do today in Xamarin.Forms
    • 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
    

    View Slide

60. View Slide

61. Visual="Material“
    ..>
    Visual="Material“
    ..>
    

    View Slide

62. View Slide

63. View Slide

64. View Slide

65. View Slide

66. View Slide

67. View Slide

68. View Slide

69. View Slide