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!