Page Navigation in .NET MAUI: An Overview | Syncfusion Blogs
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (179).NET Core  (29).NET MAUI  (214)Angular  (110)ASP.NET  (51)ASP.NET Core  (83)ASP.NET MVC  (90)Azure  (41)Black Friday Deal  (1)Blazor  (226)BoldSign  (15)DocIO  (24)Essential JS 2  (109)Essential Studio  (200)File Formats  (68)Flutter  (133)JavaScript  (226)Microsoft  (120)PDF  (81)Python  (1)React  (105)Streamlit  (1)Succinctly series  (131)Syncfusion  (942)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (52)Windows Forms  (61)WinUI  (71)WPF  (163)Xamarin  (161)XlsIO  (38)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (9)Business intelligence  (55)Button  (4)C#  (157)Chart  (140)Chart of the week  (54)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (70)Development  (658)Doc  (8)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (7)Essential Tools  (14)Excel  (43)Extensions  (22)File Manager  (7)Gantt  (19)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (512)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (43)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (54)Security  (4)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (14)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (393)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (614)What's new  (333)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Page Navigation in .NET MAUI An Overview

Page Navigation in .NET MAUI: An Overview

TL;DR: Want to create a seamless navigation experience in your .NET MAUI app? This guide explores two powerful methods: Shell for an intuitive mobile menu or base navigation pages for tabbed and stacked layouts. Dive in and discover code examples to simplify your app development.

A typical application needs a hierarchical navigation experience where the user can navigate through pages forward and backward as required.

The .NET MAUI platform provides two primary forms of page navigation to an app:

  • Shell.
  • Base navigation pages, such as FlyoutPage, TabbedPage, and NavigationPage.

In this blog, let’s see how we can integrate page navigation in your .NET MAUI application with code examples.

Page navigation through Shell

Shell page navigation is recommended to provide a page navigation experience in a .NET MAUI mobile app.

Shell is a UI control that hosts your pages and provides flyout and tab menus for navigation. Shell page navigation can also be done based on URLs. You can use content templates with it to make the code efficient.

A Shell template is available in any new .NET MAUI project as an AppShell.Xaml file with a single page that is added as the primary page. To use this template:

Syncfusion’s .NET MAUI controls suite is the expert’s choice for building modern web apps.

  1. Create a simple .NET MAUI app. By default, it will be generated with a shell template.
  2. Then, create the required pages. Here, I will create two additional pages, namely Add.Xaml and Edit.Xaml.
  3. Open the AppShell.Xaml file where the MainPage has already been added as Shell content. Add the required pages as content to it.
    Refer to the following code example.

    <Shell
        x:Class="ShellPageNavigation.AppShell"
        xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:local="clr-namespace:ShellPageNavigation"
        Shell.FlyoutBehavior="Diabled">
     
      <ShellContent
          Title="Home"
          ContentTemplate="{DataTemplate local:MainPage}"
          Route="MainPage" />
     
      <ShellContent
          Title="Add"
          ContentTemplate="{DataTemplate local:AddPage}"
          Route="AddPage" />
     
      <ShellContent
          Title="Edit"
          ContentTemplate="{DataTemplate local:EditPage}"
          Route="EditPage" />
      
    </Shell>
  4. By default, the FlyoutBehavior is disabled. You can enable it with the value Flyout.
    Refer to the following code.

    <Shell
       x:Class="ShellPageNavigation.AppShell"
       xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:local="clr-namespace:ShellPageNavigation"
       Shell.FlyoutBehavior="Flyout">
     
      <ShellContent
         Title="Home"
         ContentTemplate="{DataTemplate local:MainPage}"
         Route="MainPage" />
     
      <ShellContent
         Title="Add"
         ContentTemplate="{DataTemplate local:AddPage}"
         Route="AddPage" />
     
      <ShellContent
         Title="Edit"
         ContentTemplate="{DataTemplate local:EditPage}"
         Route="EditPage" />
      
    </Shell>
    
Page Navigation in a .NET MAUI App Using Shell
Page Navigation in a .NET MAUI App Using Shell

Note: Check out the .NET MAUI Shell flyout and Shell tabs documentation for more details.

