This document discusses various navigation patterns for Xamarin mobile applications, including hierarchical, modal, drill-down lists, navigation drawer, tabs, springboard, and carousel. It provides examples of implementing each pattern in Xamarin.Forms using classes like NavigationPage, MasterDetailPage, and TabbedPage. It also briefly covers implementing some of the patterns on Android and iOS. The document is promoting Dan Hermes' book and consulting services related to Xamarin development.

1. Xamarin Navigation Patterns
Dan Hermes
developer, author, consultant,
founder of Lexicon Systems
dan@lexiconsystemsinc.com
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

5. Our Clients Include

6. What is Navigation?

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

11. Hierarchical
Modal

12. Drill-down List

13. Navigation Drawer

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());
}
}

23. NavigationPage
• Demo: 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;
};

33. Modal: Action Sheets

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
dan@lexiconsystemsinc.com
Available on
Amazon
My blog: www.mobilecsharpcafe.com
Twitter: @danhermes