Model-Based Clustering and Visualization of Navigation Patterns on a Web Site
Xamarin Navigation Patterns
Transcript of Xamarin Navigation Patterns
![Page 1: Xamarin Navigation Patterns](https://reader035.fdocuments.net/reader035/viewer/2022062820/58aaff4c1a28abd35e8b5885/html5/thumbnails/1.jpg)
Xamarin Navigation Patterns
Dan Hermesdeveloper, author, consultant,
founder of Lexicon Systems
@danhermes
![Page 2: Xamarin Navigation Patterns](https://reader035.fdocuments.net/reader035/viewer/2022062820/58aaff4c1a28abd35e8b5885/html5/thumbnails/2.jpg)
About me• Software consultant since 1999• Code, write, and lead teams •Minecraft, tiki cocktails, my parrot, and digital art• I love Xamarin
![Page 3: Xamarin Navigation Patterns](https://reader035.fdocuments.net/reader035/viewer/2022062820/58aaff4c1a28abd35e8b5885/html5/thumbnails/3.jpg)
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
![Page 4: Xamarin Navigation Patterns](https://reader035.fdocuments.net/reader035/viewer/2022062820/58aaff4c1a28abd35e8b5885/html5/thumbnails/4.jpg)
• Founded in 1999• Develop web and mobile
apps• Microsoft technology stack
We build apps for business
![Page 5: Xamarin Navigation Patterns](https://reader035.fdocuments.net/reader035/viewer/2022062820/58aaff4c1a28abd35e8b5885/html5/thumbnails/5.jpg)
Our Clients Include
![Page 6: Xamarin Navigation Patterns](https://reader035.fdocuments.net/reader035/viewer/2022062820/58aaff4c1a28abd35e8b5885/html5/thumbnails/6.jpg)
What is Navigation?
![Page 7: Xamarin Navigation Patterns](https://reader035.fdocuments.net/reader035/viewer/2022062820/58aaff4c1a28abd35e8b5885/html5/thumbnails/7.jpg)
What is Navigation?
Gets our user from place to place
![Page 8: Xamarin Navigation Patterns](https://reader035.fdocuments.net/reader035/viewer/2022062820/58aaff4c1a28abd35e8b5885/html5/thumbnails/8.jpg)
What is Navigation?
Provides the UI skeleton of our entire app
![Page 9: Xamarin Navigation Patterns](https://reader035.fdocuments.net/reader035/viewer/2022062820/58aaff4c1a28abd35e8b5885/html5/thumbnails/9.jpg)
What is Navigation?
Gives users what they need to get around an app quickly, moving from screen to screen with confidence and ease
![Page 10: Xamarin Navigation Patterns](https://reader035.fdocuments.net/reader035/viewer/2022062820/58aaff4c1a28abd35e8b5885/html5/thumbnails/10.jpg)
Navigation Patterns
•Hierarchical •Modal •Drill-down list •Navigation drawer•Tabs•Springboard•Carousel
![Page 11: Xamarin Navigation Patterns](https://reader035.fdocuments.net/reader035/viewer/2022062820/58aaff4c1a28abd35e8b5885/html5/thumbnails/11.jpg)
Hierarchical
Modal
![Page 12: Xamarin Navigation Patterns](https://reader035.fdocuments.net/reader035/viewer/2022062820/58aaff4c1a28abd35e8b5885/html5/thumbnails/12.jpg)
Drill-down List
![Page 13: Xamarin Navigation Patterns](https://reader035.fdocuments.net/reader035/viewer/2022062820/58aaff4c1a28abd35e8b5885/html5/thumbnails/13.jpg)
Navigation Drawer
![Page 14: Xamarin Navigation Patterns](https://reader035.fdocuments.net/reader035/viewer/2022062820/58aaff4c1a28abd35e8b5885/html5/thumbnails/14.jpg)
Tabs
![Page 15: Xamarin Navigation Patterns](https://reader035.fdocuments.net/reader035/viewer/2022062820/58aaff4c1a28abd35e8b5885/html5/thumbnails/15.jpg)
Springboard
![Page 16: Xamarin Navigation Patterns](https://reader035.fdocuments.net/reader035/viewer/2022062820/58aaff4c1a28abd35e8b5885/html5/thumbnails/16.jpg)
Carousel
![Page 17: Xamarin Navigation Patterns](https://reader035.fdocuments.net/reader035/viewer/2022062820/58aaff4c1a28abd35e8b5885/html5/thumbnails/17.jpg)
Xamarin.Forms NavigationNavigation 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
![Page 18: Xamarin Navigation Patterns](https://reader035.fdocuments.net/reader035/viewer/2022062820/58aaff4c1a28abd35e8b5885/html5/thumbnails/18.jpg)
Most Common Navigation Patterns
• Hierarchical• Modal
![Page 19: Xamarin Navigation Patterns](https://reader035.fdocuments.net/reader035/viewer/2022062820/58aaff4c1a28abd35e8b5885/html5/thumbnails/19.jpg)
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
![Page 20: Xamarin Navigation Patterns](https://reader035.fdocuments.net/reader035/viewer/2022062820/58aaff4c1a28abd35e8b5885/html5/thumbnails/20.jpg)
Hierarchical: Up and Back Buttons
Up
Back
Up
![Page 21: Xamarin Navigation Patterns](https://reader035.fdocuments.net/reader035/viewer/2022062820/58aaff4c1a28abd35e8b5885/html5/thumbnails/21.jpg)
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();
![Page 22: Xamarin Navigation Patterns](https://reader035.fdocuments.net/reader035/viewer/2022062820/58aaff4c1a28abd35e8b5885/html5/thumbnails/22.jpg)
NavigationPage
public class App : Application {{ public App() {
MainPage = new NavigationPage(new HomePage()); }}
![Page 23: Xamarin Navigation Patterns](https://reader035.fdocuments.net/reader035/viewer/2022062820/58aaff4c1a28abd35e8b5885/html5/thumbnails/23.jpg)
NavigationPage
• Demo: HomePage
![Page 24: Xamarin Navigation Patterns](https://reader035.fdocuments.net/reader035/viewer/2022062820/58aaff4c1a28abd35e8b5885/html5/thumbnails/24.jpg)
NavigationPage:Remove and Insert• Navigation.RemovePage(page);• Navigation.InsertPageBefore(insertPage, beforePage);
![Page 25: Xamarin Navigation Patterns](https://reader035.fdocuments.net/reader035/viewer/2022062820/58aaff4c1a28abd35e8b5885/html5/thumbnails/25.jpg)
Back Button
public override void OnBackButtonPressed(){ // your code here base.OnBackButtonPressed ();}
![Page 26: Xamarin Navigation Patterns](https://reader035.fdocuments.net/reader035/viewer/2022062820/58aaff4c1a28abd35e8b5885/html5/thumbnails/26.jpg)
Modal
![Page 27: Xamarin Navigation Patterns](https://reader035.fdocuments.net/reader035/viewer/2022062820/58aaff4c1a28abd35e8b5885/html5/thumbnails/27.jpg)
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
![Page 28: Xamarin Navigation Patterns](https://reader035.fdocuments.net/reader035/viewer/2022062820/58aaff4c1a28abd35e8b5885/html5/thumbnails/28.jpg)
Modals in Xamarin.Forms
• NavigationPage for full-page modals • Alerts for user notifications • Action sheets for pop-up menus
![Page 29: Xamarin Navigation Patterns](https://reader035.fdocuments.net/reader035/viewer/2022062820/58aaff4c1a28abd35e8b5885/html5/thumbnails/29.jpg)
Full Screen Modal using Push and Pop• Navigation.PushModalAsync( new nextPage());
• Navigation.PopModalAsync();
![Page 30: Xamarin Navigation Patterns](https://reader035.fdocuments.net/reader035/viewer/2022062820/58aaff4c1a28abd35e8b5885/html5/thumbnails/30.jpg)
Full Screen Modal using Push and Pop• Demo: ModalPage
![Page 31: Xamarin Navigation Patterns](https://reader035.fdocuments.net/reader035/viewer/2022062820/58aaff4c1a28abd35e8b5885/html5/thumbnails/31.jpg)
Modal: AlertsBoolean answer = await DisplayAlert(" Start", "Are you ready to begin?", "Yes", "No");
![Page 32: Xamarin Navigation Patterns](https://reader035.fdocuments.net/reader035/viewer/2022062820/58aaff4c1a28abd35e8b5885/html5/thumbnails/32.jpg)
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;};
![Page 33: Xamarin Navigation Patterns](https://reader035.fdocuments.net/reader035/viewer/2022062820/58aaff4c1a28abd35e8b5885/html5/thumbnails/33.jpg)
Modal: Action Sheets
![Page 34: Xamarin Navigation Patterns](https://reader035.fdocuments.net/reader035/viewer/2022062820/58aaff4c1a28abd35e8b5885/html5/thumbnails/34.jpg)
Modal: Action Sheets
• Demo: PopupMenu
![Page 35: Xamarin Navigation Patterns](https://reader035.fdocuments.net/reader035/viewer/2022062820/58aaff4c1a28abd35e8b5885/html5/thumbnails/35.jpg)
State Management
• Maintain the illusion of continuity during navigation• Sharing of data between screens• Pass variables directly into an instantiated ContentPage
![Page 36: Xamarin Navigation Patterns](https://reader035.fdocuments.net/reader035/viewer/2022062820/58aaff4c1a28abd35e8b5885/html5/thumbnails/36.jpg)
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;
![Page 37: Xamarin Navigation Patterns](https://reader035.fdocuments.net/reader035/viewer/2022062820/58aaff4c1a28abd35e8b5885/html5/thumbnails/37.jpg)
Passing Data
Pass data values directly into a page’s constructor • Demo: DrilldownListViewByItem
Other ways:• Demo:GlobalPage1, Global• Demo: PropertiesPage1
![Page 38: Xamarin Navigation Patterns](https://reader035.fdocuments.net/reader035/viewer/2022062820/58aaff4c1a28abd35e8b5885/html5/thumbnails/38.jpg)
Drill-down Lists
• by Item• by Page
• Grouped
![Page 39: Xamarin Navigation Patterns](https://reader035.fdocuments.net/reader035/viewer/2022062820/58aaff4c1a28abd35e8b5885/html5/thumbnails/39.jpg)
Drill-down Lists
• by Item – use a ListView• by Page – use a ListView
• Grouped – use a TableView
Use PushAsync when user clicks a row
![Page 40: Xamarin Navigation Patterns](https://reader035.fdocuments.net/reader035/viewer/2022062820/58aaff4c1a28abd35e8b5885/html5/thumbnails/40.jpg)
Drill-down Lists:NavigationPage
• Wrap list page in a NavigationPagepublic class App : Application{ public App() { MainPage = new NavigationPage(new DrilldownListViewByItem ()); }}
![Page 41: Xamarin Navigation Patterns](https://reader035.fdocuments.net/reader035/viewer/2022062820/58aaff4c1a28abd35e8b5885/html5/thumbnails/41.jpg)
Drill-down Lists
• Demo: DrilldownListViewByItem• Demo: DrilldownListViewByPage• Demo: DrilldownTableView
![Page 42: Xamarin Navigation Patterns](https://reader035.fdocuments.net/reader035/viewer/2022062820/58aaff4c1a28abd35e8b5885/html5/thumbnails/42.jpg)
Navigation Drawer
• Demo: MasterDetailPage• App.cs• NavigationDrawer.cs• HomePage.cs
![Page 43: Xamarin Navigation Patterns](https://reader035.fdocuments.net/reader035/viewer/2022062820/58aaff4c1a28abd35e8b5885/html5/thumbnails/43.jpg)
Tabs using TabbedPage
• Static • Data-bound
• Demos
![Page 44: Xamarin Navigation Patterns](https://reader035.fdocuments.net/reader035/viewer/2022062820/58aaff4c1a28abd35e8b5885/html5/thumbnails/44.jpg)
Springboard: Images with Gesture Recognizers• Roll your own Springboard (demo)
![Page 45: Xamarin Navigation Patterns](https://reader035.fdocuments.net/reader035/viewer/2022062820/58aaff4c1a28abd35e8b5885/html5/thumbnails/45.jpg)
Carousel using CarouselPage
this.Children.Add(new FirstPage()); this.Children.Add(new SecondPage()); this.Children.Add(new ThirdPage());
demo
![Page 46: Xamarin Navigation Patterns](https://reader035.fdocuments.net/reader035/viewer/2022062820/58aaff4c1a28abd35e8b5885/html5/thumbnails/46.jpg)
Xamarin.Forms NavigationNavigation 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
![Page 47: Xamarin Navigation Patterns](https://reader035.fdocuments.net/reader035/viewer/2022062820/58aaff4c1a28abd35e8b5885/html5/thumbnails/47.jpg)
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
![Page 48: Xamarin Navigation Patterns](https://reader035.fdocuments.net/reader035/viewer/2022062820/58aaff4c1a28abd35e8b5885/html5/thumbnails/48.jpg)
Xamarin.iOSNavigation• 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
![Page 49: Xamarin Navigation Patterns](https://reader035.fdocuments.net/reader035/viewer/2022062820/58aaff4c1a28abd35e8b5885/html5/thumbnails/49.jpg)
It’s all on GitHub
https://github.com/danhermes/xamarin-book-examples
![Page 50: Xamarin Navigation Patterns](https://reader035.fdocuments.net/reader035/viewer/2022062820/58aaff4c1a28abd35e8b5885/html5/thumbnails/50.jpg)
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
![Page 51: Xamarin Navigation Patterns](https://reader035.fdocuments.net/reader035/viewer/2022062820/58aaff4c1a28abd35e8b5885/html5/thumbnails/51.jpg)
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
![Page 52: Xamarin Navigation Patterns](https://reader035.fdocuments.net/reader035/viewer/2022062820/58aaff4c1a28abd35e8b5885/html5/thumbnails/52.jpg)
Xamarin Navigation Patterns
Dan Hermesdeveloper, author, consultant,
founder of Lexicon Systems
Available on Amazon
My blog: www.mobilecsharpcafe.com
Twitter: @danhermes