![Passing Data
Pass data values directly into a page’s constructor
Other ways to pass data between pages:
• Static data instance (global) available to all pages
• Static properties on the Application object
• Static Properties dictionary to persist key/ value pairs to disk
• Application.Current.Properties["id"] = 12345;](https://image.slidesharecdn.com/xamarinnavigationpatterns-generic-160411190428/85/Xamarin-Navigation-Patterns-36-320.jpg)
Ad
More Related Content
Viewers also liked (10)
Similar to Xamarin Navigation Patterns (20)
Ad
More from danhermes (9)
Ad
Xamarin Navigation Patterns
- 1. Xamarin Navigation Patterns Dan Hermes developer, author, consultant, founder of Lexicon Systems [email protected] www.mobilecsharpcafe.com @danhermes
- 2. About me • Software consultant since 1999 • Code, write, and lead teams • Minecraft, tiki cocktails, my parrot, and digital art • I love Xamarin
- 3. Xamarin Book Now Available on Amazon “This weighty book gives clear guidance that will help you build quality apps, starting with architectural considerations, and then jumping into practical code strategies.” - Bryan Costanich, Vice President, Xamarin “Dan Hermes’ extraordinary book is the most intelligent work on cross-platform mobile development I’ve seen.” – Jesse Liberty, Director of New Technology Development, Falafel Software, Xamarin Certified Developer / Xamarin MVP
- 4. • Founded in 1999 • Develop web and mobile apps • Microsoft technology stack We build apps for business
- 7. What is Navigation? Gets our user from place to place
- 8. What is Navigation? Provides the UI skeleton of our entire app
- 9. What is Navigation? Gives users what they need to get around an app quickly, moving from screen to screen with confidence and ease
- 10. Navigation Patterns •Hierarchical •Modal •Drill-down list •Navigation drawer •Tabs •Springboard •Carousel
- 12. Drill-down List
- 14. Tabs
- 15. Springboard
- 16. Carousel
- 17. Xamarin.Forms Navigation Navigation Pattern Xamarin.Forms Class Hierarchical NavigationPage Modal NavigationPage, alerts, and ActionSheets Drill-down lists NavigationPage, ListView, and TableView Navigation drawer MasterDetailPage Tabs TabbedPage Springboard images with gesture recognizers Carousel CarouselPage
- 18. Most Common Navigation Patterns • Hierarchical • Modal
- 19. Hierarchical • stack-based pattern • allows users to move down into a stack of screens • pop back out again, one screen at a time • drill-down or breadcrumb
- 20. Hierarchical: Up and Back Buttons Up Back Up
- 21. Hierarchical Navigation using NavigationPage • Instantiate a NavigationPage and pass in a ContentPage • In the child page: • Set Title and Icon Properties • Navigation.PushAsync (new MyPage) • Navigation.PopAsync();
- 22. NavigationPage public class App : Application { { public App() { MainPage = new NavigationPage(new HomePage()); } }
- 24. NavigationPage: Remove and Insert • Navigation.RemovePage(page); • Navigation.InsertPageBefore(insertPage, beforePage);
- 25. Back Button public override void OnBackButtonPressed() { // your code here base.OnBackButtonPressed (); }
- 26. Modal
- 27. Modal Types 1. Box: floats on top of the main page and is usually an alert, dialog box, or menu that the user can respond to or cancel 2. Screen: replaces the main page entirely, interrupting the hierarchical navigation stack
- 28. Modals in Xamarin.Forms • NavigationPage for full-page modals • Alerts for user notifications • Action sheets for pop-up menus
- 29. Full Screen Modal using Push and Pop • Navigation.PushModalAsync( new nextPage()); • Navigation.PopModalAsync();
- 30. Full Screen Modal using Push and Pop • Demo: ModalPage
- 31. Modal: Alerts Boolean answer = await DisplayAlert(" Start", "Are you ready to begin?", "Yes", "No");
- 32. Modal: Action Sheets Button button = new Button { Text = "Show ActionSheet" }; button.Clicked += async (sender, e) => { String action = await DisplayActionSheet("Options", "Cancel", null, "Here", "There", "Everywhere"); label.Text = "Action is :" + action; };
- 34. Modal: Action Sheets • Demo: PopupMenu
- 35. State Management • Maintain the illusion of continuity during navigation • Sharing of data between screens • Pass variables directly into an instantiated ContentPage
- 36. Passing Data Pass data values directly into a page’s constructor Other ways to pass data between pages: • Static data instance (global) available to all pages • Static properties on the Application object • Static Properties dictionary to persist key/ value pairs to disk • Application.Current.Properties["id"] = 12345;
- 37. Passing Data Pass data values directly into a page’s constructor • Demo: DrilldownListViewByItem Other ways: • Demo:GlobalPage1, Global • Demo: PropertiesPage1
- 38. Drill-down Lists • by Item • by Page • Grouped
- 39. Drill-down Lists • by Item – use a ListView • by Page – use a ListView • Grouped – use a TableView Use PushAsync when user clicks a row
- 40. Drill-down Lists: NavigationPage • Wrap list page in a NavigationPage public class App : Application { public App() { MainPage = new NavigationPage(new DrilldownListViewByItem ()); } }
- 41. Drill-down Lists • Demo: DrilldownListViewByItem • Demo: DrilldownListViewByPage • Demo: DrilldownTableView
- 42. Navigation Drawer • Demo: MasterDetailPage • App.cs • NavigationDrawer.cs • HomePage.cs
- 43. Tabs using TabbedPage • Static • Data-bound • Demos
- 44. Springboard: Images with Gesture Recognizers • Roll your own Springboard (demo)
- 45. Carousel using CarouselPage this.Children.Add(new FirstPage()); this.Children.Add(new SecondPage()); this.Children.Add(new ThirdPage()); demo
- 46. Xamarin.Forms Navigation Navigation Pattern Xamarin.Forms Class Hierarchical NavigationPage Modal NavigationPage, alerts, and ActionSheets Drill-down lists NavigationPage, ListView, and TableView Navigation drawer MasterDetailPage Tabs TabbedPage Springboard images with gesture recognizers Carousel CarouselPage
- 47. Xamarin.Android Navigation • Hierarchical navigation using Toolbar or ActionBar • Modal using DialogFragment, AlertDialog, and PopupMenu • Drill-down list using ListView • Navigation drawer using DrawerLayout • Tabs using ActionBar
- 48. Xamarin.iOS Navigation • Hierarchical navigation using UINavigationController, the push segue, or the PushViewController • Modal using the modal segue, the PresentViewController, and UIAlertAcontroller • Drill-down list using UINavigationController • Navigation drawer using components • Tabs using UITabBarController
- 49. It’s all on GitHub https://github.com/danhermes/xamarin-book-examples
- 50. Jesse Liberty’s Video Courses: Pluralsight.com • Creating Custom Controls in Xamarin.Forms • Beginning Automated Testing of Xamarin Applications • Beginning Mobile Development with Xamarin • Xamarin.Forms and Data • XAML for Xamarin.Forms https://www.pluralsight.com/authors/jesse-liberty
- 51. Need Something Xamarin-flavored? • I do Xamarin consultations • I do Xamarin coaching and training • My firm does Xamarin development • We help make Xamarin projects work
- 52. Xamarin Navigation Patterns Dan Hermes developer, author, consultant, founder of Lexicon Systems [email protected] Available on Amazon My blog: www.mobilecsharpcafe.com Twitter: @danhermes
Editor's Notes
- #11: Why all the funny names? CROSS PLATFORM terms Inspired in part by by Adam Kemp’s blog post, Navigation in Xamarin.Forms and Mobile Design Pattern Gallery by Theresa Neil @TheRealAdamKemp
- #12: Why all the funny names? CROSS PLATFORM terms Inspired in part by by Adam Kemp’s blog post, Navigation in Xamarin.Forms and Mobile Design Pattern Gallery by Theresa Neil @TheRealAdamKemp
- #13: Why all the funny names? CROSS PLATFORM terms Inspired in part by by Adam Kemp’s blog post, Navigation in Xamarin.Forms and Mobile Design Pattern Gallery by Theresa Neil @TheRealAdamKemp
- #17: Carousel – we’ll get to it. – Doesn’t show well in a static image
- #19: images
- #20: Drill-down (push onto stack), pop back up
- #21: images
- #24: Dropdown menu - ToolBarItems
- #27: Single, interruptive pop-up or screen can usually be dismissed with a Cancel button
- #37: Both the global and Application object techniques use the singleton pattern, and are useful for app-wide classes such as data access or business objects.