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

More Decks by David Ortinau

Other Decks in Technology


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

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

    Shared C# Logic Windows C# Android C# iOS C#
  5. ActivityIndicator BoxView Button DatePicker Editor Entry Image Label ListView Map

    OpenGLView Picker ProgressBar SearchBar Slider Stepper TableView TimePicker WebView EntryCell ImageCell SwitchCell TextCell ViewCell
  6. 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/
  7. [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/
  8. ContentPage 2 3 4 5 6 7 <StackLayout Spacing="0" CompressedLayout.IsHeadless="true"

    VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"> <Grid CompressedLayout.IsHeadless="true”> ... </Grid> ... </StackLayout>
  9.  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#
  10. 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
  11. 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">
  12. 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>
  13. 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>
  14. 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>
  15. • 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