How to remove bottom border on MAUI Navigation Bar

SSB 86 Reputation points

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

A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
2,831 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. Leon Lu (Shanghai Wicresoft Co,.Ltd.) 67,781 Reputation points Microsoft Vendor



    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.

    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()
                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

    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.