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

5. Native User Interfaces Native API Access Native Performance
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
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…
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/
24. Effect Custom Renderer From standard experiences to total control
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
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 70 Views
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()
41. https://github.com/xamarin/xamarin-android/wiki/Build-Performance-Results
47. www.livexaml.com http://gorillaplayer.com https://github.com/ylatuya/XAMLator
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>
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
61. <ContentPage Visual="Material“ ..> <Entry Visual="Material“ ..>