Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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


  1. None
  2. None
  3. None
  4. None
  5. Native User Interfaces Native API Access Native Performance

  6. None
  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
  8. Write once, run anywhere Lua Javascript Actionscript HTML+CSS Limited native

    API access • Slow performance • Poor user experience App generator
  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
  10. None
  11. Xamarin Native approach 3 Native User Interfaces Shared App Logic

    Shared C# Logic Windows C# Android C# iOS C#
  12. Xamarin.Forms - Cross Platform UI Shared Native User Interface Shared

    App Logic Shared C# Logic Shared UI Code
  13. Layouts Pages Stack Absolute Relative Grid ContentView ScrollView Frame Content

    MasterDetail Navigation Tabbed Carousel
  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
  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/
  16. DependencyService MessagingCenter Navigation Themes

  17. MvvmCross MvvmLight Prism FreshMvvm ReactiveUI And more…

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

  21. https://t.co/t1DTDGUsv0

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

  23. None
  24. Effect Custom Renderer From standard experiences to total control

  25. None
  26. None
  27. None
  28. None
  29. None
  30. None
  31. [assembly: XamlCompilation (XamlCompilationOptions.Compile)] Namespace MyApp { …. <ListView x:Name="colorListView" Grid.Row="0"

    ItemsSource="{x:Static local:NamedColor.All}" RowHeight="40"> <ListView.ItemTemplate> <DataTemplate x:DataType="{x:Type local:NamedColor}" <ViewCell> <StackLayout Orientation="Horizontal"> <BoxView Color="{Binding Color}" HeightRequest="32" WidthRequest="32" VerticalOptions="Center" /> https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/data-binding/compiled-bindings/
  32. xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core" android:ListView.IsFastScrollEnabled="true"

  33. Button, Image, Label <Button /> AppCompatButton AppCompatButton

  34. None
  35. ContentPage 2 3 4 5 6 7 <StackLayout Spacing="0" CompressedLayout.IsHeadless="true"

    VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"> <Grid CompressedLayout.IsHeadless="true”> ... </Grid> ... </StackLayout>
  36. Uncompressed 130 Views Compressed 111 Views Compressed + Fast Renderers

  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#
  38. CreateViewController()

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

  42. None
  43. None
  44. None
  45. None
  46. None
  47. www.livexaml.com http://gorillaplayer.com https://github.com/ylatuya/XAMLator

  48. None
  49. None
  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
  51. 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">
  52. TitleView

  53. 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>
  54. 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>
  55. Button Padding

  56. OnPlatform & OnIdiom XAML Extensions <BoxView FlexLayout.AlignSelf="Center" WidthRequest="100" HeightRequest="100" BackgroundColor="{OnPlatform

    Android=#333333, iOS=#CC3300, Default=Green}" /> <BoxView FlexLayout.AlignSelf="Center" WidthRequest="100" HeightRequest="100"> <BoxView.BackgroundColor> <OnPlatform x:TypeArguments="Color" Default="Green"> <On Platform="iOS" Value="#CC3300"/> <On Platform="Android" Value="#333333"/> </OnPlatform> </BoxView.BackgroundColor> </BoxView>
  57. None
  58. None
  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
  60. None
  61. <ContentPage Visual="Material“ ..> <Entry Visual="Material“ ..>

  62. None
  63. None
  64. None
  65. None
  66. None
  67. None
  68. None
  69. None