QuickTip, XamarinForms

Transparent Navigation Bar in Xamarin Forms

3 Comments

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!

You may also like

3 Comments

    1. 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.