MAUI Environment Ribbon - NavigationPage integration (Part 3)

Chapters in this series:

1. Intro and basic UI
2. Shell integration
3. NavigationPage integration
4. UI customization
5. Optimization and wrap up
6. Download the code

When dealing with NavigationPage navigation we can use a similar approach to Shell for the basic functionality. We will use the Pushed event for adding the control to individual pages.

So far the code looks pretty much the same. There are however some more scenarios that we need to cover when dealing with NavigationPage as it offers different page types within the navigation which can be arranged in custom order depending on what the developers choose rather than what Shell allows. These are:

• NavigationPage
• FlyoutPage
• TabbedPage

First of all there can be another NavigationPage deeper in the hierarchy - and this is commonly used for example as child pages within a TabbedPage. So in order to add EnvironmentRibbon to all pages we also need to deal with the inner NavigationPages' Pushed events. Then we have FlyoutPage and TabbedPage which have inner pages and they are structured differently for each of these page types. We also need to pass the creation of EnvironmentRibbon to the inner pages.

When we put all of this together we can create a universal method that handles all these page types:

Now we can use environment ribbon even with NavigationPage easily when we use NavigationPage as our main page.

Similarly if the app is small and uses either FlyoutPage or TabbedPage as the main page (not wrapped in an additional NavigationPage), we can just add the respective extension methods for these page types.

Unifying the code

We created a new static class that contains the shared logic for handling the EnvironmentRibbon for both Shell and NavigationPage. Now instead of having the same code in the separate extension classes we can modify them this way:

And add the event handler methods to the EnvironmentRibbonService:

Now we have the integration ready for both Shell and NavigationPage. In the following posts we will take a look at some optimization that is needed and customization options for the control.

Previous chapter Next chapter