$30 off During Our Annual Pro Sale. View Details »

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

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?

David Ortinau

November 13, 2018
Tweet

More Decks by David Ortinau

Other Decks in Technology

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