Xamarin.Tips – Removing the Bottom Border of Your iOS Navigation Bars

iOS UINavigationBars by default ship with a bottom border. If you want to remove it, all you need to do is update the ShadowImage of your UINavigationBar. Setting it to new UIImage() will do the trick. This might not be a universal solution. If you are doing more custom work or for certain layouts, you might need to take some additional steps including setting ClipsToBounds to true and setting the BackgroundImage of the UINavigationBar to a new UIImage() as well.

Here’s all of that together:

...
NavigationBar.ShadowImage = new UIImage();
NavigationBar.ClipsToBounds = true(); // optional
NavigationBar.BackgroundImage = new UIImage(); // optional
...

Of course, we are also going to talk about applying this in Xamarin.Forms!

If you want to apply this globally, you can create a custom renderer for NavigationPage. If you only want it in some situations, then you will need to create a new subclass of ContentPage and create a custom renderer for that page that will apply the same changes as below for our universal solution:

CustomNavigationRenderer.cs

[assembly: ExportRenderer(typeof(NavigationPage), typeof(CustomNavigationRenderer))]
namespace YOUR_IOS_NAMESPACE
{
    public class CustomNavigationRenderer : NavigationRenderer
    {
        public override void ViewDidLoad()
        {
            base.ViewDidLoad();

            NavigationBar.ShadowImage = new UIImage();
            NavigationBar.ClipsToBounds = true(); // optional
            NavigationBar.BackgroundImage = new UIImage(); // optional
        }

    }
}

One other way to do this is by using the Appearance API and apply it universally!

...
UINavigationBar.Appearance.ShadowImage = new UIImage();
...

Lastly, here’s is how this would look in Swift if you’ve landed here but aren’t using Xamarin and C#:

UINavigationBar.appearance().setBackgroundImage(
    UIImage(),
    forBarPosition: .Any,
    barMetrics: .Default)

UINavigationBar.appearance().shadowImage = UIImage()

or if you are for some reason in love with Obj-C:

[[UINavigationBar appearance] setBackgroundImage:[[UIImage alloc] init]
                                  forBarPosition:UIBarPositionAny
                                      barMetrics:UIBarMetricsDefault];

[[UINavigationBar appearance] setShadowImage:[[UIImage alloc] init]];

 

 

If you like what you see, don’t forget to follow me on twitter @Suave_Pirate, check out my GitHub, and subscribe to my blog to learn more mobile developer tips and tricks!