How to remove bottom border on MAUI Navigation Bar

Question

Hi on a navigation page, how to remove the bottom grey border on the top navigation bar?

Answer 1

Hello,

===========Update==============

there appears to be some lag where the top of the bar is gray for a second and then turns back to white when first opening the navigation page. This is where the status bar is at the top.

Yes, I can reproduce this issue. Please add UINavigationBar.Appearance.ShadowImage = new UIImage(); in your AppDelegate.cs like following code. And remove following NavigationRenderer solution. I test it in my device. Here is no grey status bar after navigating.

[Register("AppDelegate")]
public class AppDelegate : MauiUIApplicationDelegate
{
    protected override MauiApp CreateMauiApp()
    {
       UINavigationBar.Appearance.ShadowImage = new UIImage();
         return   MauiProgram.CreateMauiApp();
    }
}

=========NavigationRenderer solution=============

I tested all the platforms, and only iOS platform has bottom grey border on the top navigation bar.

You can create a custom NavigationRenderer in the Platfroms/iOS folder, then set NavigationBar.ShadowImage to a new UIImage like following code.

using UIKit;
using Microsoft.Maui.Controls.Handlers.Compatibility;

namespace MauiSwipeViewDemo.Platforms.iOS
{
    public class MyNavigationPageRenderer : NavigationRenderer
    {
        public MyNavigationPageRenderer()
        {
        }
        public override void ViewDidLoad()
        {
            base.ViewDidLoad();
            NavigationBar.ShadowImage = new UIImage();
            NavigationBar.ClipsToBounds = true; // optional
        }
    }
}

In the end, you can register the custom renderer by ConfigureMauiHandlers in the MauiProgram.cs

builder.ConfigureMauiHandlers((hanlders) =>
                {
#if IOS
                    hanlders.AddHandler(typeof(NavigationPage),typeof(MauiSwipeViewDemo.Platforms.iOS.MyNavigationPageRenderer));
#endif

               })

Best Regards,

Leon Lu

---

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.