Net Maui — Flyout Navigation, Tab Navigation, and passing complex data through.

Hey Devs, here is Cristian, and today I would like to talk more about navigation in .Net Maui.

First, this post is an addition to my post about Shell Navigation.

In an enterprise application, navigation is something essential we’ll need to consider at some moment.

Flyout Navigation (“hamburger” menu)

Flyout Navigation is composed of several parts, FlyoutHeader, FlyoutItem, MenuItems, and FlyoutFooter. We’ll talk about everyone.

By the way, the best place to learn a new stack is usually on the supplier’s website, in this case, Microsoft.

Image from course Create multi-page .NET MAUI apps with tab and flyout navigation of Microsoft Learn that represents FlyoutNavigation structure.

Flyout Header

So, the header is the optional content that will appear at the top of the layout. We can put any view in this place.

Flyout Footer

The footer is the optional content that will appear at the bottom of the layout. Again, we can put any view in this place.

FlyoutItem

We use the FlyoutItem class to implement flyout navigation in .NET MAUI.

Image from course Create multi-page .NET MAUI apps with tab and flyout navigation of Microsoft Learn that represents how to create a Flyout containing flyout items.

As we see in this example, each flyout item has a ShellContent inside that references a specific page.

This example will automatically create a “hamburger navigation” in our application. When the user taps one of these items, the application will change the context and show the view specified.

This can be simplified by removing FlyoutItem and Tab tags.

In both cases, our result should be

Image from course Create multi-page .NET MAUI apps with tab and flyout navigation of Microsoft Learn that show how the layout is.

So easy…

MenuItem

The menu item is an optional action that can be added to the hamburger menu.

The difference is that, in this case, we can perform some action instead of displaying a view and changing the context.

Flyout with Tabs

If you want to have some navigation pages that have more navigations, you can combine Flyout with tabs.

For this, you need to add more the one page inside a FlyoutItem.

We will have something like this:

This image represents how the layout with Flyout with tabs.

Tab Navigation

Tab Navigation is an excellent possibility when you have a few pages, and each one of these pages has the same importance.

We will need to add our tab inside TabBar.

Register Route

First, the Route is a specific path to bind a particular view. When we do this, we can go to this page from anywhere.

For this work, we must register our routes, which is very simple.

The image represents how to register routes in the C# class.

We can register routes in XAML by setting the property Route in ShellContent.

The image represents how to register routes inside XAML.

We will need to do this when our pages are out of our main navigation, for example, a detail page.

Now we can go to this page just using Shell Navigation URI like this:

 await Shell.Current.GoToAsync("PageWithParameters");

How to send parameters with QueryProperties

Passing data through pages has always been challenging, but not now.

We can pass using a query string like this:

await Shell.Current.GoToAsync($"PageWithParameters?parameter1={parameter1}");

Or better yet, we can pass complex data using a dictionary like this:

And now, get this data inside “PageWithParameters”

Now in Net Maui, we can receive data using QueryProperties as DataAnnotation or Implementing IQueryAttributable.

Or

The result will be the same.

References

https://learn.microsoft.com/en-us/training/paths/build-apps-with-dotnet-maui/

If you are Brazilian like me, please check this playlist to help you with a great overview.