In this article, I’m going to show you how to make the navigation bar transparent in Xamarin Forms.
Let’s do it Step by Step
1-Create a class that extends from NavigationPage
2-We use an iOS platform specific to specify bar is translucent.
Make sure to set the color BackgroundColor to Transparent and set the property NavigationPage.IsNavigationBarTranslucent=“True” on iOS.
2-Create a custom renderer for iOS
Replace the actual NavigationBar background and shadow image with an empty UIImage and set the BackgroundColor property to Clear color.
3-Create a custom renderer for Android
4-Replace the actual NavigationPage with the custom NavigationPage created
Use your new navigation page.
Result
That’s all for now!
PDT: The code used in this project was taken from the InVision Sample App by David Ortinau.
You can check this Sample source code here.
Happy coding!
3 Comments
How do you out it back to original? I only want some pages to have a transparent navigation bar
You can create a bindable property or attached property in the CustomNavigationPage.cs class, and in the custom renderer change the style according to it.
Your post is very helpful post