Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Desktop Developer’s Guide to Mobile with Visual Studio Tools for Xamarin

339 views

Published on

These are the slides from Mark Smith's webinar where he shows how to apply your existing desktop development skills, knowledge, and code to mobile development. With Microsoft’s mobile tools and cloud services, you can start delivering native user experiences without learning new languages.

Mark compares desktop and mobile UI/UX and share best practices for porting existing desktop apps to Android, iOS, and UWP. Whether you’re building apps for consumers, employees, or suppliers, you’ll learn how to overcome common obstacles and get the step-by-step training you need to deliver high quality apps.

Watch the webinar recording at aka.ms/xamu-desktop-devs-video

Published in: Software
  • Be the first to comment

  • Be the first to like this

Desktop Developer’s Guide to Mobile with Visual Studio Tools for Xamarin

  1. 1. Principal Program Manager Xamarin University @marksm github.com/markjulmar
  2. 2. Agenda • Intro to Visual Studio Tools for Xamarin • Mobile UI approaches • Shifting to mobile APIs • Consider the User Experience • Resources and Q & A
  3. 3. from a shared code base
  4. 4. Visual Studio for Windows or Mac .NET Languages .NET Libraries
  5. 5. If you’re a .NET developer, you can build native mobile apps
  6. 6. 3 native UI definitions Shared App Logic Shared C# Logic Windows C#Android C#iOS C#
  7. 7. Shared C# Logic Windows C#Android C#iOS C# Shared UI definition Single shared UI definition Shared App Logic
  8. 8. 90s 2002 2006 2011 2015 * Green doesn't mean "simple,” it means that the frameworks have the most in common
  9. 9. 2006 2011 2015
  10. 10. Talks to a web service Parses a data format Performs processing or logic Uses a database
  11. 11. Accesses system information Uses files and folders on the device Accesses personal information Uses external devices
  12. 12. App Singleton Data Binding Behaviors Implicit and Explicit Styles Data Templates Data Triggers Property Triggers XAML Layout Model Designed for MVVMAnimations
  13. 13. Xamarin.FormsUWP
  14. 14. <Label Text="Text={Binding Source={StaticResource resourceKey}, Path=PropertyName, Mode=OneWay}" Source Target Any Object Any public property BindableObject BindablePropertyBinding label.SetBinding(Label.TextProperty, new Binding("PropertyName", source: someObject));
  15. 15. this.DataContext = new MainViewModel(); this.BindingContext = new MainViewModel();
  16. 16. Text={Binding ElementName=otherControl, Path=Text} Text={Binding Source={x:Reference otherControl}, Path=Text}
  17. 17. Layout containers organize children "Measure and Arrange" layout algorithm Can create custom panels for unique requirements
  18. 18. WPF / UWP Xamarin.Forms Layout Style StackPanel StackLayout Left-to-right, or top-to-bottom infinite stacking Grid Grid Tabular format (rows and columns); Xamarin.Forms does not support dynamic splitting DockPanel n/a Dock to edges of window Canvas AbsoluteLayout Pixel/Coordinate positioning WrapPanel n/a Wrapping stack RelativePanel RelativeLayout Relative rule-based positioning UniformGrid n/a Provides a tabular grid of uniform size ScrollViewer ScrollViewer Provides scrolling container for content
  19. 19. WPF Xamarin.Forms Layout Style Horizontal Alignment Horizontal Options Align an element to left/start, center, or right/end of the parent container VerticalAlignment VerticalOptions Align an element to the top/start, middle, or bottom/end of the parent container Margin Margin Add spacing on the outside of an element Padding Padding Add spacing to the inside of an element n/a Spacing Property exposed by layout containers to provide spacing around each child contained in the panel
  20. 20. ctor resumed suspended
  21. 21. Content Page Master Detail Page Navigation Page Tabbed Page Carousel Page
  22. 22. Editor Map Slider EntryCell ActivityIndicator Entry OpenGLView Stepper ImageCell BoxView Image Picker TableView SwitchCell Button Label ProgressBar TimePicker TextCell DatePicker ListView SearchBar WebView ViewCell More to come
  23. 23. Label Renderer Label Renderer Label Renderer TextView TextBlock Cross-platform Platform-specific iOS Android Windows
  24. 24. StackLayout stack = new StackLayout(); #if __IOS__ var segmentControl = new UISegmentedControl { Frame = new CGRect(20, 20, 280, 40) }; segmentControl.InsertSegment("One", 0, false); segmentControl.InsertSegment("Two", 1, false); segmentControl.SelectedSegment = 1; segmentControl.ValueChanged += async (sender, e) => { var id = (sender as UISegmentedControl).SelectedSegment; await MainPage.DisplayAlert( $"Native Segmented Control Clicked {id}", "Whoa!!!!!!", "OK"); }; stack.Children.Add(segmentControl); #endif
  25. 25. Embrace minimalism • Simplify: what are users’ core tasks? • Avoid multiple information columns • Design each screen to do one thing
  26. 26. material.io/guidelines/material-design/introduction.html developer.apple.com/design/ docs.microsoft.com/en-us/windows/uwp/style/
  27. 27. Steven Hoober , UX Matters Images: Stephanie Walter
  28. 28. Do you want to close it? Wait OK Embrace async
  29. 29. Embrace vector graphics • Use properly sized images • Include multiple sizes, based on the supported device form factors • Prefer vector formats (.svg or .pdf)
  30. 30. developer.xamarin.com/guides/cross-platform/advanced/accessibility/
  31. 31. Pew Research Center, 2015 Global Web Index, 2016 Think with Google, 2016 66% have multiple devices 21% use them concurrently
  32. 32. Fragmentation Unreliable networks User interaction Limited resources Interruptions and constant use
  33. 33. Tap, Double Tap, Long Press Swipe and Scroll Hardware Buttons (Back and Menu buttons) Enter Text Clear Text Capture Screenshot
  34. 34. mobile.azure.com
  35. 35. aka.ms/buy-xamarin-university
  36. 36. • Slides and Demos github.com/markjulmar/desktop-to-Xamarin • Create your free Visual Studio Mobile Center account mobile.azure.com • Register an account and access free training resources university.xamarin.com • More documentation developer.xamarin.com/desktop

×