[Xamarin Forms] Page navigation summary

1- The different navigation possibilities

In this article will we list and sum up how we can navigate inside a Xamarin Forms application.  In Xamarin.Forms, you can navigate between pages using several methods, we will enumerate it and give a brief description / use case for each:

1. Push/Pop Navigation: Using Navigation.PushAsync() and Navigation.PopAsync() for stack-based navigation.

2. Modal Navigation: Using Navigation.PushModalAsync() and Navigation.PopModalAsync() for displaying pages modally.

3. Master-Detail Navigation: Using MasterDetailPage to manage a master menu and a detail page.

4. Tabbed Navigation: Using TabbedPage for navigation between different tabs.

5. Carousel Navigation: Using CarouselPage to swipe through pages in a carousel-style interface.

6. Shell Navigation: Using Xamarin.Forms Shell for a unified navigation paradigm with URL-based routing and flyout menus.

7. Custom Navigation: Or if you want to customize and design a good architecture, you can also implement custom navigation logic using MessagingCenter, event handlers, or dependency injection.

2- Details about navigation

1. Push/Pop Navigation

• Behavior: Pages are pushed onto or popped off a navigation stack, creating a linear navigation experience.
• Implementation:
  • Push: await Navigation.PushAsync(new NextPage()); adds a new page to the top of the navigation stack.
  • Pop: await Navigation.PopAsync(); removes the top page from the stack, returning to the previous page.
• Use Case: Ideal for apps with hierarchical navigation, like moving deeper into a series of related pages.

2. Modal Navigation

• Behavior: Pages are presented modally, usually covering the entire screen. The user must dismiss the modal to return to the previous page.
• Implementation:
  • Push Modal: await Navigation.PushModalAsync(new ModalPage()); presents a page modally.
  • Pop Modal: await Navigation.PopModalAsync(); dismisses the modal page.
• Use Case: Suitable for scenarios like login screens, settings pages, or other independent workflows.

3. Master-Detail Navigation

• Behavior: The application consists of a Master page (usually a menu) and a Detail page. Selecting an item from the Master page changes the content of the Detail page.
• Implementation:
  • Define a MasterDetailPage with Master (menu) and Detail (content) properties.
  • 
    

    MasterDetailPage masterDetailPage = new MasterDetailPage
    {
        Master = new MenuPage(), 
        Detail = new NavigationPage(new HomePage())
    };
    

• Use Case: Commonly used in applications with side menus, allowing users to navigate between different sections.

4. Tabbed Navigation

• Behavior: The application displays multiple tabs at the bottom or top of the screen. Users can switch between different tabs, each representing a different page.
• Implementation:
  • Define a TabbedPage and add ContentPage or NavigationPage as children.

  • TabbedPage tabbedPage = new TabbedPage();
    tabbedPage.Children.Add(new NavigationPage(new HomePage()) { Title = "Home" });
    tabbedPage.Children.Add(new NavigationPage(new SettingsPage()) { Title = "Settings" });
    

• Use Case: Ideal for apps where multiple sections are logically separate and easily accessible, like social media or shopping apps.

5. Carousel Navigation

• Behavior: The application allows users to swipe horizontally between pages, similar to a slideshow.
• Implementation:
  • Define a CarouselPage and add multiple ContentPage instances as children.
  • 
    

    CarouselPage carouselPage = new CarouselPage();
    carouselPage.Children.Add(new Page1());
    carouselPage.Children.Add(new Page2());
    carouselPage.Children.Add(new Page3());
    

• Use Case: Suitable for onboarding screens, image galleries, or tutorial flows.

6. Shell Navigation

• Behavior: Shell provides a unified, URI-based navigation system with built-in support for flyout menus, tabs, and hierarchical navigation.
• Implementation:
• Define the navigation structure in a Shell class using ShellItem, ShellSection, and ShellContent.

• <Shell>
      <FlyoutItem Title="Home">
          <ShellContent ContentTemplate="{DataTemplate HomePage}" />
      </FlyoutItem>
      <FlyoutItem Title="Settings">
          <ShellContent ContentTemplate="{DataTemplate SettingsPage}" />
      </FlyoutItem>
  </Shell>
  

• Navigate using URIs: await Shell.Current.GoToAsync("settings");

• Use Case: Best for large applications with complex navigation structures, providing a consistent experience across platforms.

7. Custom Navigation

• Behavior: Developers implement their own navigation logic, potentially combining different approaches or creating unique patterns.
• Implementation:
  • Use MessagingCenter, event handlers, or dependency injection to manage navigation logic.
  • Example with MessagingCenter:

    MessagingCenter.Subscribe<MainPage>(this, "NavigateToPage", async (sender) => {
        await Navigation.PushAsync(new CustomPage());
    });
    

• Use Case: Useful when the built-in navigation mechanisms do not meet specific requirements or when you need to integrate navigation with custom workflows.