Every property of the Syncfusion .NET MAUI controls is completely documented to make it easy to get started.

Page navigation through base navigation pages

Base navigation pages are another way to achieve page navigation in your .NET MAUI app. They support pages such as FlyoutPage, TabbedPage, and NavigationPage. We can perform navigation through Push and Pop actions.

Let’s take a quick look at these pages!

TabbedPage

The .NET MAUI TabbedPage contains tabs, and each tab will load content in the detail area.

Refer to the following code example.

<TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:ShellPageNavigation"
            x:Class="ShellPageNavigation.TabbedPageNavigation">
  <local:MainPage Title="Home"/>
  <local:AddPage Title="Add"/>
  <local:EditPage Title="Edit"/>
</TabbedPage>
Page Navigation in .NET MAUI App Using TabbedPage
Page Navigation in .NET MAUI App Using TabbedPage

FlyoutPage

The .NET MAUI FlyoutPage contains a detail page with an overlay page called a flyout to present items. The detail page will load the content of the page selected on the flyout.

Refer to the following code example.

<FlyoutPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:ShellPageNavigation"
            x:Class="ShellPageNavigation.FlyoutPageNavigation">
 <FlyoutPage.Flyout>
  <local:FlyMenuPage x:Name="flyoutMenu"/>
 </FlyoutPage.Flyout>
 <FlyoutPage.Detail>
  <NavigationPage>
   <x:Arguments>
    <local:MainPage/>
   </x:Arguments>
  </NavigationPage>
 </FlyoutPage.Detail>
</FlyoutPage>

NavigationPage

The .NET MAUI NavigationPage is used to stack pages, and we can easily navigate to the required page with the push and pop actions.

Push pages

The PushAsync method of the NavigationPage will push a page in the navigation stack.

Refer to the following code.

await Navigation.PushAsync(new DetailsPage());

Syncfusion .NET MAUI controls allow you to build powerful line-of-business applications.

Pop pages

The PopAsync method of the NavigationPage will pop a page in the navigation stack. Also, we can pop the current page by pressing the Back button on our device.

To programmatically pop a page, refer to the following code.

await Navigation.PopAsync();

GitHub reference

Check out a complete example of page navigation in the .NET MAUI application on GitHub.

Conclusion

Thanks for reading. I hope you have a basic idea about page navigation in the .NET MAUI application. Syncfusion .NET MAUI controls are also compatible with these navigation pages. Please give them a try and leave your feedback in the comments section below!

Also, you can contact us through our support forumsupport portal, or feedback portal. We are always happy to assist you!

Test Flight
App Center Badge
Google Play Store Badge
Microsoft Badge
Github Store Badge

Related blogs

Tags:

Share this post:

Comments (7)

Great post Selva! Very informative.

In the below line you are adding two pages named Add.Xaml and Edit.Xaml

Here, I will create two additional pages, namely Add.Xaml and Edit.Xaml.

But in AppShell.Xaml it has been mentioned as

In the above code snippet name of the page is mentioned wrongly, correct me if I’m wrong

Hi Hari,

Your comment looks incomplete. Please post it again or create a support ticket (https://support.syncfusion.com/) with complete details. This will help us address your query.

Thanks,
Suresh

In the description above, you are adding two pages named Add.Xaml and Edit.Xaml but in AppShell.xaml you have mentioned their name as local:AddPage and local:EditPage in ContentTemplate property.

This may throw an error right? Correct me if I’m wrong

I’m having a trouble migrating a Xamarin app to MAUI:

An exception is throwed with any page in the detail section:
System.InvalidOperationException: ‘NavGraph cannot be null’

If I replace the arguments part using the RootPage property, all the page is showed in white:

Any suggestion?

Gayathri Ramalingam
Gayathri Ramalingam

Hi CHRISTIAN,

Could you please confirm whether you are using the application mentioned in this blog? If not, could you kindly provide details of the application you utilized instead? It will be useful for us to investigate further into this and assist you with a better solution at the earliest.

Regards,
Gayathri R

No, I just create a new project with FlyoutPage structure without success.
For Xamarin it works fine, in MAUI doesn’t.

Comments are closed.

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed