Remove iOS Navigation Bar Separator in .NET MAUI
Tags: dotnet, dotnetmaui, ios
Published: 2024-01-17 20:31:41

If you are developing a .NET MAUI app for iOS you may need to update the UI of the Navigation Bar when using **Shell**. In this post, I will show you how to remove the navigation bar separator for iOS using a simple custom handler and some native code. Let’s get started!

---

### Create a custom handler class

Create the following class under the _/Platforms/iOS_ folder

```csharp
using System;
using Microsoft.Maui.Controls.Handlers.Compatibility;
using Microsoft.Maui.Controls.Platform.Compatibility;
using UIKit;

namespace Test.Platforms.iOS
{
    public class CustomAppShell : ShellRenderer
    {
        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);
        }
        protected override IShellTabBarAppearanceTracker CreateTabBarAppearanceTracker()
        {
            return new MyBottomNavViewAppearanceTracker();
        }
        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.ConfigureWithTransparentBackground();
            navigationBarAppearance.ShadowColor = UIColor.Clear;
            navigationBarAppearance.BackgroundColor = UIColor.Clear;
            navigationBarAppearance.BackgroundEffect = null;
            navBar.ScrollEdgeAppearance = navBar.StandardAppearance = navigationBarAppearance;
        }
        public void SetHasShadow(UINavigationController controller, bool hasShadow)
        {
        }
        public void UpdateLayout(UINavigationController controller)
        {
        }
    }
    class MyBottomNavViewAppearanceTracker : IShellTabBarAppearanceTracker
    {
        public void Dispose()
        {
            
        }
        public void ResetAppearance(UITabBarController controller)
        {
            
        }
        public void SetAppearance(UITabBarController controller, ShellAppearance appearance)
        {
            var topBar = controller.TabBar;
            var topBarAppearance = new UITabBarAppearance();
            topBarAppearance.ConfigureWithTransparentBackground();
            topBarAppearance.ShadowColor = UIColor.Clear;
            topBarAppearance.BackgroundColor = UIColor.Clear;
            topBarAppearance.BackgroundEffect = null;
            topBar.ScrollEdgeAppearance = topBar.StandardAppearance = topBarAppearance;
        }
        public void UpdateLayout(UITabBarController controller)
        {
            
        }
    }
}
```
> On the code shared above, in addition to remove the navigation bar separator, I set the background color of the top bar appearance to be transparent by using _UIColor.Clear_, feel free to update it as needed for your requirements.

#### Register the handler
On the MauiProgram.cs file register the handler
```csharp
.ConfigureMauiHandlers(handlers =>
            {
#if IOS
                handlers.AddHandler(typeof(Shell), typeof(Test.Platforms.iOS.CustomAppShell));
#endif
            });
```

### Conclusion
In .NET MAUI it is really cool how easy you can implement a custom handler that allows to execute code based on each platform.

Thanks for reading! Follow me on social:
- GitHub **[@vhugogarcia](https://github.com/vhugogarcia)**
- LinkedIn **[victorhugogarcia](https://www.linkedin.com/in/victorhugogarcia/)**
- Threads  **[@ihugo](https://www.threads.net/@ihugo)**