How do you remove the shell navigation bar separator line in maui - iOS

[gabsamples6]

I would like to remove the gray separator line that gets added with the navigation bar.
tried below taken from Shell workaround but does not seem to work as it adds a white background.. .

Am I doing something wrong?

 public class ShellWorkarounds : ShellRenderer
 {
     public static IShellPageRendererTracker Tracker { get; set; }

 protected override IShellNavBarAppearanceTracker CreateNavBarAppearanceTracker()
 {
     return new NoLineAppearanceTracker();
 }
 public class NoLineAppearanceTracker : IShellNavBarAppearanceTracker
 {
     public void Dispose() { }

     public void ResetAppearance(UINavigationController controller) { }

     public void SetAppearance(UINavigationController controller, ShellAppearance appearance)
     {
         var navBar = controller.NavigationBar;
         var navigationBarAppearance = new UINavigationBarAppearance();
         navigationBarAppearance.BackgroundColor = UIColor.Clear;
         navigationBarAppearance.ShadowColor = UIColor.Clear;
         navBar.ScrollEdgeAppearance = navBar.StandardAppearance = navigationBarAppearance;
     }

     public void SetHasShadow(UINavigationController controller, bool hasShadow) { }

     public void UpdateLayout(UINavigationController controller) { }
 }

}

[anurag-sukumaran]

Same issue here, I tried giveb below code as well it doesnot work

 xmlns:iosSep="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls"          
iosSep:NavigationPage.HideNavigationBarSeparator="True"
iosSep:NavigationPage.IsNavigationBarTranslucent="True"

Have u find any workaround?

[Xyncgas]

It would've been easy on the web stack, man this technology
It's a lot to learn to use XAML while it is doing nothing the browser can't do, the 'shell navigation bar separator line' my guess is enforced by the platform because I've seen it in lot app, it's the benefit for using MAUI to create native UI across devices
But surely a unified UI is easier to code and control and we should already have a framework that does it which is the browser for now until .NET can run inside the browser to directly manipulate the pixels through shaders in the future. I wouldn't say the MAUI project was a replacement for browser nor a solution for unified UI it's NativeUI across devices and therefore you get the restriction of native ui

[gabsamples6]

@vhugogarcia hi there apologies for tagging you but I believe you did some work on shell renderer and wondering if you knew how to remove the line separator? I don’t think this will ever be fixed by the Maui team so we need a workaround.Many thanks

[FreakyAli]

Doing this via C# in your OnAppearing/Constructor might fix the issue too

[gabsamples6]

Hi @FreakyAli how? this has been a pain for so long and bother me as the app does not look as good with that line .. codesnippet? many thanks

[vhugogarcia]

Hello @gabsamples6 and @anurag-sukumaran,

I'm sorry for the delay to answer, I got very busy at work and family, but finally I was able to create an article about how to remove the navigation bar separator line in .NET MAUI for iOS. I preferred to write an article so this information does not get lost on the discussions here, and instead it can help others in the future.

Remove iOS Navigation Bar Separator in .NET MAUI

I hope this helps you ;) .Please mark this as the answer if you believe it can help others :)

Regards,
Victor

[gabsamples6]

Hi @vhugogarcia thank you very much for your time and your article. Yes it does remove the line separator but causes other issues though.. everthying in the page moves up and all our current pages will need adjusting, I am sure this might be the correct behavior however I thought it would make just the separator not visible rather than move everthing up. Hope makes sense to you what I am saying. Any further suggestions

[ewerspej]

@gabsamples6 I don't experience the behavior you're describing. @vhugogarcia This works perfectly, thanks.