Smooth Transition Between Pages with and Without Navigation Bars in MAUI

Question

In a .NET MAUI application, I have a scenario where I'm navigating from a page without a navigation bar (NavigationPage.SetHasNavigationBar(this, false)) to a page that includes a navigation bar. During the transition, the appearance of the navigation bar feels clunky and visually disruptive, as it renders after the page transition begins.

Is there a recommended approach to ensure a smooth transition between such pages, where the navigation bar appears seamlessly as part of the animation? Additionally, are there any platform-specific configurations (e.g., on Android or iOS) or built-in mechanisms in MAUI to handle this scenario more gracefully?

I’m open to exploring custom renderers or platform effects if needed. Any guidance or sample code would be greatly appreciated.

Thank you!

Answer 1

Hello,

This is actually an expected behavior. Because NavigationBar belongs to the outermost packaging class, it will be rendered first. This results in the navigation bar appearing first and then rendering the page when switching from a page without NavigationBar to a page with NavigationBar.

Workaround:

Since the core of the problem is that the NavigationBar will be rendered before the page anyway, one solution is to set the NavigationBar to invisible first, and then set the visibility when the page is about to execute the rendering method to ensure that the NavigationBar and ContentPage appear at the same time.

In xaml Page:

NavigationPage.HasNavigationBar="False"

In code-behind:

// When this method is executed, the dimensions of the page elements have been allocated and rendering is about to be performed.

protected override void OnSizeAllocated(double width, double height)

{

    base.OnSizeAllocated(width, height);

    NavigationPage.SetHasNavigationBar(this, true);

}

Best Regards,

Alec Liu.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.