How to remove bottom border on MAUI Navigation Bar

SSB 86 Reputation points
2024-02-29T13:51:45.0333333+00:00

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

.NET MAUI
.NET MAUI
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
    2024-03-01T02:44:17.0866667+00:00

    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.